diff --git a/src/views/register.vue b/src/views/register.vue
index 53193ec..7081ca8 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -19,6 +19,16 @@
Submit
+
Invalid Email.
+ Password must be 8-15 characters long.
+ Password must have at least one:
+ Upper case letter
+ Lower case letter
+ One numeric digit
+ One special character
+
+ Passwords dont match.
+
@@ -45,49 +55,61 @@ interface RegisterPayload {
export default defineComponent({
name: "Register",
setup() {
+ const router = useRouter();
+ const { invoke } = useIpc();
+ const { setToken } = useAuth();
+
const email = ref("");
const password = ref("");
const password2 = ref("");
+ const invalidEmail = ref(false);
+ const weakPass = ref(false);
+ const passUnMatch = ref(false);
- const { invoke } = useIpc();
- const { setToken } = useAuth();
- const router = useRouter();
-
- const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
-
- const passwordMatch = () => {
- let match = false;
- if (password.value == password2.value) {
- match = true;
- }
- return match;
- }
-
- const validate = () => {
- let valid = false;
- if (re.test(email.value) && passwordMatch()) {
- valid = true;
- }
- return valid;
- }
+ // emai must be in '@email.com' format
+ const emailReg = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+ // password must be 8-15 chars, have one upper, lower, number, and special char
+ const pwReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
+ // call this function on form submit.
const submit = async () => {
+ // reset invalid credentials references.
+ invalidEmail.value = false;
+ weakPass.value = false;
+ passUnMatch.value = false;
- const payload: RegisterPayload = {
- request: "register",
- email: email.value,
- password: password.value,
- };
+ // validate email.
+ if (!emailReg.test(email.value)) {
+ invalidEmail.value = true;
+ return;
+ }
+
+ // validate password strength.
+ if (!pwReg.test(password.value)) {
+ weakPass.value = true;
+ return;
+ }
+
+ // check password match
+ if (password.value !== password2.value) {
+ passUnMatch.value = true;
+ return;
+ }
+
+ const payload: RegisterPayload = {
+ request: "register",
+ email: email.value,
+ password: password.value,
+ };
+
+ try {
+ const res = await invoke('auth-session', payload);
+ setToken(res);
+ router.push({ name: "home" });
+ } catch(e) {
+ console.log('Failed to register.')
+ }
- if (validate()) {
- try {
- const res = await invoke('auth-session', payload);
- setToken(res);
- router.push({ name: "home" });
- } catch(e) {
- console.log('Failed to register.')
- }
- }
};
const switchView = () => {
@@ -100,6 +122,9 @@ export default defineComponent({
password2,
switchView,
submit,
+ invalidEmail,
+ weakPass,
+ passUnMatch,
};
},
});
@@ -162,4 +187,11 @@ export default defineComponent({
color: #58C4FD;
font-weight: bold;
}
+
+.invalid {
+ font-family: "SF Compact Display";
+ font-weight: bold;
+ font-size: 14px;
+ color: #F53737;
+}