Skip to content

Commit

Permalink
Merge pull request #19 from kingan1/login_frontend
Browse files Browse the repository at this point in the history
Login frontend for login and signup functionality
  • Loading branch information
kingan1 authored Nov 24, 2021
2 parents 568ddce + b6b7e23 commit fba48a2
Show file tree
Hide file tree
Showing 11 changed files with 252 additions and 14 deletions.
2 changes: 2 additions & 0 deletions backend/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ def health_check():
@app.route("/users/signup", methods=['POST'])
def sign_up():
try:
# print(request.data)
data = json.loads(request.data)
print(data)
try:
_ = data['username']
_ = data['password']
Expand Down
17 changes: 17 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"bootstrap": "^4.6.0",
"d3": "7.0.4",
"jquery": "3.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.4",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1",
"d3": "7.0.4",
"jquery": "3.6.0"
"web-vitals": "^1.0.1"
},
"scripts": {
"pre-deploy": "npm run build",
Expand Down
55 changes: 49 additions & 6 deletions frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,72 @@ import React from 'react';
import Sidebar from './sidebar/Sidebar'
import ApplicationPage from './application/ApplicationPage'
import SearchPage from './search/SearchPage'
import LoginPage from './login/LoginPage'


export default class App extends React.Component {
constructor(props){
super(props)
let mapRouter = {
'SearchPage': <SearchPage/>,
'ApplicationPage' : <ApplicationPage/>
'ApplicationPage' : <ApplicationPage/>,
'LoginPage': <LoginPage/>
}
this.state ={
currentPage: <ApplicationPage/>,
mapRouter: mapRouter
currentPage: <LoginPage/>,
mapRouter: mapRouter,
sidebar: false,
}
this.sidebarHandler = this.sidebarHandler.bind(this);
};

sidebarHandler = () => {
this.setState({
currentPage: this.state.mapRouter['ApplicationPage'],
sidebar: true
})
}

handleLogout = () => {
this.setState({
sidebar:false
})
}

switchPage(pageName){
this.setState({
currentPage: this.state.mapRouter[pageName]
})
}

render() {
let app = (<div className="main-page">
<Sidebar switchPage={this.switchPage.bind(this)}/>
var app;
// console.log(this.state.sidebar)
if(this.state.sidebar){
app = (<div className="main-page">
<Sidebar switchPage={this.switchPage.bind(this)}/>
<div className="main">
<div className="content">
<div className="">
<h1 className="text-center">My applications</h1>
{/* <span className="btn-icon ">
<button className="btn btn-danger btn-icon"><i className="fas fa-plus"></i>&nbsp;New</button>
</span> */}
</div>
{this.state.currentPage}
<button style={{position: 'absolute',
bottom: '3vh',
left:'35vw'}}
onClick={this.handleLogout}>Logout

</button>
</div>
</div>
</div>
)
}
else{
app = (<div className="main-page">
<div className="main">
<div className="content">
<h1 className="text-center" style={{padding: 0.4 + 'em'}}>My applications</h1>
Expand All @@ -37,11 +79,12 @@ export default class App extends React.Component {
<button className="btn btn-danger btn-icon"><i className="fas fa-plus"></i>&nbsp;New</button>
</span> */}
</div>
{this.state.currentPage}
<LoginPage side={this.sidebarHandler}/>
</div>
</div>
</div>
)
}
return app;
}
}
19 changes: 19 additions & 0 deletions frontend/src/api/handler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import axios from 'axios';

export default function fetch(options) {
return new Promise((resolve, reject) => {
axios({
url: 'http://localhost:5000' + options.url,
method: options.method,
params: options.params,
data: options.body,
}).then((response) => {
resolve(response.data)
}).catch((e) => {
if (e.status === 401) {
window.location.href = "/";
}
reject(e);
})
})
}
18 changes: 18 additions & 0 deletions frontend/src/api/loginHandler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import fetch from './handler';

export const getToken = (params) => {
// console.log(params)
return fetch({
method: 'POST',
url: '/users/login',
body: params,
})
};

export const signUp = (params) => {
return fetch({
method: 'POST',
url: '/users/signup',
body: params
})
}
130 changes: 130 additions & 0 deletions frontend/src/login/LoginPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import React, { Component } from 'react';
import { Tabs, Tab } from 'react-bootstrap';
import { getToken, signUp } from '../api/loginHandler';

export default class LoginPage extends Component{

constructor(props){
super(props);

this.state = {

}
}

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 "Wrong username or password"
this.props.side()
}).catch((error) => {
alert("Error while login ! Wrong username or password");
})

}

handleSignup = (fullname, uname, pwd) => {
console.log("Signup click");
let obj = {
username: uname,
password: pwd,
fullName: fullname
}
//console.log(obj)
signUp(obj).then((res) => {
//console.log(res)
}).catch((error) => {
alert("Error while signing up !");
})

}

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>

<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" id="pwd" placeholder="Enter password" />
</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>

<div className="form-group">
<label>Usename</label>
<input type="text" className="form-control" id="suname" placeholder="Enter username" />
</div>

<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" id="spwd" placeholder="Enter password" />
</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>

)
}

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'
};
}
4 changes: 2 additions & 2 deletions frontend/src/search/SearchCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default class SearchCard extends Component {
}

submitAction () {
console.log('hit!')
alert("Submitted !");
this.state.handleCloseEditModal()
const application = {
id: this.state.id,
Expand All @@ -32,7 +32,7 @@ export default class SearchCard extends Component {
date: this.state.date,
status: this.state.class
}
console.log(application)
//console.log(application)
// call parent function to handle data change
this.state.submitFunc(application)
}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/search/SearchPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default class SearchPage extends Component {
addToWaitlist (job) {
const newAddedList = this.state.addedList
newAddedList.push(job.id)
console.log(job)
//console.log(job)

$.ajax({
url: 'http://localhost:5000/application',
Expand All @@ -101,6 +101,7 @@ export default class SearchPage extends Component {
contentType: 'application/json',
success: (msg) => {
console.log(msg)
alert("Added item to the Waitlist !");
}
})
this.setState({
Expand Down
9 changes: 8 additions & 1 deletion frontend/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2642,6 +2642,13 @@
"resolved" "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz"
"version" "4.3.5"

"axios@^0.24.0":
"integrity" "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA=="
"resolved" "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz"
"version" "0.24.0"
dependencies:
"follow-redirects" "^1.14.4"

"axobject-query@^2.2.0":
"integrity" "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
"resolved" "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
Expand Down Expand Up @@ -5592,7 +5599,7 @@
"inherits" "^2.0.3"
"readable-stream" "^2.3.6"

"follow-redirects@^1.0.0":
"follow-redirects@^1.0.0", "follow-redirects@^1.14.4":
"integrity" "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
"resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz"
"version" "1.14.5"
Expand Down
2 changes: 1 addition & 1 deletion shutdown.sh
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
#! /bin/bash
kill $(ps -A | grep flask | awk '{print $1}')
kill $(ps -a | grep flask | awk '{print $1}')

0 comments on commit fba48a2

Please sign in to comment.