Skip to content

Commit

Permalink
Merge pull request #17 from SETeam59/svruddar/login_page
Browse files Browse the repository at this point in the history 
Login Functionality
  • Loading branch information
@svruddarraju
svruddarraju authored Oct 19, 2023
2 parents ff6e2f1 + d36614c commit 06139b4
Show file tree
Hide file tree
Showing 2 changed files with 217 additions and 118 deletions.
66 changes: 66 additions & 0 deletions frontend/src/login/LoginPage.css
View file
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;
}
269 changes: 151 additions & 118 deletions frontend/src/login/LoginPage.js
View file
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;

0 comments on commit 06139b4

Please sign in to comment.