Merge pull request #718 from SynBioHub/publicaccountcreation

public account creation button is turned on and working, register is …
SynBioHub · Aug 23, 2024 · a078b54 · a078b54
2 parents 4158e94 + 265569e
commit a078b54
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 139 deletions.
diff --git a/frontend/components/Admin/Users.js b/frontend/components/Admin/Users.js
@@ -38,13 +38,20 @@ const headers = [
 
 export default function Users() {
   const token = useSelector(state => state.user.token);
+  const theme = JSON.parse(localStorage.getItem('theme')) || {};
   const dispatch = useDispatch();
   const { users, loading } = useUsers(token, dispatch);
 
-  const [allowPublicSignup, setAllowPublicSignup] = useState(false);
+  const [allowPublicSignup, setAllowPublicSignup] = useState(theme.allowPublicSignup);
+
+  useEffect(() => {
+    const storedTheme = JSON.parse(localStorage.getItem('theme')) || {};
+    if (storedTheme.allowPublicSignup !== undefined) {
+      setAllowPublicSignup(storedTheme.allowPublicSignup);
+    }
+  }, []);
 
   const handleAllowPublicSignup = async () => {
-    console.log(allowPublicSignup);
     try {
       const url = `${publicRuntimeConfig.backend}/admin/users`;
       const headers = {
@@ -54,16 +61,18 @@ export default function Users() {
 
       const parameters = new URLSearchParams();
       if (allowPublicSignup) {
-        parameters.append('allowPublicSignup', allowPublicSignup); 
+        parameters.append('allowPublicSignup', allowPublicSignup);
       }
-
-
-      console.log(parameters.get('allowPublicSignup'));
 
       const response = await axios.post(url, parameters, { headers });
 
       if (response.status === 200) {
         alert("Allow Public Account Creation updated successfully!");
+        const updatedTheme = {
+          ...JSON.parse(localStorage.getItem('theme')),
+          allowPublicSignup: allowPublicSignup,
+        };
+        localStorage.setItem('theme', JSON.stringify(updatedTheme));
       }
     } catch (error) {
       console.error("Error saving:", error);
@@ -91,7 +100,7 @@ export default function Users() {
       <div className={styles.checkbox}>
         <Checkbox
           value={allowPublicSignup}
-          onChange={() => setAllowPublicSignup(!allowPublicSignup)}
+          onChange={() => setAllowPublicSignup(prevState => !prevState)}
         />
         <span className={styles.checktext}>Allow Public Account Creation</span>
         <ActionButton className={styles.checksave}

diff --git a/frontend/pages/login.js b/frontend/pages/login.js
@@ -24,6 +24,7 @@ function Login() {
   const router = useRouter();
 
   const theme = JSON.parse(localStorage.getItem('theme')) || {};
+  const allowPublicSignup = theme.allowPublicSignup;
 
   const next = router.query.next;
 
@@ -83,7 +84,7 @@ function Login() {
           style={{
             backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
             color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
-          }} 
+          }}
           onClick={() => {
             dispatch(login(username, password));
             setUsername('');
@@ -101,12 +102,14 @@ function Login() {
           <div className={styles.info}>
             <span className={styles.blue}>Forgot password?</span>
           </div>
-          <div className={styles.info}>
-            New to SynBioHub?{' '}
-            <Link href="/register">
-              <a className={styles.blue}>Join now</a>
-            </Link>
-          </div>
+          {allowPublicSignup && (
+            <div className={styles.info}>
+              New to SynBioHub?{' '}
+              <Link href="/register">
+                <a className={styles.blue}>Join now</a>
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git a/frontend/pages/register.js b/frontend/pages/register.js
@@ -49,135 +49,146 @@ function Register() {
     }
   }, [loggedIn, router, next]);
 
+  const theme = JSON.parse(localStorage.getItem('theme')) || {};
+  const allowPublicSignup = theme.allowPublicSignup;
+
   return (
     <div className={styles.container}>
       <div className={styles.frame}>
-        <FontAwesomeIcon
-          icon={faGlassCheers}
-          size="3x"
-          color="#00A1E4"
-          className={styles.registericon}
-        />
-        <h1 className={styles.header}>Create Your Account</h1>
-        <div className={styles.intro}>
-          Tell us about yourself to get started
-        </div>
-        {registerError && (
-          <div className={styles.warning}>{registerErrorMessage}</div>
-        )}
-        <InputField
-          value={name}
-          onChange={event => setName(event.target.value)}
-          onKeyPress={event => {
-            if (event.key === 'Enter') usernameInput.current.focus();
-          }}
-          placeholder="Full name"
-          type="text"
-          icon={faUser}
-        />
-        <InputField
-          value={username}
-          inputRef={usernameInput}
-          onChange={event => setUsername(event.target.value)}
-          onKeyPress={event => {
-            if (event.key === 'Enter') affiliationInput.current.focus();
-          }}
-          placeholder="Username"
-          type="text"
-          icon={faUser}
-          pattern="^[a-zA-Z0-9\-_\.~]+$"
-          title="Usernames can contain letters, numbers, and the symbols - _ . ~"
-        />
-        <InputField
-          value={affiliation}
-          inputRef={affiliationInput}
-          onChange={event => setAffiliation(event.target.value)}
-          onKeyPress={event => {
-            if (event.key === 'Enter') emailInput.current.focus();
-          }}
-          placeholder="Affiliation (optional)"
-          type="text"
-          icon={faSuitcase}
-        />
-        <InputField
-          value={email}
-          inputRef={emailInput}
-          onChange={event => setEmail(event.target.value)}
-          onKeyPress={event => {
-            if (event.key === 'Enter') passwordInput.current.focus();
-          }}
-          placeholder="Email"
-          type="text"
-          icon={faEnvelope}
-        />
-        <InputField
-          value={password}
-          inputRef={passwordInput}
-          onChange={event => setPassword(event.target.value)}
-          onKeyPress={event => {
-            if (event.key === 'Enter') confirmPasswordInput.current.focus();
-          }}
-          placeholder="Password"
-          type="password"
-          icon={faLock}
-        />
-        <InputField
-          value={confirmPassword}
-          inputRef={confirmPasswordInput}
-          onChange={event => setConfirmPassword(event.target.value)}
-          onKeyPress={event => {
-            if (event.key === 'Enter') {
-              dispatch(
-                registerUser(
-                  name,
-                  username,
-                  affiliation,
-                  email,
-                  password,
-                  confirmPassword
-                )
-              );
-              setPassword('');
-              setConfirmPassword('');
-            }
-          }}
-          placeholder="Confirm password"
-          type="password"
-          icon={faLock}
-        />
-        <div
-          role="button"
-          className={styles.submitbutton}
-          onClick={() => {
-            dispatch(
-              registerUser(
-                name,
-                username,
-                affiliation,
-                email,
-                password,
-                confirmPassword
-              )
-            );
-            setPassword('');
-            setConfirmPassword('');
-          }}
-        >
-          <FontAwesomeIcon
-            icon={faSignInAlt}
-            size="1x"
-            className={styles.submiticon}
-          />{' '}
-          Create Account
-        </div>
-        <div className={styles.infocontainer}>
-          <div className={styles.info}>
-            Already have an account?{' '}
-            <Link href="/login">
-              <a className={styles.blue}>Sign in</a>
-            </Link>
+        {allowPublicSignup ? (
+          <>
+            <FontAwesomeIcon
+              icon={faGlassCheers}
+              size="3x"
+              color="#00A1E4"
+              className={styles.registericon}
+            />
+            <h1 className={styles.header}>Create Your Account</h1>
+            <div className={styles.intro}>
+              Tell us about yourself to get started
+            </div>
+            {registerError && (
+              <div className={styles.warning}>{registerErrorMessage}</div>
+            )}
+            <InputField
+              value={name}
+              onChange={event => setName(event.target.value)}
+              onKeyPress={event => {
+                if (event.key === 'Enter') usernameInput.current.focus();
+              }}
+              placeholder="Full name"
+              type="text"
+              icon={faUser}
+            />
+            <InputField
+              value={username}
+              inputRef={usernameInput}
+              onChange={event => setUsername(event.target.value)}
+              onKeyPress={event => {
+                if (event.key === 'Enter') affiliationInput.current.focus();
+              }}
+              placeholder="Username"
+              type="text"
+              icon={faUser}
+              pattern="^[a-zA-Z0-9\-_\.~]+$"
+              title="Usernames can contain letters, numbers, and the symbols - _ . ~"
+            />
+            <InputField
+              value={affiliation}
+              inputRef={affiliationInput}
+              onChange={event => setAffiliation(event.target.value)}
+              onKeyPress={event => {
+                if (event.key === 'Enter') emailInput.current.focus();
+              }}
+              placeholder="Affiliation (optional)"
+              type="text"
+              icon={faSuitcase}
+            />
+            <InputField
+              value={email}
+              inputRef={emailInput}
+              onChange={event => setEmail(event.target.value)}
+              onKeyPress={event => {
+                if (event.key === 'Enter') passwordInput.current.focus();
+              }}
+              placeholder="Email"
+              type="text"
+              icon={faEnvelope}
+            />
+            <InputField
+              value={password}
+              inputRef={passwordInput}
+              onChange={event => setPassword(event.target.value)}
+              onKeyPress={event => {
+                if (event.key === 'Enter') confirmPasswordInput.current.focus();
+              }}
+              placeholder="Password"
+              type="password"
+              icon={faLock}
+            />
+            <InputField
+              value={confirmPassword}
+              inputRef={confirmPasswordInput}
+              onChange={event => setConfirmPassword(event.target.value)}
+              onKeyPress={event => {
+                if (event.key === 'Enter') {
+                  dispatch(
+                    registerUser(
+                      name,
+                      username,
+                      affiliation,
+                      email,
+                      password,
+                      confirmPassword
+                    )
+                  );
+                  setPassword('');
+                  setConfirmPassword('');
+                }
+              }}
+              placeholder="Confirm password"
+              type="password"
+              icon={faLock}
+            />
+            <div
+              role="button"
+              className={styles.submitbutton}
+              onClick={() => {
+                dispatch(
+                  registerUser(
+                    name,
+                    username,
+                    affiliation,
+                    email,
+                    password,
+                    confirmPassword
+                  )
+                );
+                setPassword('');
+                setConfirmPassword('');
+              }}
+            >
+              <FontAwesomeIcon
+                icon={faSignInAlt}
+                size="1x"
+                className={styles.submiticon}
+              />{' '}
+              Create Account
+            </div>
+            <div className={styles.infocontainer}>
+              <div className={styles.info}>
+                Already have an account?{' '}
+                <Link href="/login">
+                  <a className={styles.blue}>Sign in</a>
+                </Link>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className={styles.nosignupmessage}>
+            <h1>Public account creation is not allowed at this time.</h1>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );