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

feat: oidc config

Browse Source
This commit is contained in:
zerosoul
2022-05-20 23:58:23 +08:00
parent 7209efa685
commit 63106cf749
8 changed files with 218 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/setting/config/IssuerList.js
-68
View File
@@ -1,68 +0,0 @@
// 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/IssuerList/index.js
+66
View File
@@ -0,0 +1,66 @@
import { useState } from "react";
import Select from "../../../../common/component/styled/Select";
import Button from "../../../../common/component/styled/Button";
import Input from "../../../../common/component/styled/Input";
import Toggle from "../../../../common/component/styled/Toggle";
import options from "./items.json";
import Styled from "./styled";
// import IconPlus from "../../../../assets/icons/plus.circle.svg";
import IconMinus from "../../../../assets/icons/minus.circle.svg";
export default function IssuerList({ issuers = [] }) {
const [select, setSelect] = useState(undefined);
const [newDomain, setNewDomain] = useState("");
const handleNewDomain = (evt) => {
setNewDomain(evt.target.value);
};
const disableBtn = !(newDomain || !!select?.value);
return (
<Styled>
<ul className="issuers">
{issuers.map(({ enable, favicon, domain }) => {
return (
<li key={domain} className="issuer">
<div className="left">
<IconMinus className="remove" />
<div className="data">
<img src={favicon} alt="logo" className="icon" />
<Input
readOnly
value={domain}
prefix="https://"
placeholder="Issuer Domain"
className="url"
/>
</div>
</div>
<div className="right">
<Toggle data-checked={enable} />
</div>
</li>
);
})}
<li className="issuer add">
<div className="left">
<Select options={options} updateSelect={setSelect} />
<div className="data">
<Input
onChange={handleNewDomain}
readOnly={!!select?.value}
value={select?.value || newDomain}
prefix="https://"
placeholder="domain.com"
className="url"
/>
</div>
</div>
<div className="right">
<Button disabled={disableBtn}>Add</Button>
</div>
</li>
</ul>
{/* <IconPlus className="add" /> */}
</Styled>
);
}
src/routes/setting/config/IssuerList/items.json
+18
View File
@@ -0,0 +1,18 @@
[
{
"title": "Facebook",
"value": "facebook.com",
"icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAxNkMzMiA3LjE2NDEzIDI0LjgzNTggMCAxNiAwQzcuMTY0MTMgMCAwIDcuMTY0MTMgMCAxNkMwIDIzLjk4NTMgNS44NTAxNiAzMC42MDQ5IDEzLjUwMDIgMzEuODA2N1YyMC42MjYxSDkuNDM2NjRWMTZIMTMuNTAwMlYxMi40NzQyQzEzLjUwMDIgOC40NjQ1NiAxNS44ODk4IDYuMjQ4MjkgMTkuNTQzOCA2LjI0ODI5QzIxLjI5NDMgNi4yNDgyOSAyMy4xMjU4IDYuNTYxMDIgMjMuMTI1OCA2LjU2MTAyVjEwLjQ5ODZIMjEuMTA3NUMxOS4xMjA4IDEwLjQ5ODYgMTguNDk5OCAxMS43MzE3IDE4LjQ5OTggMTIuOTk4NFYxNS45OTk5SDIyLjkzNjdMMjIuMjI4IDIwLjYyNkgxOC40OTk2VjMxLjgwNjRDMjYuMTQ5OCAzMC42MDcxIDMxLjk5OTggMjMuOTg3NiAzMS45OTk4IDE1Ljk5OTlMMzIgMTZaIiBmaWxsPSIjMTk3N0YzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIuMjI4IDIwLjYyNThMMjIuOTM2OSAxNS45OTk2SDE4LjQ5OTlWMTIuOTk4MkMxOC40OTk5IDExLjczMzcgMTkuMTE4NiAxMC40OTg0IDIxLjEwNzcgMTAuNDk4NEgyMy4xMjZWNi41NjA4QzIzLjEyNiA2LjU2MDggMjEuMjk0NSA2LjI0ODA1IDE5LjU0MzkgNi4yNDgwNUMxNS44ODk5IDYuMjQ4MDUgMTMuNTAwNCA4LjQ2MjE0IDEzLjUwMDQgMTIuNDczOVYxNS45OTk4SDkuNDM2NzdWMjAuNjI1OUgxMy41MDA0VjMxLjgwNjRDMTQuMzE0OSAzMS45MzQ0IDE1LjE0OTYgMzEuOTk5OCAxNi4wMDAxIDMxLjk5OThDMTYuODUwNyAzMS45OTk4IDE3LjY4NTQgMzEuOTMyMiAxOC40OTk5IDMxLjgwNjRWMjAuNjI1OUgyMi4yMjgyTDIyLjIyOCAyMC42MjU4WiIgZmlsbD0iI0ZFRkVGRSIvPgo8L3N2Zz4K",
"selected": true
},
{
"title": "Github",
"value": "github.com",
"disabled": true,
"underline": true
},
{
"title": "Custom",
"value": ""
}
]
src/routes/setting/config/IssuerList/styled.js
+52
View File
@@ -0,0 +1,52 @@
import styled from "styled-components";
const Styled = styled.div`
padding: 16px 0;
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;
gap: 40px;
.left {
flex: 1;
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
.remove {
cursor: pointer;
}
.data {
display: flex;
align-items: flex-end;
gap: 16px;
justify-content: space-between;
> .icon {
width: 32px;
height: 32px;
}
> .url {
width: 280px;
}
}
}
.right {
width: 56px;
display: flex;
justify-content: flex-end;
}
}
}
.add {
cursor: pointer;
}
`;
export default Styled;
src/routes/setting/config/Logins.js
+1 -1
View File
@@ -117,7 +117,7 @@ export default function Logins() {
</div>
</div>
<div className="row">
<IssuerList />
<IssuerList issuers={oidc} />
</div>
</div>
</div>