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 = () => {