ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: login buttons

Browse Source
This commit is contained in:
zerosoul
2022-03-28 20:47:53 +08:00
parent ffb53e14d4
commit 2a72512a11
7 changed files with 86 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Setting/config/SMTP.js
+1
View File
@@ -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
+44 -1
View File
@@ -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
+8 -9
View File
@@ -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
disabled={!loaded}
onClick={handleGoogleLogin}
href="#"
className="btn social"
>
<StyledSocialButton onClick={handleGoogleLogin} href="#">
<img className="icon" src={googleSvg} alt="google icon" />
Sign in with Google
</button>
</StyledSocialButton>
);
}
src/routes/login/MetamaskLoginButton.js
+4 -3
View File
@@ -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
+4 -3
View File
@@ -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 -5
View File
@@ -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
+16 -39
View File
@@ -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;
}
}
}
}
`;