feat: (auth) Add ability to signup with e-mail

src/pages/ResetPassword.vue

@@ -34,58 +34,27 @@
                   @click="resetPw"
                   label="Send Reset Link"
                   color="primary"></q-btn>
-                <!-- <q-btn
-                type="button"
-                @click="register"
-                color="secondary"
-                label="Register"
-                flat
-              ></q-btn> -->
               </q-card-actions>
             </q-card-section>
           </q-form>
-          <q-form
-            @submit="submitNewPw"
-            v-else-if="validResetLink()">
-            <q-card-section class="q-ma-sm">
-              <q-input
-                v-model="password"
-                label="New Password"
-                type="password"
-                color="darkblue"
-                :rules="[validatePasswordStrength]"
-                lazy-rules
-                filled></q-input>
-              <q-input
-                v-model="confirmPassword"
-                label="Confirm New Password"
-                type="password"
-                color="darkblue"
-                :rules="[validatePasswordStrength]"
-                lazy-rules
-                filled></q-input>
-              <div class="text-caption q-py-md">Enter a new password.</div>
-            </q-card-section>
-            <q-card-actions>
-              <q-btn
-                type="submit"
-                label="Reset Password"
-                color="primary"></q-btn>
-              <!-- <q-btn
-                type="button"
-                @click="register"
-                color="secondary"
-                label="Register"
-                flat
-              ></q-btn> -->
-            </q-card-actions>
-          </q-form>
+          <div v-else-if="validResetLink()">
+            <q-form
+              @submit="submitNewPw"
+              @keydown.enter.prevent="resetPw">
+              <NewPasswordComponent v-model="newPassword" />
+              <q-card-actions>
+                <q-btn
+                  type="submit"
+                  label="Reset Password"
+                  color="primary"></q-btn>
+              </q-card-actions>
+            </q-form>
+          </div>
           <q-card
             v-else
             class="text-center">
             <span class="text-h5">Invalid reset link.</span>
           </q-card>
-          <!-- <q-card-section><GoogleOauthComponent /></q-card-section> -->
         </q-card>
       </q-page>
     </q-page-container>
@@ -112,38 +81,11 @@ import { ref } from 'vue';
 import { account, resetPassword } from 'boot/appwrite';
 import { useRouter } from 'vue-router';
 import { Dialog } from 'quasar';
-// import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import NewPasswordComponent from 'components/NewPasswordComponent.vue';
 
 const email = ref('');
 const router = useRouter();
-const password = ref('');
-const confirmPassword = ref('');
-
-const validatePasswordStrength = (val: string) => {
-  const hasUpperCase = /[A-Z]/.test(val);
-  const hasLowerCase = /[a-z]/.test(val);
-  const hasNumbers = /[0-9]/.test(val);
-  const hasNonAlphas = /[\W_]/.test(val);
-  const isValidLength = val.length >= 8;
-
-  return (
-    (hasUpperCase &&
-      hasLowerCase &&
-      hasNumbers &&
-      hasNonAlphas &&
-      isValidLength) ||
-    'Password must be at least 8 characters long and include uppercase, lowercase, number, and special character.'
-  );
-};
-
-const validatePasswordsMatch = (val: string) => {
-  return val === password.value || 'Passwords do not match.';
-};
-
-function isPasswordResetLink() {
-  const query = router.currentRoute.value.query;
-  return query && query.secret && query.userId && query.expire;
-}
+const newPassword = ref();
 
 function validResetLink(): boolean {
   const query = router.currentRoute.value.query;
@@ -153,27 +95,34 @@ function validResetLink(): boolean {
   );
 }
 
+function isPasswordResetLink() {
+  const query = router.currentRoute.value.query;
+  return query && query.secret && query.userId && query.expire;
+}
+
 function submitNewPw() {
   const query = router.currentRoute.value.query;
-  if (
-    validatePasswordStrength(password.value) === true &&
-    validatePasswordsMatch(confirmPassword.value) === true
-  ) {
+  if (newPassword.value) {
     account
       .updateRecovery(
         query.userId as string,
         query.secret as string,
-        password.value
+        newPassword.value
       )
       .then(() => {
-        Dialog.create({ message: 'Password Changed!' });
-        router.replace('/login');
+        Dialog.create({ message: 'Password Changed!' }).onOk(() =>
+          router.replace('/login')
+        );
       })
       .catch((e) =>
         Dialog.create({
           message: 'Password change failed!  Error: ' + e.message,
         })
       );
+  } else {
+    Dialog.create({
+      message: 'Invalid password.  Try again',
+    });
   }
 }