forked from Team-Glare/application-tracking-system
-
Notifications
You must be signed in to change notification settings - Fork 6
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 #19 from kingan1/login_frontend
Login frontend for login and signup functionality
- Loading branch information
Showing
11 changed files
with
252 additions
and
14 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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
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,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); | ||
}) | ||
}) | ||
} |
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,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 | ||
}) | ||
} |
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,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' | ||
}; | ||
} |
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
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
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
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,2 +1,2 @@ | ||
#! /bin/bash | ||
kill $(ps -A | grep flask | awk '{print $1}') | ||
kill $(ps -a | grep flask | awk '{print $1}') |