Shon

client/src/App.tsx

@@ -1,10 +1,14 @@
 import './App.css'
 import LoginPage from './Pages/Login/Login'
+import RegisterPage from './Pages/Register/Register'
+import ChangePassword from './Pages/ChangePassword/ChangePassword'
+import System from './Pages/System/System'
+import ForgotPassword from './Pages/ForgotPassword/ForgotPassword'
 
 function App() {
 
   return (
-    <LoginPage />
+    <ForgotPassword />
   )
 }
 

client/src/Pages/ChangePassword/ChangePassword.style.ts

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import AppBackground from '../../assets/img/AppBackground.png';
+
+interface InputProps {
+  isInvalid?: boolean;
+}
+
+export const Container = styled.div`
+  background-image: url(${AppBackground});
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 400px;
+  width: 100%;
+  padding: 20px;
+  background: #fff;
+  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  text-align: center;
+`;
+
+export const Input = styled.input<InputProps>`
+  margin: 10px 0;
+  padding: 10px;
+  border: ${({ isInvalid }) =>
+    isInvalid ? "1px solid red" : "1px solid #ccc"};
+  border-radius: 5px;
+  outline: none;
+`;
+
+export const Button = styled.button`
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #4285f4;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #3c78d8;
+  }
+`;
+
+export const ErrorMessage = styled.p`
+  color: red;
+  margin-top: 5px;
+`;

client/src/Pages/ChangePassword/ChangePassword.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState } from "react";
+import {
+  Container,
+  Form,
+  Input,
+  Button,
+  ErrorMessage,
+} from "./ChangePassword.style";
+
+const ChangePassword: FC = () => {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmNewPassword, setConfirmNewPassword] = useState("");
+  const [isValid, setIsValid] = useState(true);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (newPassword !== confirmNewPassword) {
+      setIsValid(false);
+    } else {
+      // handle form submission
+    }
+  };
+
+  return (
+    <Container>
+      <Form onSubmit={handleSubmit}>
+        <Input
+          type="password"
+          placeholder="Current Password"
+          value={currentPassword}
+          onChange={(event) => setCurrentPassword(event.target.value)}
+          required
+        />
+        <Input
+          type="password"
+          placeholder="New Password"
+          value={newPassword}
+          onChange={(event) => setNewPassword(event.target.value)}
+          required
+        />
+        <Input
+          type="password"
+          placeholder="Confirm New Password"
+          value={confirmNewPassword}
+          onChange={(event) => setConfirmNewPassword(event.target.value)}
+          required
+          isInvalid={!isValid}
+        />
+        {!isValid && <ErrorMessage>Passwords do not match</ErrorMessage>}
+        <Button type="submit">Change Password</Button>
+      </Form>
+    </Container>
+  );
+};
+
+export default ChangePassword;

client/src/Pages/ForgotPassword/ForgotPassword.style.ts

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import AppBackground from '../../assets/img/AppBackground.png';
+
+export const Container = styled.div`
+  height: 100vh;
+  background-image: url(${AppBackground});
+  background-size: cover;
+  background-position: center;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+`;
+
+export const Title = styled.h1`
+  font-size: 24px;
+  margin-bottom: 20px;
+`;
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 50px;
+`;
+
+export const Label = styled.label`
+  font-size: 16px;
+  margin-bottom: 10px;
+`;
+
+export const Input = styled.input`
+  width: 50%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 20px;
+`;
+
+export const Button = styled.button`
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+`;
+
+export const ErrorMessage = styled.div`
+  color: red;
+  font-size: 14px;
+  margin-top: 10px;
+`;
+
+export const SuccessMessage = styled.div`
+  color: green;
+  font-size: 14px;
+  margin-top: 10px;
+`;
+
+export const FailureMessage = styled.div`
+  color: red;
+  font-size: 14px;
+  margin-top: 10px;
+`;

client/src/Pages/ForgotPassword/ForgotPassword.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+    Form,
+    Label,
+    Input,
+    Button,
+    ErrorMessage,
+    Container,
+    Title,
+    SuccessMessage,
+    FailureMessage
+} from './ForgotPassword.style';
+
+const ForgotPassword = () => {
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState('');
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!validateEmail(email)) {
+      setEmailError(true);
+      setSubmitStatus('failure');
+    } else {
+      setEmailError(false);
+      setSubmitStatus('success');
+      // code to submit the form
+    }
+  };
+
+  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+  };
+
+  const validateEmail = (email: string) => {
+    // email validation logic
+    return true;
+  };
+
+  return (
+    <Container>
+      <Title>Forgot Password</Title>
+      <Form onSubmit={handleSubmit}>
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          value={email}
+          onChange={handleEmailChange}
+          placeholder="Enter your email address"
+        />
+        {emailError && <ErrorMessage>Please enter a valid email</ErrorMessage>}
+        {submitStatus === 'success' && (
+          <SuccessMessage>Temporary password sent to your email. Please check your mailbox.</SuccessMessage>
+        )}
+        {submitStatus === 'failure' && (
+          <FailureMessage>The email you entered is not valid.</FailureMessage>
+        )}
+        <Button type="submit">Submit</Button>
+      </Form>
+    </Container>
+  );
+};
+
+export default ForgotPassword;

client/src/Pages/Login/Login.style.ts

@@ -1,7 +1,6 @@
 import styled, { css, keyframes } from 'styled-components';
 import AppBackground from '../../assets/img/AppBackground.png';
 
-
 export const FormContainer = styled.div`
   background-image: url(${AppBackground});
   background-position: center;
@@ -13,10 +12,10 @@ export const FormContainer = styled.div`
 `
 
 export const FormWrapper = styled.div`
+  display: 'flex';
   max-width: 400px;
   width: 100%;
   padding: 30px;
-  display: 'flex';
   background: #fff;
   box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
   border-radius: 10px;

client/src/Pages/Login/Login.tsx

@@ -44,7 +44,7 @@ const Login : FC = () => {
   return (
     <FormContainer>
       <FormWrapper>
-      <Lottie animationData={animationData} style={{ width: "70%", margin: "auto" }}/>
+      <Lottie animationData={animationData} style={{ width: "40%", margin: "auto", height: "30%" }}/>
         <AnimatedForm onSubmit={handleSubmit}>
           <FormInput
             type="text"

client/src/Pages/Register/Register.style.ts

@@ -0,0 +1,64 @@
+import styled, { css, keyframes } from 'styled-components';
+import AppBackground from '../../assets/img/AppBackground.png';
+
+interface InputProps {
+    isInvalid?: boolean;
+  }
+
+export const Container = styled.div`
+  background-image: url(${AppBackground});
+  background-position: center;
+  background-size: cover;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+export const PasswordRequirements = styled.p`
+  font-size: 14px;
+  margin-top: 5px;
+`;
+
+export const Form = styled.form`
+  display: flex;
+  max-width: 400px;
+  width: 100%;
+  padding: 20px;
+  background: #fff;
+  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+`
+
+export const Input = styled.input<InputProps>`
+  margin: 10px 0;
+  padding: 10px;
+  border: ${({ isInvalid }) => (isInvalid ? "1px solid red" : "1px solid #ccc")};
+  border-radius: 5px;
+  outline: none;
+`
+
+export const Button = styled.button`
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #4285f4;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #3c78d8;
+  }
+`
+
+export const ErrorMessage = styled.p`
+  color: red;
+  margin-top: 5px;
+`