O3-1294:User should be able to navigate back to username screen (#449)

* O3-1294:User should be able to navigate back to username screen * O3-1294:User should be able to navigate back to username screen * O3-1294:User should be able to navigate back to username screen * fixed the styles for the back button Co-authored-by: jwnasambu <julietwamalwa@yahoo.com>
openmrs · Jun 7, 2022 · dca9f42 · dca9f42
1 parent f190b3d
commit dca9f42
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/packages/apps/esm-login-app/src/login/login.component.tsx b/packages/apps/esm-login-app/src/login/login.component.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import styles from "../styles.scss";
 import ArrowRight24 from "@carbon/icons-react/es/arrow--right/24";
+import ArrowLeft16 from "@carbon/icons-react/es/arrow--left/16";
 import {
   Button,
   InlineNotification,
@@ -148,6 +149,19 @@ const Login: React.FC<LoginProps> = ({ history, location, isLoginEnabled }) => {
             onClick={() => setErrorMessage("")}
           />
         )}
+        {showPassword ? (
+          <div style={{ width: "23rem" }}>
+            <Button
+              className={styles["back-button"]}
+              kind="ghost"
+              iconDescription="Back to username"
+              onClick={() => history.push("/login")}
+            >
+              <ArrowLeft16 style={{ marginRight: "1rem" }} />
+              Back
+            </Button>
+          </div>
+        ) : null}
         <Tile className={styles["login-card"]}>
           <div className={styles["center"]}>{logo}</div>
           <form onSubmit={handleSubmit} ref={formRef}>

diff --git a/packages/apps/esm-login-app/src/styles.scss b/packages/apps/esm-login-app/src/styles.scss
@@ -115,6 +115,14 @@
   width: 18rem;
 }
 
+.back-button {
+  height: 3rem;
+
+  svg {
+    margin-right: 0.5rem;
+  } 
+}
+
 .inputStyle {
   @extend .label01;
   width: 18rem;

diff --git a/packages/apps/esm-login-app/translations/en.json b/packages/apps/esm-login-app/translations/en.json
@@ -1,4 +1,5 @@
 {
+  "back": "back",
   "change": "Change",
   "confirm": "Confirm",
   "contactAdmin": "Contact the site administrator",