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

refactor: login methods page

Browse Source
This commit is contained in:
zerosoul
2022-05-18 22:14:11 +08:00
parent bfeedaea58
commit 03bce1b724
6 changed files with 204 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/minus.circle.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00004 1.33301C4.32004 1.33301 1.33337 4.31967 1.33337 7.99967C1.33337 11.6797 4.32004 14.6663 8.00004 14.6663C11.68 14.6663 14.6667 11.6797 14.6667 7.99967C14.6667 4.31967 11.68 1.33301 8.00004 1.33301ZM11.3334 8.66634H4.66671V7.33301H11.3334V8.66634Z" fill="#D0D5DD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

src/assets/icons/plus.circle.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00004 1.33301C4.32004 1.33301 1.33337 4.31967 1.33337 7.99967C1.33337 11.6797 4.32004 14.6663 8.00004 14.6663C11.68 14.6663 14.6667 11.6797 14.6667 7.99967C14.6667 4.31967 11.68 1.33301 8.00004 1.33301ZM11.3334 8.66634H8.66671V11.333H7.33337V8.66634H4.66671V7.33301H7.33337V4.66634H8.66671V7.33301H11.3334V8.66634Z" fill="#22CCEE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

src/routes/setting/config/IssuerList.js
+68
View File
@@ -0,0 +1,68 @@
// import React from 'react'
import styled from "styled-components";
import Input from "../../../common/component/styled/Input";
import Toggle from "../../../common/component/styled/Toggle";
import IconPlus from "../../../assets/icons/plus.circle.svg";
import IconMinus from "../../../assets/icons/minus.circle.svg";
const Styled = styled.div`
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
.issuers {
display: flex;
flex-direction: column;
gap: 16px;
.issuer {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
.remove {
cursor: pointer;
}
.icon {
width: 32px;
height: 32px;
}
.url {
width: 342px;
}
}
}
}
.add {
cursor: pointer;
}
`;
export default function IssuerList() {
return (
<Styled>
<ul className="issuers">
<li className="issuer">
<div className="left">
<IconMinus className="remove" />
<img
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
alt="logo"
className="icon"
/>
<Input
prefix="https://"
placeholder="Issuer Domain"
className="url"
/>
</div>
<div className="right">
<Toggle />
</div>
</li>
</ul>
<IconPlus className="add" />
</Styled>
);
}
src/routes/setting/config/Logins.js
+50 -24
View File
@@ -1,13 +1,14 @@
// import { useState } from "react";
import toast from "react-hot-toast";
import StyledContainer from "./StyledContainer";
import Textarea from "../../../common/component/styled/Textarea";
import Toggle from "../../../common/component/styled/Toggle";
import Label from "../../../common/component/styled/Label";
import Input from "../../../common/component/styled/Input";
import SaveTip from "../../../common/component/SaveTip";
import useConfig from "./useConfig";
import Tooltip from "./Tooltip";
import IssuerList from "./IssuerList";
import useGoogleAuthConfig from "../../../common/hook/useGoogleAuthConfig";
import toast from "react-hot-toast";
export default function Logins() {
const {
changed: clientIdChanged,
@@ -34,14 +35,14 @@ export default function Logins() {
const handleGoogleClientIdChange = (evt) => {
updateClientId(evt.target.value);
};
const handleChange = (evt) => {
const newValue = evt.target.value;
const { type } = evt.target.dataset;
const items = newValue ? newValue.split("\n") : [];
setValues((prev) => {
return { ...prev, [type]: items };
});
};
// const handleChange = (evt) => {
// const newValue = evt.target.value;
// const { type } = evt.target.dataset;
// const items = newValue ? newValue.split("\n") : [];
// setValues((prev) => {
// return { ...prev, [type]: items };
// });
// };
const handleToggle = (val) => {
setValues((prev) => {
return { ...prev, ...val };
@@ -53,46 +54,71 @@ export default function Logins() {
return (
<StyledContainer>
<div className="inputs">
<div className="input row">
<div className="input">
<div className="row">
<div className="title">
<div className="txt">
<Label>Password</Label>
</div>
<span className="desc">Allows members login with password.</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { password: !password })}
data-checked={password}
></Toggle>
</div>
<div className="input row">
</div>
<div className="input">
<div className="row">
<div className="title">
<div className="txt">
<Label>Google</Label>
<Tooltip link="https://doc.rustchat.com/en-us/login-google.html" />
</div>
<span className="desc">Allows members login with Google.</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { google: !google })}
data-checked={google}
></Toggle>
</div>
{google && (
<div className="input row">
<div className="row">
<Input
disabled={!google}
onChange={handleGoogleClientIdChange}
placeholder="Client ID"
value={clientId}
/>
</div>
)}
<div className="input row">
</div>
<div className="input">
<div className="row">
<div className="title">
<div className="txt">
<Label>Metamask</Label>
<Tooltip link="https://doc.rustchat.com/en-us/login-metamask.html" />
</div>
<span className="desc">Allows members login with Metamask.</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { metamask: !metamask })}
data-checked={metamask}
></Toggle>
</div>
</div>
<div className="input">
<div className="row">
<div className="title">
<div className="txt">
<Label htmlFor="desc">OIDC</Label>
<Textarea
rows={10}
data-type="oidc"
onChange={handleChange}
value={oidc.join("\n")}
name="oidc"
placeholder="Input issuer list, one line, one issuer"
/>
<Tooltip link="https://doc.rustchat.com/en-us/login-webid.html" />
</div>
<span className="desc">Save my login details for next time.</span>
</div>
</div>
<div className="row">
<IssuerList />
</div>
</div>
</div>
{valuesChanged && (
src/routes/setting/config/StyledContainer.js
+25 -3
View File
@@ -10,17 +10,39 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
gap: 32px;
.input {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
&.row {
gap: 16px;
.row {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.title {
display: flex;
flex-direction: column;
align-items: flex-start;
.txt {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
.icon {
cursor: pointer;
}
}
.desc {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #667085;
}
}
}
}
}
src/routes/setting/config/Tooltip.js
+38
View File
@@ -0,0 +1,38 @@
import Tippy from "@tippyjs/react";
import { roundArrow } from "tippy.js";
import "tippy.js/dist/svg-arrow.css";
// import React from 'react'
import styled from "styled-components";
const StyledContent = styled.div`
padding: 8px 12px;
background: #101828;
border-radius: 8px;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #ffffff;
a {
color: #55c7ec;
}
`;
import IconQuestion from "../../../assets/icons/question.svg";
export default function Tooltip({ link = "#" }) {
return (
<Tippy
interactive
arrow={roundArrow}
placement="bottom"
content={
<StyledContent>
Need more detail? See our{" "}
<a target={"doc"} href={link}>
doc
</a>
.
</StyledContent>
}
>
<IconQuestion className="icon" />
</Tippy>
);
}