Create screen for signup

[codigouranio]

Masked input controls https://www.npmjs.com/package/react-text-mask Integration Formik and Chakra UI https://chakra-ui.com/getting-started/with-formik Password https://github.com/tarunbatra/password-validator Yup for validation https://www.npmjs.com/package/yup Yup and password https://github.com/knicola/yup-password/blob/master/index.js Password strength https://github.com/HamedFathi/PasswordMeter

Code for password strength validation with Yup

yup.addMethod(yup.string, "strongPassword", strongPasswordMethod);

function strongPasswordMethod() {
    return this.test("strongPasswordTest", _, function (value) {
        const { path, createError } = this;
        switch (Boolean(value)) {
            case !/^(?=.*[a-z])/.test(value):
                return createError({ path, message: "password must include lowercase letter" });
            case !/^(?=.*[A-Z])/.test(value):
                return createError({ path, message: "password must include uppercase letter" });
            case !/^(?=.*[0-9])/.test(value):
                return createError({ path, message: "password must include digit" });
            case !/^(?=.*[!@#\$%\^&\*])/.test(value):
                return createError({ path, message: "password must include special character" });
            default:
                return true;
        }
    });
};

const schema = yup.object().shape({
    password: yup.string().required().strongPassword()
});

[fabianmolinab]

https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength