fix(components): export useLang in PasswordChangeStepper

simsustech · Jan 2, 2024 · ebb0c51 · ebb0c51
1 parent 98f6393
commit ebb0c51
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 22 deletions.
diff --git a/.changeset/sour-crabs-attack.md b/.changeset/sour-crabs-attack.md
@@ -0,0 +1,5 @@
+---
+"@simsustech/quasar-components": patch
+---
+
+fix(components): export useLang in PasswordChangeStepper
diff --git a/packages/components/src/ui/authentication/PasswordChangeForm.vue b/packages/components/src/ui/authentication/PasswordChangeForm.vue
@@ -116,7 +116,6 @@ const newPassword = ref('')
 const repeatNewPassword = ref('')
 const showPassword = ref(false)
 const showRepeatPassword = ref(false)
-const header = computed(() => lang.value.password.changePassword)
 
 const formRef = ref<QForm>()
 const validations = computed<
@@ -153,9 +152,7 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
   })
 }
 
-const variables = ref({
-  header
-})
+const variables = ref({})
 const functions = ref({
   submit
 })

diff --git a/packages/components/src/ui/authentication/PasswordChangeStepper.vue b/packages/components/src/ui/authentication/PasswordChangeStepper.vue
@@ -38,15 +38,17 @@
 </template>
 
 <script lang="ts">
+import { useLang, loadLang } from './lang'
+
 export default {
-  name: 'PasswordChangeStepper'
+  name: 'PasswordChangeStepper',
+  useLang: useLang
 }
 </script>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useQuasar, QInputProps } from 'quasar'
-import { useLang, loadLang } from './lang'
 import QSubmitButton from '../general/QSubmitButton.vue'
 import RequestOtpForm from './RequestOtpForm.vue'
 import PasswordChangeForm from './PasswordChangeForm.vue'
@@ -102,20 +104,14 @@ watch($q.lang, (val) => {
 const steps = ['requestOtp', 'changePassword'] as const
 const step = ref<(typeof steps)[number]>('requestOtp')
 const email = ref('')
-const header = computed(() => lang.value.password.changePassword)
-const passwordChanged = computed(() => lang.value.password.passwordChanged)
-const unprocessableRequest = computed(() => lang.value.unprocessableRequest)
-const checkEmail = computed(() => lang.value.otp.checkEmail)
 
 const requestOtpFormRef = ref<typeof RequestOtpForm>()
 const passwordChangeFormRef = ref<typeof PasswordChangeForm>()
 
-const requestOtpHeader = computed(
-  () => requestOtpFormRef.value?.variables.header || ''
-)
-const passwordChangeHeader = computed(
-  () => passwordChangeFormRef.value?.variables.header || ''
-)
+const requestOtpHeader = computed(() => lang.value.otp.request)
+
+const passwordChangeHeader = computed(() => lang.value.password.changePassword)
+
 const requestOtp: InstanceType<typeof RequestOtpForm>['$props']['onSubmit'] = ({
   email: emittedEmail,
   done
@@ -141,10 +137,6 @@ const changePassword: InstanceType<
 }
 
 const variables = ref({
-  header,
-  passwordChanged,
-  unprocessableRequest,
-  checkEmail,
   steps
 })
 const functions = ref({

diff --git a/packages/components/src/ui/authentication/RequestOtpForm.vue b/packages/components/src/ui/authentication/RequestOtpForm.vue
@@ -65,7 +65,6 @@ watch($q.lang, (val) => {
 })
 
 const email = ref('')
-const header = computed(() => lang.value.otp.request)
 
 const formRef = ref<QForm>()
 const validations = computed<
@@ -90,7 +89,7 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = ({
   })
 }
 
-const variables = ref({ header })
+const variables = ref({})
 const functions = ref({ submit })
 defineExpose({
   variables,

diff --git a/packages/components/src/ui/authentication/lang/en-US.ts b/packages/components/src/ui/authentication/lang/en-US.ts
@@ -32,6 +32,9 @@ const lang: Language = {
       fieldRequired: 'Field is required.',
       invalidEmail: 'A valid email address is required.'
     },
+    messages: {
+      unknownEmail: 'Email address is not registered.'
+    },
     request: 'Request a one-time password',
     checkEmail:
       'You will receive a verification code in your email. Please use this verification code in the next step.',

diff --git a/packages/components/src/ui/authentication/lang/index.ts b/packages/components/src/ui/authentication/lang/index.ts
@@ -46,6 +46,9 @@ export interface Language {
       fieldRequired: string
       invalidEmail: string
     }
+    messages: {
+      unknownEmail: string
+    }
     request: string
     checkEmail: string
     verificationCode: string

diff --git a/packages/components/src/ui/authentication/lang/nl.ts b/packages/components/src/ui/authentication/lang/nl.ts
@@ -32,6 +32,9 @@ const lang: Language = {
       fieldRequired: 'Veld is vereist.',
       invalidEmail: 'Het email adres is ongeldig.'
     },
+    messages: {
+      unknownEmail: 'Email adres is niet geregistreerd.'
+    },
     request: 'Vraag een eenmalig wachtwoord aan.',
     checkEmail:
       'U ontvangt een verificatie code in uw mailbox. Gebruik deze code in de volgende stap.',