Merge pull request #13 from simular/fix/register-validation

[Fix] Password Strength not work on Registering
simular · May 25, 2024 · d8edbc4 · d8edbc4
2 parents 7f7d349 + b31073d
commit d8edbc4
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 10 deletions.
diff --git a/src/directive/disable-swipe-back.ts → src/directive/v-disable-swipe-back.ts b/src/directive/disable-swipe-back.ts → src/directive/v-disable-swipe-back.ts
diff --git a/src/directive/password-strength.ts → src/directive/v-password-strength.ts b/src/directive/password-strength.ts → src/directive/v-password-strength.ts
@@ -11,7 +11,7 @@ export default <Directive<HTMLIonInputElement>> {
   }
 }
 
-function onInput(e: Event) {
+async function onInput(e: Event) {
   if (import.meta.env.VITE_CHECK_PASSWORD_STRENGTH !== '1') {
     return;
   }
@@ -24,9 +24,12 @@ function onInput(e: Event) {
 
   if (result.score < 3) {
     el.classList.add('ion-invalid');
+    el.errorText = result.feedback.suggestions.join(' ');
   } else {
     el.classList.add('ion-valid');
+    el.errorText = '';
   }
 
-  el.errorText = result.feedback.suggestions.join(' ');
+  const input = await el.getInputElement();
+  input.setCustomValidity(el.errorText);
 }
diff --git a/src/directive/validation.ts → src/directive/v-validation.ts b/src/directive/validation.ts → src/directive/v-validation.ts
@@ -4,12 +4,18 @@ export default <Directive<HTMLIonInputElement>> {
   async mounted(el, bindings) {
     el.addEventListener('input', onInput);
     el.addEventListener('invalid', onInvalid);
+
+    const input = await el.getInputElement();
+    input.addEventListener('invalid', onInputInvalid);
   },
 
   async unmounted(el) {
     el.removeEventListener('input', onInput);
     el.removeEventListener('invalid', onInvalid);
-  }
+
+    const input = await el.getInputElement();
+    input.removeEventListener('invalid', onInputInvalid);
+  },
 }
 
 function onInput(e: Event) {
@@ -32,3 +38,15 @@ async function onInvalid(e: Event) {
     el.errorText = input.validationMessage;
   });
 }
+
+async function onInputInvalid(e: Event) {
+  const input = e.currentTarget as HTMLInputElement;
+
+  const ionInput = input.closest<HTMLIonInputElement>('ion-input');
+
+  if (ionInput) {
+    ionInput.dispatchEvent(
+      new CustomEvent('invalid')
+    );
+  }
+}
diff --git a/src/views/LockScreen.vue b/src/views/LockScreen.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import logo from '@/assets/images/logo-dark.svg';
-import { default as vDisableSwipeBack } from '@/directive/disable-swipe-back';
+import { default as vDisableSwipeBack } from '@/directive/v-disable-swipe-back';
 import localAuthService from '@/service/local-auth-service';
 import lockScreenService from '@/service/lock-screen-service';
 import userService from '@/service/user-service';

diff --git a/src/views/auth/RegistrationPage.vue b/src/views/auth/RegistrationPage.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 
 import logo from '@/assets/images/icon.svg';
-import { default as vPasswordStrength } from '@/directive/password-strength';
+import vPasswordStrength from '@/directive/v-password-strength';
+import vValidation from '@/directive/v-validation';
 import apiClient from '@/service/api-client';
 import authService from '@/service/auth-service';
 import { srpClient } from '@/service/srp';
@@ -18,16 +19,24 @@ import {
   toastController,
   useIonRouter,
 } from '@ionic/vue';
-import { ref } from 'vue';
+import { ComponentPublicInstance, ref } from 'vue';
 
 const router = useIonRouter();
 const email = ref(import.meta.env.VITE_TEST_REGISTER_USERNAME || '');
 const password = ref(import.meta.env.VITE_TEST_REGISTER_PASSWORD || '');
 const { loading, run } = useLoading();
 
+const form = ref<HTMLFormElement>();
+
 async function register() {
   const client = srpClient();
 
+  const validity = form.value?.checkValidity();
+
+  if (!validity) {
+    return;
+  }
+
   const result = await run(async () => {
     const { salt, verifier } = await client.register(email.value, password.value);
 
@@ -76,16 +85,18 @@ async function register() {
           Create a new account
         </h3>
 
-        <div style="width: 85%; display: grid; gap: 1rem;">
+        <form ref="form" style="width: 85%; display: grid; gap: 1rem;">
           <ion-list style="display: grid; gap: 1rem;">
             <ion-item>
               <ion-input label="Email"
+                name="email"
                 type="email"
                 fill="solid"
                 label-placement="stacked"
                 placeholder=""
                 autocomplete="email"
                 v-model="email"
+                v-validation
               >
                 <FontAwesomeIcon :icon="faEnvelope" slot="start" />
               </ion-input>
@@ -122,7 +133,7 @@ async function register() {
               Sign in Now
             </router-link>
           </div>
-        </div>
+        </form>
       </div>
     </ion-content>
   </ion-page>

diff --git a/src/views/user/PasswordChangePage.vue b/src/views/user/PasswordChangePage.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 
 import MainLayout from '@/components/layout/MainLayout.vue';
-import { default as vPasswordStrength } from '@/directive/password-strength';
-import { default as vValidation } from '@/directive/validation';
+import { default as vPasswordStrength } from '@/directive/v-password-strength';
+import { default as vValidation } from '@/directive/v-validation';
 import authService from '@/service/auth-service';
 import encryptionService from '@/service/encryption-service';
 import passwordResetService from '@/service/password-reset-service';