diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue index d246c9557..b7ceb1bb8 100644 --- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue +++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue @@ -10,14 +10,13 @@ import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'; import SimpleDivider from '../../../../../components/Divider/SimpleDivider.vue'; import Input from 'dashboard/components-next/input/Input.vue'; import NextButton from 'dashboard/components-next/button/Button.vue'; -import Icon from 'dashboard/components-next/icon/Icon.vue'; import { isValidPassword } from 'shared/helpers/Validators'; import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue'; import { register } from '../../../../../api/auth'; import * as CompanyEmailValidator from 'company-email-validator'; +import PasswordRequirements from './PasswordRequirements.vue'; const MIN_PASSWORD_LENGTH = 6; -const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/; const store = useStore(); const { t } = useI18n(); @@ -76,7 +75,8 @@ const shouldShowError = fieldName => { }; const shouldShowPasswordRequirementError = computed(() => { - const hasValue = credentials.password && credentials.password.length > 0; + const hasValue = + Boolean(credentials.password) && credentials.password.length > 0; return hasValue && v$.value.credentials.password.$error; }); @@ -105,51 +105,6 @@ const showGoogleOAuth = computed(() => { const isFormValid = computed(() => { return !v$.value.$invalid; }); - -const passwordRequirements = computed(() => { - const password = credentials.password || ''; - return { - length: password.length >= MIN_PASSWORD_LENGTH, - uppercase: /[A-Z]/.test(password), - lowercase: /[a-z]/.test(password), - number: /[0-9]/.test(password), - special: SPECIAL_CHAR_REGEX.test(password), - }; -}); - -const passwordRequirementItems = computed(() => { - const reqs = passwordRequirements.value; - return [ - { - id: 'length', - met: reqs.length, - label: t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', { - min: MIN_PASSWORD_LENGTH, - }), - }, - { - id: 'uppercase', - met: reqs.uppercase, - label: t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'), - }, - { - id: 'lowercase', - met: reqs.lowercase, - label: t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'), - }, - { - id: 'number', - met: reqs.number, - label: t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'), - }, - { - id: 'special', - met: reqs.special, - label: t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'), - }, - ]; -}); - const resetCaptcha = () => { if (!globalConfig.value.hCaptchaSiteKey) return; hCaptcha.value.reset(); @@ -299,67 +254,12 @@ const handlePasswordBlur = () => { @focus="handlePasswordFocus" @blur="handlePasswordBlur" /> -
-
- -
-
    -
  • - - - - {{ item.label }} - -
    • -
-
- -
-
+
+import { computed } from 'vue'; +import { useI18n } from 'vue-i18n'; +import Icon from 'dashboard/components-next/icon/Icon.vue'; + +const props = defineProps({ + password: { type: String, default: '' }, + open: { type: Boolean, default: false }, + showError: { type: Boolean, default: false }, + minLength: { type: Number, default: 6 }, +}); + +const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/; + +const { t } = useI18n(); + +const passwordRequirements = computed(() => { + const pwd = props.password || ''; + return { + length: pwd.length >= props.minLength, + uppercase: /[A-Z]/.test(pwd), + lowercase: /[a-z]/.test(pwd), + number: /[0-9]/.test(pwd), + special: SPECIAL_CHAR_REGEX.test(pwd), + }; +}); + +const passwordRequirementItems = computed(() => { + const reqs = passwordRequirements.value; + return [ + { + id: 'length', + met: reqs.length, + label: t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', { + min: props.minLength, + }), + }, + { + id: 'uppercase', + met: reqs.uppercase, + label: t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'), + }, + { + id: 'lowercase', + met: reqs.lowercase, + label: t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'), + }, + { + id: 'number', + met: reqs.number, + label: t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'), + }, + { + id: 'special', + met: reqs.special, + label: t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'), + }, + ]; +}); + + +