Skip to content

Commit

Permalink
Registration form Updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@wethmiranasinghe
wethmiranasinghe committed Sep 6, 2024
1 parent 57156ba commit 547871c
Show file tree
Hide file tree
Showing 11 changed files with 359 additions and 92 deletions.
2 changes: 2 additions & 0 deletions front-end/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import './components/Gallery.css'


import Login from './Pages/Login';
import Registration from './Pages/Registration';
import Home from './Pages/Home';
import Team from './Pages/Team';
import News from './Pages/News';
Expand Down Expand Up @@ -39,6 +40,7 @@ function App() {
<nav> <Header/> </nav>
<Routes>
<Route path = 'login' element = {<Login />} />
<Route path='registration' element = {<Registration/>} />
<Route path = '/' element = {<Home />} />
<Route path = 'project overview' element = {<SharedLayoutProjectOverview />}>
<Route index element = {<SharedLayoutProjectOverview />}/>
Expand Down
98 changes: 47 additions & 51 deletions front-end/src/Pages/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React, { useState } from "react";
import { useLocation, useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import axios from "axios";
import style from './Login.module.css';
import cylcleLogo from '../assets/CYCLE-logo.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; // Import specific icons
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';

export let loggedInUser = { isLoggedIn: false, firstName: '', lastName: '' };
export let appUserRole="";
export let appUserRole = "";
export let userID = 0;

function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const navigate = useNavigate();
// const location = useLocation();

const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};
Expand All @@ -29,75 +29,71 @@ function Login() {
}).then((res) => {
console.log(res.data);

if (res.data.message === "Email does not exits") {
if (res.data.message === "Email does not exist") {
alert("Not a registered user. Email not found");
} else if (res.data.message === "Login Success") {
loggedInUser={
loggedInUser = {
isLoggedIn: true,
firstName: res.data.firstName,
lastName: res.data.lastName
};
userID = res.data.userID ;
if (res.data.userRole == "[USER]") {
appUserRole="USER";
}else if(res.data.userRole == "[ADMIN]"){
console.log(res.data.userRole)
appUserRole="ADMIN";
userID = res.data.userID;
if (res.data.userRole === "[USER]") {
appUserRole = "USER";
} else if (res.data.userRole === "[ADMIN]") {
appUserRole = "ADMIN";
}
navigate('/');
} else {
alert("Login Failed! Password does not match!");
}
}, fail => {
console.error(fail); // Error!
});
} catch (err) {
alert(err);
}
}

const handleRegister = () => {
navigate('/registration');
};

return (
<div className={style["LoginCard"]}>
<div className="container">
<img src={cylcleLogo} alt="Cycle Logo" className={style["CycleLogo"]} />
<div className="row">
<div className="col-sm-6">
<form>
<div className="form-group">
<label>Email</label>
<input type="email"
className="form-control"
id="email"
placeholder="Enter Email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
</div>

<div className="form-group">
<label>Password</label>
<div className={style["input-group"]}>
<input type={showPassword ? "text" : "password"}
className="form-control"
id="password"
placeholder="Enter Password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<div className={style["input-group-append"]}>
<span className={style["input-group-text"]} onClick={togglePasswordVisibility}>
<FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
</span>
</div>
</div>
</div>
<img src={cylcleLogo} alt="Cycle Logo" className={style["CycleLogo"]} />
<form onSubmit={login}>
<div className="form-group">
<input
type="email"
placeholder="Enter Email"
value={email}
onChange={(event) => setEmail(event.target.value)}
required
/>
</div>

<button type="submit" className="btn btn-primary" onClick={login}>Login</button>

</form>
<div className={style["input-group"]}>
<input
type={showPassword ? "text" : "password"}
placeholder="Enter Password"
value={password}
onChange={(event) => setPassword(event.target.value)}
required
/>
<div className={style["input-group-append"]}>
<span className={style["input-group-text"]} onClick={togglePasswordVisibility}>
<FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
</span>
</div>
</div>
</div>

<button type="submit">Login</button>

{/* Register now link */}
<p className={style["register-link"]}>
Don't have an account?
<button type="button" className="btn btn-link" onClick={handleRegister}>Register Now</button>
</p>
</form>
</div>
);
}
Expand Down
92 changes: 55 additions & 37 deletions front-end/src/Pages/Login.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,45 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 50px;
padding: 50px;
width: 300px;
height: 280px;
height: 350px; /* Increased height to fit the form properly */
margin: auto;
border: 1px solid hsl(0, 0%, 80%);
margin-top: 20px;
margin-bottom: 40px;
border-radius: 10px;
box-shadow: #00448d;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.CycleLogo {
width: 200px;
margin-bottom: 20px;
}

.LoginCard input {
width: 290px;
width: 100%;
height: 45px;
padding: 10px;
margin-bottom: 20px;
margin-bottom: 15px;
background-color: #e3f0f6;
color: black;
border: 1px solid #dddddd;
border-radius: 4px;
box-sizing: border-box;
}

.LoginCard button {
padding: 2px 4px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #00448d;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 120px;
height: 42px;
font-weight: 600;
text-decoration: none;
/* font:#ffffff; */
}

.LoginCard button:hover {
background-color: #0056b3;
color: #ffffff;
/* Autofill background color */
.LoginCard input:-webkit-autofill {
background-color: #e3f0f6 !important;
color: black !important; /* Set text color */
-webkit-box-shadow: 0 0 0px 1000px #e3f0f6 inset;
box-shadow: 0 0 0px 1000px #e3f0f6 inset; /* For other browsers */
}

.CycleLogo {
width: 250px;
margin-bottom: 0;
margin-top: 2em;
/* Adjust font color for autofill */
.LoginCard input:-webkit-autofill {
-webkit-text-fill-color: black !important; /* Set text color */
}

.input-group {
Expand All @@ -70,7 +56,7 @@
right: 10px;
height: 100%;
display: flex;
margin-bottom: 20px;
margin-bottom: 15px;
align-items: center;
justify-content: center;
padding: 10px 10px;
Expand All @@ -82,6 +68,38 @@
cursor: pointer;
}

.input-group-text .svg-inline--fa {
margin: 0;
}

.LoginCard button {
width: 100%;
height: 42px;
margin-top: 10px;
background-color: #00448d;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
font-weight: 600;
}

.LoginCard button:hover {
background-color: #0056b3;
}

.register-link {
text-align: center;
margin-top: 10px;
}

.register-link .btn {
padding: 0;
color: #00448d;
background: none;
border: none;
cursor: pointer;
font-size: 14px;
}

.register-link .btn:hover {
text-decoration: underline;
}
Loading

0 comments on commit 547871c

Please sign in to comment.