Leaderboard frontend

frontend/src/App.module.css

@@ -46,6 +46,7 @@ body {
   text-align: center;
   white-space: nowrap;
   display: inline-block;
+  cursor: pointer;
 }
 
 .navYear {
@@ -234,4 +235,11 @@ body {
   width: 20px;
   height: auto;
   padding: 0px 4px 4px 4px;
+}
+
+/* --------------------------------------------------------- LOGIN/REGISTER PAGE STYLES ---------------------------------------------------*/
+
+.authPage {
+  padding: 20px;
+  width: 60%;
 }

frontend/src/components/Header.tsx

@@ -7,18 +7,32 @@ const Header: React.FC<{}> = () => {
 
   const navigate = useNavigate();
 
+  const [loginState, setLoginState] = useState(false);
+
+  const logout = () => {
+    // Call logout route in backend
+    navigate("/");
+  }
+
+  useEffect(() => {
+    // Detect whether user is logged in here D:
+  }, []);
+
   return (
     <>
       <nav className={styles.horizontalFlex}>
         <div>
           <a href="https://www.csesoc.unsw.edu.au/"> <img src={csesocLogo} alt="csesoc logo" className={styles.csesocLogo}></img> </a>
         </div>
         <div className={styles.horizontalFlex}>
-          <a className={styles.navElem} href="/2022/about">[About]</a> 
-          <a className={styles.navElem} href="/2022/auth/login">[Log In]</a> 
-          <a className={styles.navElem} href="/2022/calendar">[Calendar]</a> 
-          <a className={styles.navElem} href="/2022/leaderboard">[Leaderboard]</a> 
-          <a className={styles.navElem} href="/2022/stats">[Stats]</a> 
+          <span className={styles.navElem} onClick={() => navigate("/2022/calendar")}>[Calendar]</span> 
+          <span className={styles.navElem} onClick={() => navigate("/2022/leaderboard")}>[Leaderboard]</span> 
+          <span className={styles.navElem} onClick={() => navigate("/2022/stats")}>[Stats]</span> 
+          <span className={styles.navElem} onClick={() => navigate("/2022/about")}>[About]</span> 
+          {(loginState) 
+            ? <span className={styles.navElem} onClick={logout}>[Log Out]</span>
+            : <span className={styles.navElem} onClick={() => navigate("/2022/auth/login")}>[Log In / Register]</span>
+          }
           <div className={styles.navYear}>
             {"{"}Year={">"}<span className={styles.yearDisplay} onClick={() => navigate("/2022/")}>2022</span>{"}"}
           </div>

frontend/src/components/register/PasswordStrength.tsx

@@ -7,8 +7,13 @@ interface Strength {
 };
 
 const selectColour = (strength: number) => {
-  const colours = ["red", "orange", "yellow", "green"];
-  return colours[strength - 1];
+  const colours = ["red", "orange", "yellow", "greenyellow", "green"];
+  return colours[strength];
+};
+
+const selectText = (strength: number) => {
+  const colours = ["Very weak", "Weak", "Moderate", "Strong", "Very strong"];
+  return colours[strength];
 };
 
 const range = (start: number, end: number, step: number = 1) => {
@@ -29,9 +34,11 @@ const PasswordStrength: React.FC<Strength> = ({ strength }) => {
   return (
     <>
       <PasswordContainer>
+        <span style={{fontSize: 0.875+"em"}}>Password strength: <span style={{color: strength !== -1 ? selectColour(strength) : "#bdbcc1"}}>{strength !== -1 ? selectText(strength) : "N/A"}</span></span>
+        <br/>
         <Row className="h-100">
-          {range(1, 5).map(n => (
-            <Col key={n} style={{ backgroundColor: strength >= n ? selectColour(strength) : "lightgray" }}></Col>
+          {range(0, 5).map(n => (
+            <Col key={n} style={{ backgroundColor: strength >= n ? selectColour(strength) : "#bdbcc1" }}></Col>
           ))}
         </Row>
       </PasswordContainer>

frontend/src/pages/Login.tsx

@@ -3,6 +3,7 @@ import { Form, Button } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
 import { BACKEND_URI } from "src/config";
+import styles from "../App.module.css";
 
 const getCookieValue = (name: string) => (
   document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
@@ -41,7 +42,7 @@ const Login: React.FC<{}> = () => {
   };
 
   return (
-    <>
+    <div className={styles.authPage}>
       <Form>
         <Form.Group>
           <Form.Label>Email address</Form.Label>
@@ -57,14 +58,23 @@ const Login: React.FC<{}> = () => {
             type="password"
             onChange={event => setPassword(event.target.value)} />
         </Form.Group>
-        <Button
-          variant="primary"
-          onClick={() => login()}
-          disabled={!validEmailFormat() || password === ""}>
-          Submit
-        </Button>
+        <br/>
+        <Form.Group>
+          <Button
+            variant="primary"
+            onClick={() => login()}
+            disabled={!validEmailFormat() || password === ""}>
+            Submit
+          </Button>
+          <Button
+            variant="link"
+            type="button"
+            onClick={() => navigate("/2022/auth/register")}>
+            Register
+          </Button>  
+          </Form.Group>
       </Form>
-    </>
+    </div>
   );
 };
 

frontend/src/pages/Register.tsx

@@ -8,6 +8,8 @@ import zxcvbnCommonPackage from "@zxcvbn-ts/language-common";
 import zxcvbnEnPackage from "@zxcvbn-ts/language-en";
 
 import { BACKEND_URI } from "src/config";
+import styles from "../App.module.css";
+
 import PasswordStrength from "src/components/register/PasswordStrength";
 
 // Set up zxcvbn
@@ -72,7 +74,7 @@ const Register: React.FC<{}> = () => {
   };
 
   return (
-    <>
+    <div className={styles.authPage}>
       <Form>
         <Form.Group>
           <Form.Label>Email address</Form.Label>
@@ -100,9 +102,10 @@ const Register: React.FC<{}> = () => {
             required
             type="password"
             onChange={event => updatePassword(event.target.value)} />
-          <PasswordStrength strength={strength} />
-          <Form.Text className="text-danger" hidden={password === "" || strength >= 3}>
-            Password too weak
+          <PasswordStrength strength={(password === "") ? -1 : strength} />
+          <br/>
+          <Form.Text className="text-danger">
+            {(password === "" || strength >= 3) ? " " : "Password too weak"} 
           </Form.Text>
         </Form.Group>
         <Form.Group>
@@ -115,14 +118,23 @@ const Register: React.FC<{}> = () => {
             Passwords do not match
           </Form.Text>
         </Form.Group>
-        <Button
-          variant="primary"
-          onClick={() => register()}
-          disabled={!canSubmit()}>
-          Submit
-        </Button>
+        <br/>
+        <Form.Group>
+          <Button
+            variant="primary"
+            onClick={() => register()}
+            disabled={!canSubmit()}>
+            Submit
+          </Button>
+          <Button
+            variant="link"
+            type="button"
+            onClick={() => navigate("/2022/auth/login")}>
+            Return to login
+          </Button>
+        </Form.Group>
       </Form>
-    </>
+    </div>
   );
 };