Merge pull request #11 from UNICEFECAR/feature/issue_62

Issue #62 - Indistinguishable interfaces (Client and Provider web interfaces)

src/blocks/ForgotPassword/ForgotPassword.jsx

@@ -13,6 +13,7 @@ import { validate } from "@USupport-components-library/utils";
 import { adminSvc } from "@USupport-components-library/services";
 import { useError } from "#hooks";
 import Joi from "joi";
+import { logoVerticalSvg } from "@USupport-components-library/assets";
 
 import "./forgot-password.scss";
 
@@ -56,6 +57,19 @@ export const ForgotPassword = () => {
   return (
     <Block classes="forgot-password">
       <Grid md={8} lg={12} classes="forgot-password__grid">
+        <GridItem md={8} lg={12} classes="login__grid__inputs-item">
+          <div className="login__grid__logo-item">
+            <h2 className="welcome__grid__logo-item__heading">
+              {t("heading")}
+            </h2>
+            <img
+              src={logoVerticalSvg}
+              alt="Logo"
+              className="welcome__grid__logo-item__logo"
+            />
+            <h2 className="welcome__grid__logo-item__heading">{t("admin")}</h2>
+          </div>
+        </GridItem>
         <GridItem md={8} lg={12} classes="forgot-password__grid__content-item">
           <div className="forgot-password__grid__content-item__main-container">
             <Input
@@ -77,6 +91,11 @@ export const ForgotPassword = () => {
             />
           </div>
         </GridItem>
+        <GridItem
+          md={8}
+          lg={12}
+          classes="forgot-password__grid__content-item"
+        ></GridItem>
       </Grid>
       <Modal
         isOpen={isModalOpen}

src/blocks/ForgotPassword/forgot-password.scss

@@ -9,9 +9,12 @@
   }
 
   &__grid {
-    height: 100%;
-    justify-items: center;
+    place-items: center;
+    margin-top: $spacing_5_0;
 
+    &__logo-item {
+      margin-bottom: $spacing_2_0;
+    }
     &__content-item {
       display: flex;
       flex: 1;

src/blocks/ForgotPassword/locales/en.json

@@ -4,5 +4,7 @@
   "reset_password_button_label": "Reset password",
   "register_redirect_button_label": "I don’t have an account",
   "modal_heading": "Check your email",
-  "modal_text": "If you are registered in the platform you will receive a link to reset your password."
+  "modal_text": "If you are registered in the platform you will receive a link to reset your password.",
+  "heading": "Welcome to",
+  "admin": "Country admin"
 }

src/blocks/ForgotPassword/locales/kk.json

@@ -4,5 +4,7 @@
   "reset_password_button_label": "Құпия сөзді ауыстыру",
   "register_redirect_button_label": "Менде аккаунт жоқ",
   "modal_heading": "Электронды поштаңызды тексеріңіз",
-  "modal_text": "Егер Сіз платформада тіркелген болсаңыз, құпия сөзді қалпына келтіруге сілтеме аласыз."
+  "modal_text": "Егер Сіз платформада тіркелген болсаңыз, құпия сөзді қалпына келтіруге сілтеме аласыз.",
+  "heading": "Қош келдіңіз, бұл - ",
+  "admin": "Ел әкімшілері"
 }

src/blocks/ForgotPassword/locales/ru.json

@@ -4,5 +4,7 @@
   "reset_password_button_label": "Сброс пароля",
   "register_redirect_button_label": "У меня нет аккаунта",
   "modal_heading": "Проверьте свою электронную почту",
-  "modal_text": "Если Вы зарегистрированы на платформе, Вы получите ссылку для сброса пароля."
+  "modal_text": "Если Вы зарегистрированы на платформе, Вы получите ссылку для сброса пароля.",
+  "heading": "Добро пожаловать в",
+  "admin": "Администраторы страны"
 }

src/blocks/Login/Login.jsx

@@ -10,6 +10,7 @@ import {
   InputPassword,
   Button,
 } from "@USupport-components-library/src";
+import { logoVerticalSvg } from "@USupport-components-library/assets";
 
 import "./login.scss";
 
@@ -32,13 +33,26 @@ export const Login = ({ data, setData, handleLogin, errors, isLoading }) => {
     setData(newData);
   };
 
-  const handleForgotPassowrd = () => {
+  const handleForgotPassword = () => {
     navigate("/forgot-password");
   };
 
   return (
     <Block classes="login">
       <Grid md={8} lg={12} classes="login__grid">
+        <GridItem md={8} lg={12} classes="login__grid__inputs-item">
+          <div className="login__grid__logo">
+            <h2 className="welcome__grid__logo-item__heading">
+              {t("heading")}
+            </h2>
+            <img
+              src={logoVerticalSvg}
+              alt="Logo"
+              className="welcome__grid__logo-item__logo"
+            />
+            <h2 className="welcome__grid__logo-item__heading">{t("admin")}</h2>
+          </div>
+        </GridItem>
         <GridItem md={8} lg={12} classes="login__grid__inputs-item">
           <form onSubmit={handleLogin}>
             <Input
@@ -63,7 +77,7 @@ export const Login = ({ data, setData, handleLogin, errors, isLoading }) => {
               color="purple"
               classes="login__grid__forgot-password"
               label={t("forgot_password_label")}
-              onClick={() => handleForgotPassowrd()}
+              onClick={() => handleForgotPassword()}
             />
             {errors.submit ? <Error message={errors.submit} /> : null}
             <Button

src/blocks/Login/locales/en.json

@@ -6,5 +6,7 @@
   "forgot_password_label": "I forgot my password",
   "login_label": "Login",
   "try_again": "Try again in",
-  "seconds": "seconds"
+  "seconds": "seconds",
+  "heading": "Welcome to",
+  "admin": "Country admin"
 }

src/blocks/Login/locales/kk.json

@@ -6,5 +6,7 @@
   "forgot_password_label": "Мен құпия сөзімді ұмытып қалдым",
   "login_label": "Кіру",
   "try_again": "Әрекетті қайталаңыз",
-  "seconds": "секундта"
+  "seconds": "секундта",
+  "heading": "Қош келдіңіз, бұл - ",
+  "admin": "Ел әкімшілері"
 }

src/blocks/Login/locales/ru.json

@@ -6,5 +6,7 @@
   "forgot_password_label": "Я забыл(-а) свой пароль",
   "login_label": "Авторизация",
   "try_again": "Повторите попытку через",
-  "seconds": "секунд"
+  "seconds": "секунд",
+  "heading": "Добро пожаловать в",
+  "admin": "Администраторы страны"
 }

src/blocks/Login/login.scss

@@ -8,9 +8,14 @@
   }
 
   &__grid {
-    min-height: 90vh;
     place-items: center;
     text-align: left;
+    margin-top: $spacing_5_0;
+
+    &__logo {
+      text-align: center;
+      margin-bottom: $spacing_2_0;
+    }
 
     &__inputs-item {
       &__input--password {

src/blocks/Page/Page.jsx

@@ -213,7 +213,7 @@ export const Page = ({
                 />
               )}
               {image && <img className="page__header__image" src={image} />}
-              {heading && <h2 className="page__header-heading">{heading}</h2>}
+              {heading && <h3 className="page__header-heading">{heading}</h3>}
               {headingButton && (width >= 768 || showHeadingButtonInline) && (
                 <div className="page__header-button-container">
                   {headingButton}

src/blocks/Welcome/Welcome.jsx

@@ -105,6 +105,7 @@ export const Welcome = () => {
             alt="Logo"
             className="welcome__grid__logo-item__logo"
           />
+          <h2 className="welcome__grid__logo-item__heading">{t("admin")}</h2>
         </GridItem>
         <GridItem md={8} lg={12} classes="welcome__grid__content-item">
           {!(countriesQuery.isLoading || languagesQuery.isLoading) ? (

src/blocks/Welcome/locales/en.json

@@ -3,5 +3,6 @@
   "country": "Country",
   "language": "Language",
   "placeholder": "Select",
-  "button": "Continue"
+  "button": "Continue",
+  "admin": "Country admin"
 }

src/blocks/Welcome/locales/kk.json

@@ -3,5 +3,6 @@
   "country": "Ел",
   "language": "Тіл",
   "placeholder": "Таңдау",
-  "button": "Жалғастыру"
+  "button": "Жалғастыру",
+  "admin": "Ел әкімшілері"
 }

src/blocks/Welcome/locales/ru.json

@@ -3,5 +3,6 @@
   "country": "Страна",
   "language": "Язык",
   "placeholder": "Выбрать",
-  "button": "Продолжить"
+  "button": "Продолжить",
+  "admin": "Администраторы страны"
 }