Refactor login with js-api-client

src/components/SideMenu/SideMenu.js

@@ -8,16 +8,13 @@ import {useTranslation} from "react-i18next";
 import ReactTooltip from "react-tooltip";
 import {setLogoutInitiate} from "../../store/actions";
 import {toast} from "react-hot-toast";
-import {logOut} from "../../main/Mobile/Pages/Login/api/auth";
+import {logout} from "js-api-client";
 import {images} from "../../assets/images";
 import i18n from "i18next";
 import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
 import *  as Routes from "../../main/Mobile/Routes/routes";
 import {toAbsoluteUrl} from "../../utils/utils";
 import packageJson from "../../../package.json"
-import {Overview} from "../../main/Mobile/Routes/routes";
-
-
 
 
 const SideMenu = () => {
@@ -37,7 +34,7 @@ const SideMenu = () => {
     });
 
     const logOutHandler = async () => {
-        logOut().then(()=>{
+        logout().then(()=>{
             toast.success(t("header.logOutSuccess"))
             dispatch(setLogoutInitiate())
         }).catch(()=>{

src/main/Mobile/Pages/Login/Login.js

@@ -25,22 +25,13 @@ const Login = () => {
     ];
 
     return (
-        <div className={`width-100 column col-100 ai-center jc-center px-1 ${classes.container} move-image`}
-             style={{backgroundImage: `url("${images.spaceStar}")`}}>
-           {/* <div className={`col-40 column ai-center jc-center ${classes.intro} move-image width-100`}>
-                <div className={`column jc-center ai-center ${classes.bgicon}`}>
-                    <img src={images.astronaut} alt="logo" className={`floating mb-2`}/>
-                    <h2 className="mt-2">
-                        {t('login.description')}
-                    </h2>
-                </div>
-            </div>*/}
-            <div className={`col-100 flex jc-center ai-center width-100`} style={{height: "100%"}}>
-                <div className={`${classes.content}`}>
-                    <AccordionBox title={t('login.title')} content={data}/>
-                </div>
+        <div className={`width-100 flex  ai-center jc-center px-1 ${classes.container} move-image`} style={{backgroundImage: `url("${images.spaceStar}")`}}>
+
+            <div className={`${classes.content}`}>
+                <AccordionBox title={t('login.title')} content={data}/>
             </div>
 
+
         </div>
     );
 };

src/main/Mobile/Pages/Login/Login.module.css

@@ -3,30 +3,12 @@
     background-repeat: repeat;
     background-position: center center;
     background-size: 600px 1200px;
-    /*background-color: var(--mainContent);*/
     background-color: var(--container);
     color: var(--textColor);
 }
-.row {
-    height: 100vh;
-}
-.intro {
-    height: 100vh;
-    background-repeat: no-repeat repeat;
-    background-position: center center;
-    background-size: 600px 1200px;
-}
-.intro img {
-    width: 45vw;
-}
-.intro h1 {
-    line-height: 4.5vh;
-    text-align: center;
-    /*color: #f2f2f2;*/
-}
+
 .content {
-    width: 80%;
-    /*height: 65%;*/
+    width: 90%;
     background-color: var(--cardBodyAlpha);
     border-radius: 9px;
     color: var(--textColor);
@@ -35,52 +17,49 @@
 
 .content :global(.accordion-header) > div{
     justify-content: center;
+    margin-top: 1.5vh;
 }
 .content :global(.accordion-header){
-    /*background-color: #242633fa;*/
     background-color: var(--cardHeaderAlpha);
-    /*color: #ecececc7;*/
 }
-/*.content :global(.accordion-body){
-  background-color: rgba(206, 223, 255, 0.83);
-}*/
+
 .forgetPasswordInput{
     width: 75%;
 }
 
 .loginInput {
-    width: 85%;
-    margin-bottom: 1vh;
+    width: 93%;
+    margin-bottom: 2vh;
 }
 .loginInput > div{
     border-color: var(--cardHeader);
 
 }
 .loginInput :global(.lead){
-    /*background-color: #242633fa;
-    border-color: #242633fa;
-    color: #ecececc7;*/
     background-color: var(--cardHeader);
     border-color: var(--cardHeader);
     color: var(--textColor);
+    width: 40%;
 }
-.loginInput.captcha :global(.lead){
-    width: 50%;
-
+.loginInput :global(input){
+    width: 60% !important;
 }
-.loginInput.captcha :global(.lead) span{
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    /*background-size: cover;*/
 
+
+
+
+
+.loginInput.captcha :global(.lead){
+    width: 40%;
 }
+
 .loginInput.captcha :global(input){
-    width: 40%;
+    width: 43% !important;
 }
+
+
 .loginInput.captcha :global(.after){
-    width: 10%;
+    width: 17%;
 }
 
 .thisLoading{
@@ -139,10 +118,41 @@
     background-color: var(--red);
 }
 
+.disable:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardHeader);
+    background: var(--cardHeader);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardHeader);
+    background: var(--cardHeader);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+
+
+
+
+.loginInput.passwordInput :global(.before){
+    width: 40% !important;
+}
+
+.loginInput.passwordInput :global(input){
+    width: 43% !important;
+}
+.loginInput.passwordInput :global(.after){
+    width: 17% !important;
+}
+
+
 .ltrInput :global(input) {
     direction: ltr !important;
 }
 
+
 .twinkle{
     -webkit-animation: twinkle 4s linear infinite;
     -moz-animation: twinkle 4s linear infinite;