From 2adfa6db2600c200348aa829876a7893940dd7bf Mon Sep 17 00:00:00 2001
From: HichamELBSI <elabbassih@gmail.com>
Date: Thu, 12 Aug 2021 13:43:56 +0200
Subject: [PATCH] Fix PR feedback

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
---
 .../admin/src/layouts/UnauthenticatedLayout.js   |  2 +-
 .../pages/AuthPage/components/Login/BaseLogin.js | 16 +++++++++++-----
 .../src/pages/AuthPage/components/Login/Form.js  |  7 +++++++
 .../src/pages/AuthPage/components/Logo/Img.js    |  7 -------
 .../src/pages/AuthPage/components/Logo/index.js  |  7 ++++++-
 .../core/admin/admin/src/pages/AuthPage/index.js |  1 +
 6 files changed, 26 insertions(+), 14 deletions(-)
 delete mode 100644 packages/core/admin/admin/src/pages/AuthPage/components/Logo/Img.js

diff --git a/packages/core/admin/admin/src/layouts/UnauthenticatedLayout.js b/packages/core/admin/admin/src/layouts/UnauthenticatedLayout.js
index d4f53b4c0a..6d99c91460 100644
--- a/packages/core/admin/admin/src/layouts/UnauthenticatedLayout.js
+++ b/packages/core/admin/admin/src/layouts/UnauthenticatedLayout.js
@@ -16,7 +16,7 @@ export const Column = styled(Row)`
 const UnauthenticatedLayout = ({ children }) => {
   return (
     <div>
-      <Row justifyContent="flex-end">
+      <Row as="header" justifyContent="flex-end">
         <Box paddingTop={6} paddingRight={8}>
           <LocaleToggle isLogged />
         </Box>
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 1c569edd27..6e65046efb 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
@@ -18,8 +18,8 @@ import { useIntl } from 'react-intl';
 import { Formik } from 'formik';
 
 import { Column } from '../../../../layouts/UnauthenticatedLayout';
-import { useConfigurations } from '../../../../hooks';
 import Form from './Form';
+import Logo from '../Logo';
 
 const AuthButton = styled(Button)`
   display: inline-block;
@@ -37,7 +37,6 @@ const FieldActionWrapper = styled(FieldAction)`
 
 const Login = ({ onSubmit, schema }) => {
   const [passwordShown, setPasswordShown] = useState(false);
-  const { authLogo } = useConfigurations();
   const { formatMessage } = useIntl();
 
   return (
@@ -55,7 +54,7 @@ const Login = ({ onSubmit, schema }) => {
         {({ values, errors, handleChange }) => (
           <Form noValidate>
             <Column>
-              <img src={authLogo} alt="" aria-hidden style={{ height: '72px' }} />
+              <Logo />
               <Box paddingTop="6" paddingBottom="1">
                 <H1 id="welcome">{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
               </Box>
@@ -64,7 +63,11 @@ const Login = ({ onSubmit, schema }) => {
                   {formatMessage({ id: 'Auth.form.welcome.subtitle' })}
                 </Subtitle>
               </Box>
-              {errors.errorMessage && <Text textColor="danger600">{errors.errorMessage}</Text>}
+              {errors.errorMessage && (
+                <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                  {errors.errorMessage}
+                </Text>
+              )}
             </Column>
 
             <Stack size={6}>
@@ -87,7 +90,10 @@ const Login = ({ onSubmit, schema }) => {
                 endAction={
                   // eslint-disable-next-line react/jsx-wrap-multilines
                   <FieldActionWrapper
-                    onClick={() => setPasswordShown(prev => !prev)}
+                    onClick={e => {
+                      e.stopPropagation();
+                      setPasswordShown(prev => !prev);
+                    }}
                     label={formatMessage({
                       id: passwordShown
                         ? 'Auth.form.password.show-password'
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js
index 97fa4fc2ac..ee273000cb 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js
@@ -28,6 +28,13 @@ const FormWithFocus = props => {
         errorEl.focus();
       }
     }
+    if (!isSubmitting && !isValidating && Object.keys(errors).length) {
+      const el = document.getElementById('global-form-error');
+
+      if (el) {
+        el.focus();
+      }
+    }
   }, [errors, isSubmitting, isValidating, touched]);
 
   return <Form {...props} noValidate />;
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Logo/Img.js b/packages/core/admin/admin/src/pages/AuthPage/components/Logo/Img.js
deleted file mode 100644
index 036367f1b3..0000000000
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Logo/Img.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const Img = styled.img`
-  height: 36px;
-`;
-
-export { Img };
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Logo/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/Logo/index.js
index dcd198cde9..ca2f2edb37 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Logo/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Logo/index.js
@@ -1,10 +1,15 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useConfigurations } from '../../../../hooks';
 
+const Img = styled.img`
+  height: 72px;
+`;
+
 const Logo = () => {
   const { authLogo } = useConfigurations();
 
-  return <img src={authLogo} alt="strapi" style={{ height: '72px' }} />;
+  return <Img src={authLogo} aria-hidden alt="" />;
 };
 
 export default Logo;
diff --git a/packages/core/admin/admin/src/pages/AuthPage/index.js b/packages/core/admin/admin/src/pages/AuthPage/index.js
index 59500df575..d368e1d48f 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/index.js
@@ -91,6 +91,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   };
 
   const handleSubmit = async (e, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
     const body = omit(e, fieldsToOmit);
     const requestURL = `/admin/${endPoint}`;