From c79afa3f443fb7c72467568e608a2dde0c8fb2ed Mon Sep 17 00:00:00 2001
From: HichamELBSI <elabbassih@gmail.com>
Date: Fri, 6 Aug 2021 17:59:43 +0200
Subject: [PATCH] Fix design feedback

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
---
 .../AuthPage/components/Login/BaseLogin.js    | 44 +++++++++++++++++--
 .../core/admin/admin/src/translations/en.json |  4 +-
 .../lib/src/testUtils/commonTrads.json        |  2 +-
 test/config/front/testUtils/commonTrads.json  |  2 +-
 4 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
index a6b4d59641..f186dffce5 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
@@ -1,5 +1,17 @@
-import React from 'react';
-import { Box, Stack, H1, Text, Subtitle, Button, Checkbox, TextInput, Main } from '@strapi/parts';
+import React, { useState } from 'react';
+import { Show, Hide } from '@strapi/icons';
+import {
+  Box,
+  Stack,
+  H1,
+  Text,
+  Subtitle,
+  Button,
+  Checkbox,
+  TextInput,
+  Main,
+  FieldAction,
+} from '@strapi/parts';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
@@ -13,8 +25,18 @@ const AuthButton = styled(Button)`
   display: inline-block;
   width: 100%;
 `;
+const FieldActionWrapper = styled(FieldAction)`
+  svg {
+    height: 16px;
+    width: 16px;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
 
 const Login = ({ onSubmit, schema }) => {
+  const [passwordShown, setPasswordShown] = useState(false);
   const { authLogo } = useConfigurations();
   const { formatMessage } = useIntl();
 
@@ -61,7 +83,23 @@ const Login = ({ onSubmit, schema }) => {
                 value={values.password}
                 label={formatMessage({ id: 'Auth.form.password.label' })}
                 name="password"
-                type="password"
+                type={passwordShown ? 'text' : 'password'}
+                endAction={
+                  // eslint-disable-next-line react/jsx-wrap-multilines
+                  <FieldActionWrapper
+                    onClick={e => {
+                      e.preventDefault();
+                      setPasswordShown(prev => !prev);
+                    }}
+                    label={formatMessage({
+                      id: passwordShown
+                        ? 'Auth.form.password.show-password'
+                        : 'Auth.form.password.hide-password',
+                    })}
+                  >
+                    {passwordShown ? <Show /> : <Hide />}
+                  </FieldActionWrapper>
+                }
                 required
               />
               <Checkbox
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 05d76dbe62..030477126d 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@@ -34,6 +34,8 @@
   "Auth.form.lastname.label": "Last name",
   "Auth.form.lastname.placeholder": "Doe",
   "Auth.form.password.label": "Password",
+  "Auth.form.password.show-password": "Show password",
+  "Auth.form.password.hide-password": "Hide password",
   "Auth.form.register.news.label": "Keep me updated about the new features and upcoming improvements (by doing this you accept the {terms} and the {policy}).",
   "Auth.form.rememberMe.label": "Remember me",
   "Auth.form.username.label": "Username",
@@ -319,7 +321,7 @@
   "components.Input.error.contentTypeName.taken": "This name already exists",
   "components.Input.error.custom-error": "{errorMessage} ",
   "components.Input.error.password.noMatch": "Passwords do not match",
-  "components.Input.error.validation.email": "This is not an email",
+  "components.Input.error.validation.email": "This is an invalid email",
   "components.Input.error.validation.json": "This doesn't match the JSON format",
   "components.Input.error.validation.max": "The value is too high.",
   "components.Input.error.validation.maxLength": "The value is too long.",
diff --git a/packages/core/helper-plugin/lib/src/testUtils/commonTrads.json b/packages/core/helper-plugin/lib/src/testUtils/commonTrads.json
index 36eb78d19e..300edca348 100644
--- a/packages/core/helper-plugin/lib/src/testUtils/commonTrads.json
+++ b/packages/core/helper-plugin/lib/src/testUtils/commonTrads.json
@@ -109,7 +109,7 @@
   "components.Input.error.attribute.taken": "This field name already exists",
   "components.Input.error.contentTypeName.taken": "This name already exists",
   "components.Input.error.custom-error": "{errorMessage} ",
-  "components.Input.error.validation.email": "This is not an email",
+  "components.Input.error.validation.email": "This is an invalid email",
   "components.Input.error.validation.json": "This doesn't match the JSON format",
   "components.Input.error.validation.max": "The value is too high.",
   "components.Input.error.validation.maxLength": "The value is too long.",
diff --git a/test/config/front/testUtils/commonTrads.json b/test/config/front/testUtils/commonTrads.json
index e4aa37751b..0569a5827e 100644
--- a/test/config/front/testUtils/commonTrads.json
+++ b/test/config/front/testUtils/commonTrads.json
@@ -109,7 +109,7 @@
   "components.Input.error.attribute.taken": "This field name already exists",
   "components.Input.error.contentTypeName.taken": "This name already exists",
   "components.Input.error.custom-error": "{errorMessage} ",
-  "components.Input.error.validation.email": "This is not an email",
+  "components.Input.error.validation.email": "This is an invalid email",
   "components.Input.error.validation.json": "This doesn't match the JSON format",
   "components.Input.error.validation.max": "The value is too high.",
   "components.Input.error.validation.maxLength": "The value is too long.",