mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-07 10:19:40 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added authentication step 1 / 2

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-09 14:34:59 -04:00
parent 72b813e849
commit d68ef08f6d
3 changed files with 84 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Client/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="./public/bluewave_favicon.ico" />
<link rel="icon" href="./bluewave_favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlueWave Uptime</title>
</head>

81
Client/src/Pages/Auth/Login.jsx
View File

@@ -1,12 +1,6 @@
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {
Box,
Divider,
FormControlLabel,
Stack,
Typography,
} from "@mui/material";
import { Box, Divider, FormControl, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import { credentials } from "../../Validation/validation";
import { login } from "../../Features/Auth/authSlice";
@@ -18,6 +12,7 @@ import Field from "../../Components/Inputs/Field";
import background from "../../assets/Images/background_pattern_decorative.png";
import Logo from "../../assets/icons/bwu-icon.svg?react";
import Mail from "../../assets/icons/mail.svg?react";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import "./index.css";
@@ -154,6 +149,72 @@ const Login = () => {
);
};
const StepOne = () => {
const submit = (event) => {
event.preventDefault();
const { error } = credentials.validate(
{ email: form.email },
{ abortEarly: false }
);
if (error) {
setErrors((prev) => ({ ...prev, email: error.details[0].message }));
createToast({ body: "Invalid email address." });
} else {
setStep(2);
}
};
return (
<>
<Stack gap={theme.gap.large} textAlign="center">
<Box>
<Typography component="h1">Log In</Typography>
<Typography>Enter your email address</Typography>
</Box>
<Box textAlign="left">
<form onSubmit={submit}>
<Field
type="email"
id="login-email-input"
label="Email"
isRequired={true}
placeholder="john.doe@domain.com"
autoComplete="email"
value={form.email}
onChange={handleChange}
error={errors.email}
/>
</form>
</Box>
<Stack direction="row" justifyContent="space-between">
<Button
level="secondary"
label="Back"
animate="slideLeft"
img={<ArrowBackRoundedIcon />}
onClick={() => setStep(0)}
sx={{
mb: theme.gap.medium,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {
mr: theme.gap.xs,
},
}}
/>
<Button
level="primary"
label="Continue"
onClick={submit}
disabled={errors.email && true}
sx={{ width: "30%" }}
/>
</Stack>
</Stack>
</>
);
};
return (
<Stack className="login-page" overflow="hidden">
<img
@@ -171,7 +232,8 @@ const Login = () => {
<Typography>BlueWave Uptime</Typography>
</Stack>
<Stack
width="fit-content"
width="100%"
maxWidth={600}
flex={1}
justifyContent="center"
p={theme.gap.xl}
@@ -186,12 +248,11 @@ const Login = () => {
padding: {
xs: theme.gap.large,
sm: theme.gap.xl,
lg: theme.gap.xxl,
},
},
}}
>
<LandingPage />
{step === 0 ? <LandingPage /> : step === 1 ? <StepOne /> : ""}
</Stack>
<Box textAlign="center" p={theme.gap.large}>
<Typography display="inline-block">Don't have an account? -</Typography>

16
Client/src/Pages/Auth/index.css
View File

@@ -107,6 +107,7 @@
font-weight: 600;
}
/* */
.login-page {
height: 100vh;
}
@@ -115,7 +116,6 @@
font-weight: 600;
color: var(--env-var-color-3);
}
.login-page p {
font-size: var(--env-var-font-size-large);
color: var(--env-var-color-2-light);
@@ -145,16 +145,24 @@
.login-page p + span:hover {
opacity: 1;
}
.login-page button:not(.MuiIconButton-root) {
.login-page button:not(.MuiIconButton-root),
.login-page .field h3.MuiTypography-root,
.login-page .field input,
.login-page .field .input-error {
font-size: var(--env-var-font-size-medium-plus);
height: 40px;
}
.login-page button:not(.MuiIconButton-root) {
border-radius: var(--env-var-radius-2);
line-height: 1;
}
.login-page button:not(.MuiIconButton-root),
.field .MuiInputBase-root:has(input) {
height: 40px;
}
.login-page > .MuiStack-root:nth-of-type(1) {
height: var(--env-var-nav-bar-height);
}
.login-page .background-pattern-svg {
top: 14%;
width: 100%;