refactor: login methods page

src/assets/icons/minus.circle.svg

@@ -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>

src/assets/icons/plus.circle.svg

@@ -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>

src/routes/setting/config/IssuerList.js

@@ -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

@@ -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">
-          <Label>Password</Label>
-          <Toggle
-            onClick={handleToggle.bind(null, { password: !password })}
-            data-checked={password}
-          ></Toggle>
+        <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>
-        <div className="input row">
-          <Label>Google</Label>
-          <Toggle
-            onClick={handleToggle.bind(null, { google: !google })}
-            data-checked={google}
-          ></Toggle>
-        </div>
-        {google && (
-          <div className="input row">
+        <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>
+          <div className="row">
             <Input
+              disabled={!google}
               onChange={handleGoogleClientIdChange}
               placeholder="Client ID"
               value={clientId}
             />
           </div>
-        )}
-        <div className="input row">
-          <Label>Metamask</Label>
-          <Toggle
-            onClick={handleToggle.bind(null, { metamask: !metamask })}
-            data-checked={metamask}
-          ></Toggle>
         </div>
         <div className="input">
-          <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"
-          />
+          <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>
+                <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

@@ -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

@@ -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>
+  );
+}