diff --git a/public/icons/eye-off.svg b/public/icons/eye-off.svg new file mode 100644 index 00000000..249ea878 --- /dev/null +++ b/public/icons/eye-off.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 42365efb..6ccff815 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -46,6 +46,9 @@ "Create Chat": "Create Chat", "Create Group": "Create a group", "Create account": "Create an account", + "Password should be at least 8 characters": "Password should be at least 8 characters", + "Password should contain at least one number": "Password should contain at least one number", + "Password should contain at least one special character: !@#$%^&*": "Password should contain at least one special character: !@#$%^&*", "Create post": "Create post", "Date of Birth": "Date of Birth", "Delete": "Delete", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 45e46b74..6d2cb90b 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -48,6 +48,9 @@ "Create Chat": "Создать чат", "Create Group": "Создать группу", "Create account": "Создать аккаунт", + "Password should be at least 8 characters": "Пароль должен быть не менее 8 символов", + "Password should contain at least one number": "Пароль должен содержать хотя бы одну цифру", + "Password should contain at least one special character: !@#$%^&*": "Пароль должен содержать хотя бы один специальный символ: !@#$%^&*", "Create post": "Создать публикацию", "Date of Birth": "Дата рождения", "Delete": "Удалить", diff --git a/src/components/Nav/AuthModal/AuthModal.module.scss b/src/components/Nav/AuthModal/AuthModal.module.scss index e5041eda..ec60e3da 100644 --- a/src/components/Nav/AuthModal/AuthModal.module.scss +++ b/src/components/Nav/AuthModal/AuthModal.module.scss @@ -113,6 +113,7 @@ font-weight: 700; padding: 1.6rem !important; width: 100%; + margin-top: 32px; } .authControl { @@ -148,6 +149,10 @@ line-height: 16px; margin-bottom: 8px; + &.registerPassword { + margin-bottom: -32px; + } + /* Red/500 */ color: #d00820; @@ -162,6 +167,26 @@ } } +.passwordToggle { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; +} + +.passwordToggleIcon { + height: 1.6em; + display: inline-block; + margin-right: 0.2em; + max-width: 1.4em; + max-height: 1.4em; + transition: filter 0.2s; + vertical-align: middle; +} + .title { font-size: 26px; line-height: 32px; diff --git a/src/components/Nav/AuthModal/LoginForm.tsx b/src/components/Nav/AuthModal/LoginForm.tsx index fef6cb4c..079917c9 100644 --- a/src/components/Nav/AuthModal/LoginForm.tsx +++ b/src/components/Nav/AuthModal/LoginForm.tsx @@ -13,6 +13,7 @@ import { signSendLink } from '../../../stores/auth' import { useSnackbar } from '../../../context/snackbar' import { useLocalize } from '../../../context/localize' +import { Icon } from '../../_shared/Icon' type FormFields = { email: string @@ -30,6 +31,7 @@ export const LoginForm = () => { // TODO: better solution for interactive error messages const [isEmailNotConfirmed, setIsEmailNotConfirmed] = createSignal(false) const [isLinkSent, setIsLinkSent] = createSignal(false) + const [showPassword, setShowPassword] = createSignal(false) const { actions: { showSnackbar } @@ -143,17 +145,26 @@ export const LoginForm = () => {
{validationErrors().email}
+
handlePasswordInput(event.currentTarget.value)} /> +
+
{validationErrors().password}
diff --git a/src/components/Nav/AuthModal/RegisterForm.tsx b/src/components/Nav/AuthModal/RegisterForm.tsx index 76fc4425..618befea 100644 --- a/src/components/Nav/AuthModal/RegisterForm.tsx +++ b/src/components/Nav/AuthModal/RegisterForm.tsx @@ -44,8 +44,30 @@ export const RegisterForm = () => { } } + function isValidPassword(password) { + const minLength = 8 + const hasNumber = /\d/ + const hasSpecial = /[!@#$%^&*]/ + + if (password.length < minLength) { + return t('Password should be at least 8 characters') + } + if (!hasNumber.test(password)) { + return t('Password should contain at least one number') + } + if (!hasSpecial.test(password)) { + return t('Password should contain at least one special character: !@#$%^&*') + } + return null + } + const handlePasswordInput = (newPassword: string) => { - setValidationErrors(({ password: _notNeeded, ...rest }) => rest) + const passwordError = isValidPassword(newPassword) + if (passwordError) { + setValidationErrors((errors) => ({ ...errors, password: passwordError })) + } else { + setValidationErrors(({ password: _notNeeded, ...rest }) => rest) + } setPassword(newPassword) } @@ -176,7 +198,9 @@ export const RegisterForm = () => { -
{validationErrors().password}
+
+ {validationErrors().password} +