feat: add who-can-sign-up in settings

src/routes/login/SignUpLink.js

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+
+const StyledSignUpLink = styled.p`
+  text-align: center;
+  margin: 24px 0 8px;
+
+  > span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    color: #667085;
+    margin-right: 4px;
+  }
+
+  > a {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #22d3ee;
+    cursor: pointer;
+  }
+`;
+export default function MagicLinkLogin() {
+  const navigate = useNavigate();
+  const handleSignUp = () => {
+    navigate("/");
+  };
+  return (
+    <StyledSignUpLink>
+      <span>Don’t have an account?</span>
+      <a onClick={handleSignUp}>Sign up</a>
+    </StyledSignUpLink>
+  );
+}

src/routes/login/index.js

@@ -10,11 +10,13 @@ import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import GoogleLoginButton from "./GoogleLoginButton";
 import MagicLinkLogin from "./MagicLinkLogin";
+import SignUpLink from "./SignUpLink";
 import { useLoginMutation } from "../../app/services/auth";
 import { useGetLoginConfigQuery, useGetSMTPStatusQuery } from "../../app/services/server";
 import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
 import GithubLoginButton from "./GithubLoginButton";
 import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
+
 export default function LoginPage() {
   const { data: enableSMTP } = useGetSMTPStatusQuery();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
@@ -125,7 +127,8 @@ export default function LoginPage() {
     github: enableGithubLogin,
     google: enableGoogleLogin,
     metamask: enableMetamaskLogin,
-    oidc = []
+    oidc = [],
+    who_can_sign_up: whoCanSignUp
   } = loginConfig;
   const enableMagicLink = enableSMTP && magic_link;
   const googleLogin = enableGoogleLogin && clientId;
@@ -169,6 +172,7 @@ export default function LoginPage() {
         {enableGithubLogin && <GithubLoginButton config={githubAuthConfig} />}
         {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
         {oidc.length > 0 && <SolidLoginButton issuers={oidc} />}
+        {whoCanSignUp === "EveryOne" && <SignUpLink />}
       </div>
     </StyledWrapper>
   );

src/routes/setting/Overview.js

@@ -4,7 +4,9 @@ import { useSelector } from "react-redux";
 import {
   useGetServerQuery,
   useUpdateServerMutation,
-  useUpdateLogoMutation
+  useUpdateLogoMutation,
+  useUpdateLoginConfigMutation,
+  useGetLoginConfigQuery
 } from "../../app/services/server";
 import LogoUploader from "../../common/component/AvatarUploader";
 import Input from "../../common/component/styled/Input";
@@ -12,6 +14,8 @@ import Label from "../../common/component/styled/Label";
 import Textarea from "../../common/component/styled/Textarea";
 import SaveTip from "../../common/component/SaveTip";
 import toast from "react-hot-toast";
+import StyledRadio from "../../common/component/styled/Radio";
+
 const StyledWrapper = styled.div`
   position: relative;
   width: 512px;
@@ -19,24 +23,29 @@ const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
+
   .logo {
     display: flex;
     gap: 16px;
+
     .preview {
       width: 96px;
       height: 96px;
     }
+
     .upload {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-start;
+
       .tip {
         font-weight: normal;
         font-size: 14px;
         line-height: 20px;
         color: #374151;
       }
+
       .btn {
         padding: 8px 14px;
         font-weight: 500;
@@ -51,11 +60,13 @@ const StyledWrapper = styled.div`
       }
     }
   }
+
   .inputs {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 24px;
+
     .input {
       width: 100%;
       display: flex;
@@ -63,6 +74,27 @@ const StyledWrapper = styled.div`
       align-items: flex-start;
       gap: 8px;
     }
+
+    > .radioButton {
+      > .label {
+        margin-top: 64px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      > .tip {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #667085;
+      }
+
+      > form {
+        margin-top: 16px;
+        width: 512px;
+      }
+    }
   }
 `;
 export default function Overview() {
@@ -70,57 +102,73 @@ export default function Overview() {
     return store.contacts.byId[store.authData.uid];
   });
   const [changed, setChanged] = useState(false);
-  const [values, setValues] = useState(null);
-  const { data, refetch } = useGetServerQuery();
-  const [updateServer, { isSuccess: updated }] = useUpdateServerMutation();
+  const [serverValues, setServerValues] = useState(null);
+  const [loginConfigValues, setLoginConfigValues] = useState(null);
+  const { data: server, refetch: refetchServer } = useGetServerQuery();
+  const { data: loginConfig, refetch: refetchLoginConfig } = useGetLoginConfigQuery();
+  const [updateServer, { isSuccess: serverUpdated }] = useUpdateServerMutation();
   const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
+  const [updateLoginConfig, { isSuccess: loginConfigUpdated }] = useUpdateLoginConfigMutation();
   const handleUpdate = () => {
-    const { name, description } = values;
+    const { name, description } = serverValues;
     updateServer({ name, description });
+    updateLoginConfig({
+      ...loginConfig,
+      who_can_sign_up: loginConfigValues.who_can_sign_up
+    });
   };
   const handleChange = (evt) => {
     const newValue = evt.target.value;
     const { type } = evt.target.dataset;
-    setValues((prev) => {
+    setServerValues((prev) => {
       return { ...prev, [type]: newValue };
     });
   };
   const handleReset = () => {
-    console.log("reset", data);
-    setValues(data);
+    console.log("reset", server, loginConfig);
+    setServerValues(server);
+    setLoginConfigValues(loginConfig);
   };
   useEffect(() => {
     if (uploadSuccess) {
-      toast.success("update logo successfully");
-      refetch();
+      toast.success("Update logo successfully!");
+      refetchServer();
     }
   }, [uploadSuccess]);
   useEffect(() => {
-    if (data) {
-      setValues(data);
+    if (server) {
+      setServerValues(server);
     }
-  }, [data]);
+  }, [server]);
   useEffect(() => {
-    if (data && values) {
-      const { name, description } = values;
-      const { name: oName, description: oDescription } = data;
-      if (oName !== name || oDescription !== description) {
+    if (loginConfig) {
+      setLoginConfigValues(loginConfig);
+    }
+  }, [loginConfig]);
+  useEffect(() => {
+    if (server && serverValues && loginConfig && loginConfigValues) {
+      const { name, description } = serverValues;
+      const { name: oName, description: oDescription } = server;
+      const { who_can_sign_up: whoCanSignUp } = loginConfigValues;
+      const { who_can_sign_up: oWhoCanSignUp } = loginConfig;
+      if (oName !== name || oDescription !== description || oWhoCanSignUp !== whoCanSignUp) {
         setChanged(true);
       } else {
         setChanged(false);
       }
     }
-  }, [data, values]);
-
+  }, [server, serverValues, loginConfig, loginConfigValues]);
   useEffect(() => {
-    if (updated) {
-      toast.success("Server updated!");
-      refetch();
+    if (serverUpdated && loginConfigUpdated) {
+      toast.success("Configuration updated!");
+      refetchServer();
+      refetchLoginConfig();
     }
-  }, [updated]);
+  }, [serverUpdated, loginConfigUpdated]);
 
-  if (!values) return null;
-  const { name, description, logo } = values;
+  if (!serverValues || !loginConfigValues) return null;
+  const { name, description, logo } = serverValues;
+  const { who_can_sign_up: whoCanSignUp } = loginConfigValues;
   const isAdmin = loginUser?.is_admin;
   return (
     <StyledWrapper>
@@ -169,6 +217,21 @@ export default function Overview() {
             placeholder="Tell the world a bit about this server"
           />
         </div>
+        <div className="radioButton">
+          <p className="label">Default Sign Up</p>
+          <p className="tip">Who can sign up this server.</p>
+          <StyledRadio
+            options={["Everyone", "Invitation Link Only"]}
+            values={["EveryOne", "InvitationOnly"]}
+            value={whoCanSignUp}
+            onChange={(v) =>
+              setLoginConfigValues({
+                ...loginConfig,
+                who_can_sign_up: v
+              })
+            }
+          />
+        </div>
       </div>
       {changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
       {/* <button onClick={handleUpdate} className="btn">update</button> */}