Fix design feedback

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

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

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.",

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.",

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.",