Merge pull request #484 from zesu22/bug/variable-image

[REVERT] back button removal from password
mosip · Nov 27, 2023 · c278030 · c278030
2 parents 817ce57 + e835bd1
commit c278030
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 54 deletions.
diff --git a/helm/oidc-ui/values.yaml b/helm/oidc-ui/values.yaml
@@ -431,8 +431,10 @@ oidc_ui:
       DEFAULT_FEVICON: 'favicon.ico'
       DEFAULT_TITLE: 'e-Signet'
       DEFAULT_ID_PROVIDER_NAME: 'e-Signet'
-      REACT_APP_BACKGROUND_LOGO: 'false'
-      REACT_APP_FOOTER: 'true'
+      REACT_APP_BACKGROUND_LOGO: 'true'
+      REACT_APP_FOOTER: 'false'
+      REACT_APP_REMOVE_INDICATOR_PIPE: 'false'
+      REACT_APP_NO_OUTLINE_TOGGLE: 'false'
 
 ## OIDC UI swagger should have only internal access. Hence linked to internal gateway
 ## We create a gateway for esignet specific URL(s) listed under `hosts`

diff --git a/oidc-ui/public/variables.css b/oidc-ui/public/variables.css
@@ -100,7 +100,7 @@
   --info-icon-color: #EB6F2D;
   --toggle-button-inactive-bg-color: #ffffff;
   --toggle-button-inactive-border-color: #d8d8d8;
-  --toggle-button-active-bg-color: #ffffff;
+  --toggle-button-active-bg-color: #FFDECC;
   --toggle-button-active-border-color: #ffffff;
   --toggle-button-inactive-ball-color: #CBCBCB;
   --toggle-button-inactive-ball-border-color: #CBCBCB;

diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css
@@ -106,22 +106,40 @@
   background-color: var(--toggle-button-inactive-ball-color);
 }
 
-.peer:focus ~ .slide-toggle-button {
+.peer:focus ~ .toggle-outline {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--toggle-button-ring-color);
 }
 
 .peer:checked ~ .slide-toggle-button {
   border-color: var(--toggle-button-active-border-color);
-  background-color: var(--toggle-button-active-background-color);
+  background-color: var(--toggle-button-active-bg-color);
 }
 
 .peer:checked ~ .slide-toggle-button::after {
   border-color: var(--toggle-button-active-ball-border-color);
   background-color: var(--toggle-button-active-ball-color);
 }
 
+.toggle-no-outline {
+  height: 0.5rem;
+  width: 2rem;
+}
+
+.toggle-no-outline::after {
+  top: -0.25rem;
+}
+
+.toggle-outline {
+  height: 1.25rem;
+  width: 2.25rem;
+}
+
+.toggle-outline::after {
+  top: 2px;
+}
+
 .footer-brand-logo {
   content: var(--footer-brand-logo-url);
   height: 25px;
@@ -175,13 +193,17 @@
   position: absolute;
   top: 10px;
   left: 10px;
+  height: 226px;
+  width: 226px;
 }
 
 .section-background .bottom_left_bg_logo {
   content: var(--bottom-right-bg-logo-url);
   position: absolute;
   right: 10px;
   bottom: 10px;
+  height: 226px;
+  width: 226px;
 }
 
 .client-logo-size {

diff --git a/oidc-ui/src/components/Consent.js b/oidc-ui/src/components/Consent.js
@@ -45,7 +45,7 @@ export default function Consent({
   const [timeLeft, setTimeLeft] = useState(null);
   const [cancelPopup, setCancelPopup] = useState(false);
 
-  const isOrangeTheme = window._env_.DEFAULT_THEME === "orange_theme";
+  const slideToggleClass = process.env.REACT_APP_NO_OUTLINE_TOGGLE === "true" ? "toggle-no-outline" : "toggle-outline";
 
   const hasAllElement = (mainArray, subArray) =>
     subArray.every((ele) => mainArray.includes(ele));
@@ -338,32 +338,19 @@ export default function Consent({
 
   const sliderButtonDiv = (item, handleOnchange) => (
     <div>
-      {isOrangeTheme ?
-      <label className="relative inline-flex cursor-pointer items-center" labelfor={item}>
-        <input type="checkbox" value="" id={item} className="sr-only peer" onChange={handleOnchange} />
-        <label for="switch-2" className="hidden"></label>
-        <div className="peer h-2 w-8 rounded-full border border-[#FFDECC] after:absolute after:-top-1 after:left-0 after:h-4 after:w-4 after:rounded-full after:border after:border-[#EB6F2D] after:bg-[#EB6F2D] after:transition-all after:content-[''] peer-checked:bg-[#FFDECC] peer-checked:after:translate-x-full"></div>
-      </label>
-      :
       <label
-      labelfor={item}
-      className="inline-flex relative items-center mb-1 mt-1 cursor-pointer"
-    >
-      <input
-        type="checkbox"
-        value=""
-        id={item}
-        className="sr-only peer"
-        onChange={handleOnchange}
-      />
-      <div
-        className="w-9 h-5 after:h-4 after:w-4 border rounded-full peer after:content-['']
-        after:absolute after:top-[2px] after:border after:rounded-full after:transition-all
-        ltr:peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full
-        ltr:after:left-[2px] rtl:after:right-[2px] slide-toggle-button"
-      ></div>
+        labelfor={item}
+        className="inline-flex relative items-center mb-1 mt-1 cursor-pointer"
+      >
+        <input
+          type="checkbox"
+          value=""
+          id={item}
+          className="sr-only peer"
+          onChange={handleOnchange}
+        />
+        <div className={"peer ltr:peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full border after:border after:h-4 after:w-4 rounded-full after:rounded-full after:transition-all after:content-[''] after:absolute ltr:after:left-[2px] rtl:after:right-[2px] slide-toggle-button "+slideToggleClass}></div>
       </label>
-      }
     </div>
   );
 

diff --git a/oidc-ui/src/components/NavHeader.js b/oidc-ui/src/components/NavHeader.js
@@ -12,14 +12,14 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "header" }) {
     i18n.changeLanguage(e.value);
   };
 
-  const isOrangeTheme = window._env_.DEFAULT_THEME === "orange_theme";
+  const removeIndicatorPipe = process.env.REACT_APP_REMOVE_INDICATOR_PIPE === "true";
 
   const customStyles = {
       control: (base) => ({
         ...base,
         border: 0,
       }),
-      ...(isOrangeTheme && {
+      ...(removeIndicatorPipe && {
         valueContainer: (base) => ({
           ...base,
           padding: 0,

diff --git a/oidc-ui/src/components/Password.js b/oidc-ui/src/components/Password.js
@@ -48,8 +48,6 @@ export default function Password({
 
   const passwordRegex = new RegExp(passwordRegexValue);
 
-  const isOrangeTheme = window._env_.DEFAULT_THEME === "orange_theme";
-
   const navigate = useNavigate();
 
   const handleChange = (e) => {
@@ -178,27 +176,25 @@ export default function Password({
 
   return (
     <>
-      {!isOrangeTheme && (
-        <div className="grid grid-cols-8 items-center">
-          <div className="h-6 items-center text-center flex items-start">
-            <button
-              onClick={() => handleBackButtonClick()}
-              className="text-sky-600 text-2xl font-semibold justify-left rtl:rotate-180"
-            >
-              &#8592;
-            </button>
-          </div>
-          <div className="h-6 flex justify-center col-start-2 col-span-6 h-fit">
-            <h1
-              className="text-center text-sky-600 font-semibold line-clamp-2"
-              title={t("sign_in_with_password")}
-            >
-              {t("sign_in_with_password")}
-            </h1>
-          </div>
+      <div className="grid grid-cols-8 items-center">
+        <div className="h-6 items-center text-center flex items-start">
+          <button
+            onClick={() => handleBackButtonClick()}
+            className="text-sky-600 text-2xl font-semibold justify-left rtl:rotate-180"
+          >
+            &#8592;
+          </button>
         </div>
-      )}
-
+        <div className="h-6 flex justify-center col-start-2 col-span-6 h-fit">
+          <h1
+            className="text-center text-sky-600 font-semibold line-clamp-2"
+            title={t("sign_in_with_password")}
+          >
+            {t("sign_in_with_password")}
+          </h1>
+        </div>
+      </div>
+
       <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
         {fields.map((field) => (
           <div className="-space-y-px">