forked from kingan1/application-tracking-system
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from SETeam59/svruddar/login_page
Login Functionality
- Loading branch information
Showing
2 changed files
with
217 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
/* Apply styles to the login page wrapper */ | ||
|
||
.auth-wrapper { | ||
display: flex; | ||
justify-content: center; | ||
flex-direction: column; | ||
text-align: left; | ||
margin-top: 5vh; | ||
} | ||
|
||
/* Apply styles to the inner container */ | ||
|
||
.auth-inner { | ||
width: 450px; | ||
margin: auto; | ||
background: #ffffff; | ||
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); | ||
padding: 40px 55px 45px 55px; | ||
border-radius: 15px; | ||
transition: all 0.3s; | ||
} | ||
|
||
/* Style the navigation tabs */ | ||
|
||
.nav-tabs { | ||
margin-bottom: 1rem; | ||
} | ||
|
||
/* Style individual tab links */ | ||
|
||
.nav-link { | ||
cursor: pointer; | ||
} | ||
|
||
/* Style the active tab */ | ||
|
||
.active { | ||
background-color: #007bff; | ||
color: #fff; | ||
} | ||
|
||
/* Add additional styles for form elements, if needed */ | ||
|
||
.form-group { | ||
margin-bottom: 1rem; | ||
} | ||
|
||
/* Customize the form inputs */ | ||
|
||
.form-control { | ||
width: 100%; | ||
padding: 0.375rem 0.75rem; | ||
font-size: 1rem; | ||
border: 1px solid #ccc; | ||
border-radius: 0.25rem; | ||
} | ||
|
||
/* Customize the login and signup buttons */ | ||
|
||
.btn-secondary { | ||
background-color: #007bff; | ||
color: #fff; | ||
border: none; | ||
padding: 0.5rem 1rem; | ||
cursor: pointer; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,132 +1,165 @@ | ||
import React, { Component } from 'react'; | ||
import { Tabs, Tab } from 'react-bootstrap'; | ||
import { getToken, signUp, storeToken } from '../api/loginHandler'; | ||
import React, { useState } from "react"; | ||
import "./LoginPage.css"; // Import the local CSS file | ||
import $ from "jquery"; | ||
|
||
export default class LoginPage extends Component{ | ||
import { getToken, signUp, storeToken } from "../api/loginHandler"; | ||
|
||
constructor(props){ | ||
super(props); | ||
const LoginPage = ({ side }) => { | ||
const [activeTab, setActiveTab] = useState("login"); | ||
const [loginData, setLoginData] = useState({ username: "", password: "" }); | ||
const [signupData, setSignupData] = useState({ | ||
fullName: "", | ||
username: "", | ||
password: "", | ||
}); | ||
|
||
this.state = { | ||
/** Users can switch between the "Login" and "Signup" tabs */ | ||
const handleTabChange = (tabKey) => { | ||
setActiveTab(tabKey); | ||
}; | ||
|
||
} | ||
} | ||
/** Login functionality called when button is clicked */ | ||
const handleLogin = () => { | ||
console.log("Login click"); | ||
getToken(loginData) | ||
.then((res) => { | ||
console.log("", JSON.stringify(res)); | ||
if (res["error"]) throw new Error("Wrong username or password"); | ||
storeToken(res); | ||
side(); | ||
}) | ||
.catch((error) => { | ||
console.log(error); | ||
alert("Error while logging in! Wrong username or password"); | ||
}); | ||
}; | ||
|
||
handleLogin = (uname, pwd) =>{ | ||
console.log("Login click"); | ||
let obj = { | ||
username: uname, | ||
password: pwd | ||
} | ||
//console.log(obj) | ||
getToken(obj).then((res) => { | ||
console.log(res) | ||
if(res['error']) | ||
throw new Error("Wrong username or password"); | ||
storeToken(res) | ||
this.props.side() | ||
}).catch((error) => { | ||
console.log(error) | ||
alert("Error while login ! Wrong username or password"); | ||
}) | ||
|
||
} | ||
/** Signup functionality called when button is clicked */ | ||
const handleSignup = () => { | ||
console.log("Signup click"); | ||
signUp(signupData) | ||
.then((res) => { | ||
alert("Sign up successfull! Proceed to Login"); | ||
}) | ||
.catch((error) => { | ||
alert("Error while signing up!"); | ||
}); | ||
}; | ||
|
||
handleSignup = (fullname, uname, pwd) => { | ||
console.log("Signup click"); | ||
let obj = { | ||
username: uname, | ||
password: pwd, | ||
fullName: fullname | ||
} | ||
//console.log(obj) | ||
signUp(obj).then((res) => { | ||
alert("Sign up successfull! Proceed to Login"); | ||
}).catch((error) => { | ||
alert("Error while signing up !"); | ||
}) | ||
|
||
} | ||
/** Changing HTML depending on which of login and signup is active */ | ||
return ( | ||
<div className="auth-wrapper"> | ||
<div className="auth-inner"> | ||
<ul className="nav nav-tabs"> | ||
<li className={`nav-item ${activeTab === "login" ? "active" : ""}`}> | ||
<button | ||
className="nav-link" | ||
onClick={() => handleTabChange("login")} | ||
> | ||
Login | ||
</button> | ||
</li> | ||
<li className={`nav-item ${activeTab === "signup" ? "active" : ""}`}> | ||
<button | ||
className="nav-link" | ||
onClick={() => handleTabChange("signup")} | ||
> | ||
Signup | ||
</button> | ||
</li> | ||
</ul> | ||
|
||
render() { | ||
return( | ||
<div className="auth-wrapper" style={this.authWrapper}> | ||
<div className="auth-inner" style={this.authInner}> | ||
{/* <div className="logindiv" style={this.divStyle}> */} | ||
<Tabs defaultActiveKey="login" id="logintab" className="mx-auto" style={{paddingLeft: '25%'}}> | ||
<Tab eventKey="login" title="Login"> | ||
<form> | ||
<div className="form-group"> | ||
<label>Username</label> | ||
<input type="text" className="form-control" id="uname" placeholder="Enter username" /> | ||
</div> | ||
{activeTab === "login" && ( | ||
<form> | ||
<div className="form-group"> | ||
<label>Username</label> | ||
<input | ||
type="text" | ||
className="form-control" | ||
placeholder="Enter username" | ||
value={loginData.username} | ||
onChange={(e) => | ||
setLoginData({ ...loginData, username: e.target.value }) | ||
} | ||
/> | ||
</div> | ||
|
||
<div className="form-group"> | ||
<label>Password</label> | ||
<input type="password" className="form-control" id="pwd" placeholder="Enter password" /> | ||
</div> | ||
<div className="form-group"> | ||
<label>Password</label> | ||
<input | ||
type="password" | ||
className="form-control" | ||
placeholder="Enter password" | ||
value={loginData.password} | ||
onChange={(e) => | ||
setLoginData({ ...loginData, password: e.target.value }) | ||
} | ||
/> | ||
</div> | ||
|
||
<button type="submit" onClick={(e) =>{ | ||
e.preventDefault(); | ||
let uname = document.querySelector("#uname").value | ||
let pwd = document.querySelector("#pwd").value | ||
this.handleLogin(uname, pwd) | ||
}} | ||
className="btn btn-secondary btn-block">Login</button> | ||
</form> | ||
</Tab> | ||
<Tab eventKey="signup" title="Signup"> | ||
<form> | ||
<div className="form-group"> | ||
<label>Full name</label> | ||
<input type="text" className="form-control" id="fullname" placeholder="Full name" /> | ||
</div> | ||
<button | ||
type="button" | ||
onClick={handleLogin} | ||
className="btn btn-secondary btn-block" | ||
> | ||
Login | ||
</button> | ||
</form> | ||
)} | ||
|
||
<div className="form-group"> | ||
<label>Username</label> | ||
<input type="text" className="form-control" id="suname" placeholder="Enter username" /> | ||
</div> | ||
{activeTab === "signup" && ( | ||
<form> | ||
<div className="form-group"> | ||
<label>Full name</label> | ||
<input | ||
type="text" | ||
className="form-control" | ||
placeholder="Full name" | ||
value={signupData.fullName} | ||
onChange={(e) => | ||
setSignupData({ ...signupData, fullName: e.target.value }) | ||
} | ||
/> | ||
</div> | ||
|
||
<div className="form-group"> | ||
<label>Password</label> | ||
<input type="password" className="form-control" id="spwd" placeholder="Enter password" /> | ||
</div> | ||
<div className="form-group"> | ||
<label>Username</label> | ||
<input | ||
type="text" | ||
className="form-control" | ||
placeholder="Enter username" | ||
value={signupData.username} | ||
onChange={(e) => | ||
setSignupData({ ...signupData, username: e.target.value }) | ||
} | ||
/> | ||
</div> | ||
|
||
<button type="submit" onClick={(e) =>{ | ||
e.preventDefault(); | ||
let name = document.querySelector("#fullname").value | ||
let uname = document.querySelector("#suname").value | ||
let pwd = document.querySelector("#spwd").value | ||
this.handleSignup(name, uname, pwd) | ||
}} className="btn btn-secondary btn-block">Sign Up</button> | ||
</form> | ||
</Tab> | ||
</Tabs> | ||
</div> | ||
<div className="form-group"> | ||
<label>Password</label> | ||
<input | ||
type="password" | ||
className="form-control" | ||
placeholder="Enter password" | ||
value={signupData.password} | ||
onChange={(e) => | ||
setSignupData({ ...signupData, password: e.target.value }) | ||
} | ||
/> | ||
</div> | ||
|
||
) | ||
} | ||
|
||
divStyle = { | ||
width: '50vw', | ||
}; | ||
|
||
authWrapper = { | ||
display: 'flex', | ||
justifyContent: 'center', | ||
flexDirection: 'column', | ||
textAlign: 'left', | ||
marginTop: '5vh', | ||
}; | ||
|
||
authInner = { | ||
width: '450px', | ||
margin: 'auto', | ||
background: '#ffffff', | ||
boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)', | ||
padding: '40px 55px 45px 55px', | ||
borderRadius: '15px', | ||
transition: 'all .3s' | ||
}; | ||
} | ||
<button | ||
type="button" | ||
onClick={handleSignup} | ||
className="btn btn-secondary btn-block" | ||
> | ||
Sign Up | ||
</button> | ||
</form> | ||
)} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default LoginPage; |