add guest support (#1002)

Add support for anonymous login and reformat the UI of the login page to make the new set of options intuitive.
uclaacm · Apr 12, 2023 · ef2bc4d · ef2bc4d
1 parent 1fb4a46
commit ef2bc4d
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 40 deletions.
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -35,7 +35,7 @@ const gradientColors = {
 const themeColors = {
   0: ['#FF5F54', 'white'],
   1: ['#36C5FC', 'white'],
-  2: ['#ACF53F', 'white'],
+  2: ['#ACF53F', 'black'],
   3: ['#FFF065', 'black'],
   4: ['#FF94DB', 'white'],
 };

diff --git a/src/components/Login/LoginForm.js b/src/components/Login/LoginForm.js
@@ -5,7 +5,11 @@ import { RingLoader } from 'react-spinners';
 import { Button } from 'reactstrap';
 
 import { EMAIL_DOMAIN_NAME } from '../../constants';
-import { signInWithEmailAndPassword, getCreateUserErrorMessage } from '../../firebase';
+import {
+  signInWithEmailAndPassword,
+  signInAnonymously,
+  getCreateUserErrorMessage,
+} from '../../firebase';
 import LoginInput from './LoginInput';
 import '../../styles/Login.scss';
 
@@ -16,6 +20,20 @@ export default function LoginModal(props) {
   const [waiting, setWaiting] = useState(false);
   const [hoverButton, setHoverButton] = useState(false);
 
+  const handleAnonymousLogin = (e) => {
+    setWaiting(true);
+    setErrorMsg('');
+
+    e.preventDefault();
+    signInAnonymously()
+      .then(() => {})
+      .catch((err) => {
+        console.error(err);
+        setErrorMsg(getCreateUserErrorMessage(err));
+        setWaiting(false);
+      });
+  };
+
   const handleEmailLogin = (e) => {
     setWaiting(true);
     setErrorMsg('');
@@ -48,7 +66,7 @@ export default function LoginModal(props) {
       );
     }
 
-    return <br />;
+    return null;
   };
 
   const renderInputs = () => (
@@ -63,22 +81,22 @@ export default function LoginModal(props) {
 
   const renderAction = () => {
     const { themeColor, textColor } = props;
-    const unclickedStyle = {
+    const clickedStyle = {
       backgroundColor: 'white',
       borderColor: themeColor,
-      borderWidth: 'medium',
-      borderRadius: '4px',
       color: 'black',
     };
 
-    const clickedStyle = {
+    const unclickedStyle = {
       backgroundColor: themeColor,
       borderColor: themeColor,
-      borderWidth: 'medium',
-      borderRadius: '4px',
       color: textColor,
     };
 
+    const subButtonStyle = {
+      color: 'var(--bs-blue)',
+    };
+
     if (waiting) {
       return (
         <div className="login-form-loader">
@@ -87,34 +105,45 @@ export default function LoginModal(props) {
       );
     }
     return (
-      <div>
+      <div className="mt-2">
         <Button
           size="lg"
           type="submit"
+          className="login-main-button"
           style={hoverButton ? clickedStyle : unclickedStyle}
           onMouseEnter={() => setHoverButton(!hoverButton)}
           onMouseLeave={() => setHoverButton(!hoverButton)}
         >
           Login
         </Button>
-        <Link
-          to={{
-            pathname: '/createUser',
-            state: { username, password },
-          }}
-          className="login-form-link ml-4"
-        >
-          or, create an account
-        </Link>
-      </div>
-    );
-  };
-
-  return (
-    <div>
-      <form className="login-form" onSubmit={handleEmailLogin}>
-        {renderInputs()}
-        {renderAction()}
+        <div className="login-sub-options">
+          <hr className="mt-4 mb-3" />
+          <p
+            style={{ color: '#595959', textAlign: 'center', width: '100%' }}
+            className="mb-4 w-100"
+          >
+            Don&apos;t have an account?
+            <br />
+            <Link
+              to={{
+                pathname: '/createUser',
+                state: { username, password },
+              }}
+              className="login-form-link"
+              style={subButtonStyle}
+            >
+              Sign up
+            </Link>
+            {' or '}
+            <Button
+              onClick={handleAnonymousLogin}
+              className="login-guest-button"
+              style={subButtonStyle}
+            >
+              continue as guest
+            </Button>
+          </p>
+        </div>
         {!waiting && (
           <details className="mt-2">
             <summary>Forgot your password?</summary>
@@ -128,6 +157,15 @@ export default function LoginModal(props) {
             </p>
           </details>
         )}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <form className="login-form" onSubmit={handleEmailLogin}>
+        {renderInputs()}
+        {renderAction()}
       </form>
     </div>
   );

diff --git a/src/firebase/index.js b/src/firebase/index.js
@@ -4,6 +4,7 @@ import {
   onAuthStateChanged,
   signOut,
   signInWithEmailAndPassword,
+  signInAnonymously,
   createUserWithEmailAndPassword,
 } from 'firebase/auth';
 
@@ -43,6 +44,7 @@ const onAuthStateChangedFn = (...args) => onAuthStateChanged(auth, ...args);
 const signOutFn = (...args) => signOut(auth, ...args);
 const createUserWithEmailAndPasswordFn = (...args) => createUserWithEmailAndPassword(auth, ...args);
 const signInWithEmailAndPasswordFn = (...args) => signInWithEmailAndPassword(auth, ...args);
+const signInAnonymouslyFn = (...args) => signInAnonymously(auth, ...args);
 
 const getCreateUserErrorMessage = (err) => {
   let newMsg = err.message;
@@ -89,5 +91,6 @@ export {
   signOutFn as signOut,
   createUserWithEmailAndPasswordFn as createUserWithEmailAndPassword,
   signInWithEmailAndPasswordFn as signInWithEmailAndPassword,
+  signInAnonymouslyFn as signInAnonymously,
   getCreateUserErrorMessage,
 };
diff --git a/src/styles/Login.scss b/src/styles/Login.scss
@@ -107,32 +107,55 @@
 
 .login-form-input {
   appearance: none;
-  background-color: $theme-dark;
-  border: 0;
-  border-left: 0;
+  border-color: #949494;
   border-radius: 8px;
-  border-right: 0;
-  border-top: 0;
+  border-style: solid;
   box-shadow: none;
-  color: $off-white;
+  color: $theme-dark;
   display: inline-block;
   font-size: 1.5em;
   font-variant-ligatures: none;
   height: auto;
   line-height: normal;
   margin: 0 2px 1rem; /* last value controls how far the next input starts */
-  max-width: 400px;
-  min-width: 300px;
   outline: 0;
   padding: 0.2rem 0.5rem;
   transition: box-shadow 70ms ease-out, border-color 70ms ease-out;
-  width: 50%;
+  width: clamp(300px, 50%, 400px);
 }
 
 .login-form-input:disabled {
   color: #686868;
 }
 
+.login-main-button {
+  border-radius: 4px;
+  border-width: medium;
+  width: clamp(300px, 50%, 400px);
+}
+
+.login-sub-options {
+  width: clamp(300px, 50%, 400px);
+
+  @media only screen and (max-width: 1024px) {
+    margin: auto;
+  }
+}
+
+.login-guest-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  vertical-align: baseline;
+}
+
+.login-guest-button:hover {
+  background: none;
+  border: none;
+}
+
 /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
 .login-modal ::input-placeholder {
   /* Chrome/Opera/Safari */
@@ -143,9 +166,6 @@
 
 .login-form-link {
   color: inherit;
-  font-size: 1.2rem;
-  margin-left: 5px;
-  text-decoration: none;
 }
 
 .login-form-link:hover {