feat: Add User and Admin toggle on login pages

PalisadoesFoundation · Jan 5, 2024 · 3440f7b · 3440f7b
1 parent 3819bd8
commit 3440f7b
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 17 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -25,8 +25,9 @@
     "notAuthorised": "Sorry! you are not Authorised!",
     "notFound": "User not found!",
     "successfullyRegistered": "Successfully Registered. Please wait until you will be approved.",
-    "login_to_admin_portal": "Admin Portal Login",
-    "OR": "OR"
+    "OR": "OR",
+    "admin": "ADMIN",
+    "user": "USER"
   },
   "latestEvents": {
     "eventCardTitle": "Upcoming Events",

diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -25,8 +25,9 @@
     "notAuthorised": "Désolé ! vous n'êtes pas autorisé !",
     "notFound": "Utilisateur introuvable !",
     "successfullyRegistered": "Enregistré avec succès. Veuillez patienter jusqu'à ce que vous soyez approuvé.",
-    "login_to_admin_portal": "Connexion à l'administration du portail",
-    "OR": "OU"
+    "OR": "OU",
+    "admin": "ADMIN",
+    "user": "UTILISATEUR"
   },
   "latestEvents": {
     "eventCardTitle": "Événements à venir",

diff --git a/public/locales/hi.json b/public/locales/hi.json
@@ -25,8 +25,9 @@
     "notAuthorised": "क्षमा करें! आप अधिकृत नहीं हैं!",
     "notFound": "उपयोगकर्ता नहीं मिला!",
     "successfullyRegistered": "सफलतापूर्वक पंजीकृत। कृपया स्वीकृत होने तक प्रतीक्षा करें।",
-    "login_to_admin_portal": "एडमिन पोर्टल लॉगिन",
-    "OR": "या"
+    "OR": "या",
+    "admin": "व्यवस्थापक",
+    "user": "उपयोगकर्ता"
   },
   "latestEvents": {
     "eventCardTitle": "आगामी घटनाएँ",

diff --git a/public/locales/sp.json b/public/locales/sp.json
@@ -25,8 +25,9 @@
     "notAuthorised": "¡Lo siento! ¡No estás autorizado!",
     "notFound": "¡Usuario no encontrado!",
     "successfullyRegistered": "Registrado con éxito. Espere hasta que sea aprobado",
-    "login_to_admin_portal": "Inicio de sesión en el portal de administración",
-    "OR": "O"
+    "OR": "O",
+    "admin": "ADMINISTRACIÓN",
+    "user": "USUARIO"
   },
   "latestEvents": {
     "eventCardTitle": "Próximos Eventos",

diff --git a/public/locales/zh.json b/public/locales/zh.json
@@ -25,8 +25,9 @@
     "notAuthorised": "抱歉！你沒有被授權！",
     "notFound": "找不到用戶！",
     "successfullyRegistered": "註冊成功，請等待審核通過。",
-    "login_to_admin_portal": " 管理员门户登录 ",
-    "OR": "或者"
+    "OR": "或者",
+    "admin": "行政",
+    "user": "用戶"
   },
   "latestEvents": {
     "eventCardTitle": "即将举行的活动",

diff --git a/src/components/UserPortal/Login/Login.tsx b/src/components/UserPortal/Login/Login.tsx
@@ -52,10 +52,10 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
           /* istanbul ignore next */
           window.location.assign('/user/organizations');
         } else {
+          /* istanbul ignore next */
           toast.warn(t('notAuthorised'));
         }
       } catch (error: any) {
-        /* istanbul ignore next */
         errorHandler(t, error);
       }
     }
@@ -84,7 +84,6 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
   return (
     <>
       <h3 className="mt-3 font-weight-bold">{t('login')}</h3>
-      <div className="mt-1">{t('loginIntoYourAccount')}</div>
 
       <div className="my-3">
         <h6>{t('emailAddress')}</h6>

diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
@@ -58,6 +58,31 @@
   color: var(--bs-secondary);
 }
 
+.navLinkClass {
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #212529;
+  border-radius: 0.25rem;
+  width: 100%;
+  box-sizing: border-box;
+  font-weight: 500;
+  transition: font-weight 0.3s ease;
+}
+
+.navLinkClass:hover {
+  font-weight: 700;
+}
+
+.activeLink {
+  border-bottom: 3px solid;
+  width: 100%;
+}
+
 @media (max-width: 992px) {
   .row .left_portion {
     padding: 0 2rem;

diff --git a/src/screens/LoginPage/LoginPage.test.tsx b/src/screens/LoginPage/LoginPage.test.tsx
@@ -166,7 +166,7 @@ describe('Testing Login Page Screen', () => {
 
     await wait();
 
-    expect(screen.getByText(/Admin Portal/i)).toBeInTheDocument();
+    expect(screen.getByText(/Admin/i)).toBeInTheDocument();
     expect(window.location).toBeAt('/orglist');
   });
 

diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
@@ -7,7 +7,7 @@ import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { useTranslation } from 'react-i18next';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, NavLink, useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import {
@@ -299,16 +299,37 @@ function loginPage(): JSX.Element {
                   showTab === 'REGISTER' && styles.marginTopForReg
                 }`}
               />
+
+              <Row className="mb-5">
+                <Col>
+                  <NavLink
+                    className={styles.navLinkClass}
+                    activeClassName={styles.activeLink}
+                    exact
+                    to="/"
+                  >
+                    {t('admin')}
+                  </NavLink>
+                </Col>
+                <Col>
+                  <NavLink
+                    className={styles.navLinkClass}
+                    activeClassName={styles.activeLink}
+                    exact
+                    to="/user"
+                  >
+                    {t('user')}
+                  </NavLink>
+                </Col>
+              </Row>
               {/* LOGIN FORM */}
               <div
                 className={`${
                   showTab === 'LOGIN' ? styles.active_tab : 'd-none'
                 }`}
               >
                 <form onSubmit={loginLink}>
-                  <h1 className="fs-2 fw-bold text-dark mb-3">
-                    {t('login_to_admin_portal')}
-                  </h1>
+                  <h1 className="fs-2 fw-bold text-dark mb-3">{t('login')}</h1>
                   <Form.Label>{t('email')}</Form.Label>
                   <div className="position-relative">
                     <Form.Control

diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -2,6 +2,31 @@ body::before {
   content: none !important;
 }
 
+.navLinkClass {
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #212529;
+  border-radius: 0.25rem;
+  width: 100%;
+  box-sizing: border-box;
+  font-weight: 400;
+  transition: font-weight 0.3s ease;
+}
+
+.navLinkClass:hover {
+  font-weight: 700;
+}
+
+.activeLink {
+  border-bottom: 3px solid;
+  width: 100%;
+}
+
 .leftPane {
   align-items: center;
   width: 60%;

diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -17,6 +17,8 @@ import {
   TwitterLogo,
   YoutubeLogo,
 } from 'assets/svgs/social-icons';
+import { NavLink } from 'react-router-dom';
+import { Col, Row } from 'react-bootstrap';
 
 export default function userLoginPage(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
@@ -96,6 +98,28 @@ export default function userLoginPage(): JSX.Element {
           src={TalawaImage}
           alt="Talawa Branding"
         />
+        <Row className="mb-3">
+          <Col>
+            <NavLink
+              className={styles.navLinkClass}
+              activeClassName={styles.activeLink}
+              exact
+              to="/"
+            >
+              {t('admin')}
+            </NavLink>
+          </Col>
+          <Col>
+            <NavLink
+              className={styles.navLinkClass}
+              activeClassName={styles.activeLink}
+              exact
+              to="/user"
+            >
+              {t('user')}
+            </NavLink>
+          </Col>
+        </Row>
         {
           /* istanbul ignore next */
           currentMode === 'login' ? (