Frontend - Login

client/README.md

@@ -27,6 +27,11 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
+### Useful Documentation Links:
+- https://nextjs.org/docs/app/getting-started/layouts-and-pages (Creating new routes)
+- We use `React-Hook-Form` for authentication: https://react-hook-form.com/
+- We use useRouter to make API calls: https://nextjs.org/docs/app/api-reference/functions/use-router
+
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

client/src/app/login/page.tsx

@@ -0,0 +1,51 @@
+import Card from '@/components/Card';
+import styles from '../page.module.scss';
+import Heading from '@/components/Heading';
+import Button from '@/components/Button';
+import Typography from '@/components/Typography';
+import TextField from '@/components/TextField';
+import Link from 'next/link';
+import Alert from '@/components/Alert';
+import Binary from '@/../public/assets/binary.png';
+
+export default function LoginPage() {
+  return (
+    <main className={`${styles.main}`}>
+      <div className={`${styles.login}`}>
+        <Card gap={1}>
+          <Heading centered>Log In</Heading>
+
+          <Alert marginBottom={0}>
+            <p>Oops, incorrect email or password.</p>
+          </Alert>
+
+          <TextField
+            id="outlined-basic"
+            variant="outlined"
+            label={'Email Address'}
+            defaultText={'Enter Email Address'}
+          />
+
+          <TextField
+            id="outlined-basic"
+            variant="outlined"
+            label="Password"
+            defaultText={'Enter Password'}
+          />
+
+          <Link href="/forgot-password">Forgot your password?</Link>
+
+          <Button variant="primary">Apply Now</Button>
+
+          <Typography variant="label/medium" component="p">
+            Don&rsquo;t have an account?{' '}
+            <Link href="/register" className="link">
+              {' '}
+              Sign up!
+            </Link>{' '}
+          </Typography>
+        </Card>
+      </div>
+    </main>
+  );
+}

client/src/app/page.module.scss

@@ -6,6 +6,20 @@
   flex-direction: column;
   gap: 10rem;
   padding: 6rem var(--side-padding);
+  background-image: url(/assets/binary.png);
+  background-size: cover;
+  background-position: center bottom;
+  width: 100%;
+  height: 100%;
+}
+
+.login {
+  padding: 32px;
+  align-self: center;
+  align-items: stretch;
+
+  max-width: 646px;
+  width: 100%;
 }
 
 .buttonRow {

client/src/components/Alert/index.tsx

@@ -0,0 +1,21 @@
+import styles from './style.module.scss';
+import Error from '../../../public/assets/error.svg';
+import { PropsWithChildren } from 'react';
+
+interface AlertProps {
+  marginBottom: 0 | 1 | 1.5 | 2;
+}
+
+const Alert = ({ marginBottom, children }: PropsWithChildren<AlertProps>) => {
+  return (
+    <div className={styles.alert} style={{ marginBottom: `${marginBottom}rem` }}>
+      <div className="error">
+        <Error />
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default Alert;

client/src/components/Alert/style.module.scss

@@ -0,0 +1,20 @@
+@use '@/styles/vars.scss' as vars;
+
+.error {
+  flex: none;
+}
+.alert {
+  display: inline flex;
+  border-radius: 2rem;
+  gap: 0.5rem;
+  align-items: flex-start;
+  justify-content: flex-start;
+  color: vars.$btn-text;
+  // Corresponds to diamond-theme/label/small
+  font-weight: 500;
+  letter-spacing: 0.5px;
+
+  color: vars.$error-red;
+
+  flex-flow: row nowrap;
+}

client/src/components/DashboardStatus/index.tsx

@@ -37,8 +37,8 @@ const DashboardStatus = ({ status, timeline }: DashboardStatusProps) => {
           {status === 'not-started'
             ? 'Apply Now'
             : status === 'incomplete'
-            ? 'Continue Application'
-            : 'Edit Application'}
+              ? 'Continue Application'
+              : 'Edit Application'}
         </Button>
       )}
     </>

client/src/styles/globals.scss

@@ -39,6 +39,14 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+
+  &.link {
+    color: vars.$btn-primary;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 button {
   border: none;

client/src/styles/vars.scss

@@ -33,3 +33,5 @@ $side-padding-mobile: 1rem;
 
 $card-padding: 2rem;
 $card-padding-mobile: 1rem;
+
+$error-red: #ffb3b4;