From 63106cf7496b0333a87dbe8586a059066950c60a Mon Sep 17 00:00:00 2001 From: zerosoul Date: Fri, 20 May 2022 23:58:23 +0800 Subject: [PATCH] feat: oidc config --- src/common/component/styled/Input.js | 2 +- src/common/component/styled/Menu.js | 9 ++- src/common/component/styled/Select.js | 72 +++++++++++++++++++ src/routes/setting/config/IssuerList.js | 68 ------------------ src/routes/setting/config/IssuerList/index.js | 66 +++++++++++++++++ .../setting/config/IssuerList/items.json | 18 +++++ .../setting/config/IssuerList/styled.js | 52 ++++++++++++++ src/routes/setting/config/Logins.js | 2 +- 8 files changed, 218 insertions(+), 71 deletions(-) create mode 100644 src/common/component/styled/Select.js delete mode 100644 src/routes/setting/config/IssuerList.js create mode 100644 src/routes/setting/config/IssuerList/index.js create mode 100644 src/routes/setting/config/IssuerList/items.json create mode 100644 src/routes/setting/config/IssuerList/styled.js diff --git a/src/common/component/styled/Input.js b/src/common/component/styled/Input.js index 7317bb7b..6dbb836d 100644 --- a/src/common/component/styled/Input.js +++ b/src/common/component/styled/Input.js @@ -58,7 +58,7 @@ const StyledInput = styled.input` background-color: #f9fafb; } &::placeholder { - color: #78787c; + color: #d1d5db; } &[type="password"] { padding-right: 30px; diff --git a/src/common/component/styled/Menu.js b/src/common/component/styled/Menu.js index 06c508e5..3037bfac 100644 --- a/src/common/component/styled/Menu.js +++ b/src/common/component/styled/Menu.js @@ -23,7 +23,6 @@ const StyledMenu = styled.ul` font-size: 14px; line-height: 20px; color: #616161; - .icon { width: 20px; height: 20px; @@ -65,6 +64,14 @@ const StyledMenu = styled.ul` color: #fff; } } + &[data-disabled="true"] { + color: #a4a8b3; + .icon { + path { + fill: #a4a8b3; + } + } + } } `; diff --git a/src/common/component/styled/Select.js b/src/common/component/styled/Select.js new file mode 100644 index 00000000..3a599591 --- /dev/null +++ b/src/common/component/styled/Select.js @@ -0,0 +1,72 @@ +import { useState } from "react"; +import styled from "styled-components"; +import Tippy from "@tippyjs/react"; +import IconSelect from "../../../assets/icons/check.sign.svg"; +import IconArrow from "../../../assets/icons/arrow.down.svg"; +import Menu from "./Menu"; +const Styled = styled.div` + user-select: none; + border: 1px solid #e5e7eb; + border-radius: 4px; + padding: 8px; + display: flex; + align-items: center; + gap: 8px; + .txt { + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #475467; + min-width: 76px; + } + > .icon { + width: 20px !important; + height: 20px !important; + } +`; +export default function Select({ options = [], updateSelect = null }) { + const [optionsVisible, setOptionsVisible] = useState(false); + const [curr, setCurr] = useState(undefined); + const toggleVisible = () => { + setOptionsVisible((prev) => !prev); + }; + const handleSelect = (data) => { + setCurr(data); + toggleVisible(); + if (updateSelect) { + updateSelect(data); + } + }; + return ( + + {options.map(({ title, value, selected, underline }) => { + return ( +
  • + {title} + {selected && } +
    • + ); + })} + + } + > + + {curr?.title || `Select`} + + +     + ); +} diff --git a/src/routes/setting/config/IssuerList.js b/src/routes/setting/config/IssuerList.js deleted file mode 100644 index c241d169..00000000 --- a/src/routes/setting/config/IssuerList.js +++ /dev/null @@ -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 ( - - - - - ); -} diff --git a/src/routes/setting/config/IssuerList/index.js b/src/routes/setting/config/IssuerList/index.js new file mode 100644 index 00000000..e0ebd397 --- /dev/null +++ b/src/routes/setting/config/IssuerList/index.js @@ -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 ( + + + {/* */} + + ); +} diff --git a/src/routes/setting/config/IssuerList/items.json b/src/routes/setting/config/IssuerList/items.json new file mode 100644 index 00000000..27577145 --- /dev/null +++ b/src/routes/setting/config/IssuerList/items.json @@ -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": "" + } +] diff --git a/src/routes/setting/config/IssuerList/styled.js b/src/routes/setting/config/IssuerList/styled.js new file mode 100644 index 00000000..abb8c2d7 --- /dev/null +++ b/src/routes/setting/config/IssuerList/styled.js @@ -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; diff --git a/src/routes/setting/config/Logins.js b/src/routes/setting/config/Logins.js index 85cb245f..97e59293 100644 --- a/src/routes/setting/config/Logins.js +++ b/src/routes/setting/config/Logins.js @@ -117,7 +117,7 @@ export default function Logins() {
    - +