refactor: login buttons

src/common/component/Setting/config/SMTP.js

@@ -120,6 +120,7 @@ export default function ConfigSMTP() {
         <div className="input">
           <Label htmlFor="desc">Password</Label>
           <Input
+            type={"password"}
             disabled={!enabled}
             data-type="password"
             onChange={handleChange}

src/common/component/styled/Input.js

@@ -1,4 +1,17 @@
+import { useState } from "react";
+import { HiEye, HiEyeOff } from "react-icons/hi";
 import styled from "styled-components";
+const StyledWrapper = styled.div`
+  width: 100%;
+  position: relative;
+  .view {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+`;
 const StyledInput = styled.input`
   width: 100%;
   background: #ffffff;
@@ -10,6 +23,12 @@ const StyledInput = styled.input`
   line-height: 20px;
   color: #333;
   padding: 8px;
+  &.large {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 10px 14px;
+  }
   &.none {
     outline: none;
     border: none;
@@ -23,6 +42,30 @@ const StyledInput = styled.input`
   &::placeholder {
     color: #78787c;
   }
+  &[type="password"] {
+    padding-right: 30px;
+  }
 `;
 
-export default StyledInput;
+export default function Input({ type = "text", ...rest }) {
+  const [inputType, setInputType] = useState(type);
+  const togglePasswordVisible = () => {
+    setInputType((prev) => (prev == "password" ? "text" : "password"));
+  };
+  return type == "password" ? (
+    <StyledWrapper>
+      <StyledInput type={inputType} {...rest} />
+      <div className="view" onClick={togglePasswordVisible}>
+        {inputType == "password" ? (
+          <HiEyeOff color="#78787c" />
+        ) : (
+          <HiEye color="#78787c" />
+        )}
+      </div>
+    </StyledWrapper>
+  ) : (
+    <StyledInput type={inputType} {...rest} />
+  );
+}
+
+// export default StyledInput;

src/routes/login/GoogleLoginButton.js

@@ -2,9 +2,12 @@
 import { useGoogleLogin } from "react-google-login";
 import { googleClientID } from "../../app/config";
 import googleSvg from "../../assets/icons/google.svg?url";
-
+import { StyledSocialButton } from "./styled";
 export default function GoogleLoginButton({ login }) {
   const { signIn, loaded } = useGoogleLogin({
+    onScriptLoadFailure: (wtf) => {
+      console.log("google login script load failure", wtf);
+    },
     clientId: googleClientID,
     onSuccess: ({ tokenId, ...rest }) => {
       console.log("success", tokenId, rest);
@@ -14,21 +17,17 @@ export default function GoogleLoginButton({ login }) {
       });
     },
     onFailure: (wtf) => {
-      console.log("failure", wtf);
+      console.log("google login  failure", wtf);
     },
   });
   const handleGoogleLogin = () => {
     signIn();
   };
+  console.log("google login ", loaded);
   return (
-    <button
+    <StyledSocialButton onClick={handleGoogleLogin} href="#">
-      disabled={!loaded}
-      onClick={handleGoogleLogin}
-      href="#"
-      className="btn social"
-    >
       <img className="icon" src={googleSvg} alt="google icon" />
       Sign in with Google
-    </button>
+    </StyledSocialButton>
   );
 }

src/routes/login/MetamaskLoginButton.js

@@ -3,6 +3,8 @@ import { useState, useEffect, useRef } from "react";
 import MetaMaskOnboarding from "@metamask/onboarding";
 import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
 import metamaskSvg from "../../assets/icons/metamask.svg?url";
+import { StyledSocialButton } from "./styled";
+
 export default function MetamaskLoginButton({ login }) {
   const [requesting, setRequesting] = useState(false);
   const [getNonce] = useLazyGetMetamaskNonceQuery();
@@ -43,14 +45,13 @@ export default function MetamaskLoginButton({ login }) {
     }
   };
   return (
-    <button
+    <StyledSocialButton
       disabled={requesting}
       onClick={handleMetamaskLogin}
       href="#"
-      className="btn social"
     >
       <img className="icon" src={metamaskSvg} alt="meta mask icon" />
       Sign in with MetaMask
-    </button>
+    </StyledSocialButton>
   );
 }

src/routes/login/SolidLoginButton.js

@@ -2,6 +2,8 @@
 import { useEffect } from "react";
 import { useGetOpenidMutation } from "../../app/services/auth";
 import solidSvg from "../../assets/icons/solid.svg?url";
+import { StyledSocialButton } from "./styled";
+
 export default function SolidLoginButton() {
   const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
 
@@ -21,14 +23,13 @@ export default function SolidLoginButton() {
   }, [data, isSuccess]);
 
   return (
-    <button
+    <StyledSocialButton
       disabled={isLoading}
       onClick={handleSolidLogin}
       href="#"
-      className="btn social"
     >
       <img src={solidSvg} className="icon" alt="solid icon" />
       {isLoading ? `Redirecting...` : `Sign in with Solid`}
-    </button>
+    </StyledSocialButton>
   );
 }

src/routes/login/index.js

@@ -8,7 +8,8 @@ import BASE_URL from "../../app/config";
 import StyledWrapper from "./styled";
 import MetamaskLoginButton from "./MetamaskLoginButton";
 import SolidLoginButton from "./SolidLoginButton";
-
+import Input from "../../common/component/styled/Input";
+import Button from "../../common/component/styled/Button";
 import GoogleLoginButton from "./GoogleLoginButton";
 import { useLoginMutation } from "../../app/services/auth";
 import { setAuthData } from "../../app/slices/auth.data";
@@ -96,7 +97,8 @@ export default function LoginPage() {
           <span className="desc">Please enter your details.</span>
         </div>
         <form onSubmit={handleLogin}>
-          <input
+          <Input
+            className="large"
             name="email"
             value={email}
             required
@@ -104,7 +106,8 @@ export default function LoginPage() {
             data-type="email"
             onChange={handleInput}
           />
-          <input
+          <Input
+            className="large"
             type="password"
             value={password}
             name="password"
@@ -113,9 +116,9 @@ export default function LoginPage() {
             onChange={handleInput}
             placeholder="Enter your password"
           />
-          <button className="btn" type="submit" disabled={isLoading}>
+          <Button type="submit" disabled={isLoading}>
             {isLoading ? "Signing" : `Sign in`}
-          </button>
+          </Button>
         </form>
         <hr className="or" />
         <GoogleLoginButton login={login} />

src/routes/login/styled.js

@@ -1,4 +1,20 @@
 import styled from "styled-components";
+import Button from "../../common/component/styled/Button";
+export const StyledSocialButton = styled(Button)`
+  width: 100%;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #344054;
+  border: 1px solid #d0d5dd;
+  background: none !important;
+  .icon {
+    width: 24px;
+    height: 24px;
+  }
+`;
 const StyledWrapper = styled.div`
   display: flex;
   justify-content: center;
@@ -39,18 +55,7 @@ const StyledWrapper = styled.div`
       display: flex;
       flex-direction: column;
       gap: 20px;
-      input {
       width: 360px;
-        background: #ffffff;
-        border: 1px solid #d0d5dd;
-        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-        border-radius: 8px;
-        padding: 10px 14px;
-        font-weight: normal;
-        font-size: 16px;
-        line-height: 24px;
-        color: #667085;
-      }
     }
     .or {
       border: none;
@@ -71,34 +76,6 @@ const StyledWrapper = styled.div`
         color: #667085;
       }
     }
-    .btn {
-      display: inline-block;
-      text-align: center;
-      width: 100%;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      color: #ffffff;
-      padding: 10px;
-      background: #1fe1f9;
-      border: 1px solid #1fe1f9;
-      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-      border-radius: 8px;
-      &.social {
-        margin-bottom: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        color: #344054;
-        border-color: #d0d5dd;
-        background: none;
-        .icon {
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
   }
 `;