forked from acouzens/open5gs
add initial login page. CSRF protection not applied
This commit is contained in:
parent
4db9608d1c
commit
b2f82acb9f
|
@ -1,11 +1,10 @@
|
||||||
export default class Session {
|
export default class Session {
|
||||||
constructor({ req } = {}) {
|
constructor({ req } = {}) {
|
||||||
this._session = {};
|
this._session = {};
|
||||||
this._user = {};
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (req) {
|
if (req) {
|
||||||
this.session = {
|
this._session = {
|
||||||
csrfToken: req.connection._httpMessage.locals._csrf
|
csrfToken: req.connection._httpMessage.locals._csrf
|
||||||
}
|
}
|
||||||
if (req.user) this._session.user = req.user;
|
if (req.user) this._session.user = req.user;
|
||||||
|
@ -17,6 +16,7 @@ export default class Session {
|
||||||
} catch(err) {
|
} catch(err) {
|
||||||
// Handle if error reading from localStorage or server state is safe to ignore
|
// Handle if error reading from localStorage or server state is safe to ignore
|
||||||
// (will just cause session data to be fetched by ajax)
|
// (will just cause session data to be fetched by ajax)
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,16 +47,22 @@ export default class Session {
|
||||||
|
|
||||||
async getSession(forceUpdate) {
|
async getSession(forceUpdate) {
|
||||||
if (typeof windows === 'undefined') {
|
if (typeof windows === 'undefined') {
|
||||||
return new Promise(resolve => { resolve(this._session); });
|
return new Promise(resolve => {
|
||||||
|
resolve(this._session);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (forceUpdate === true) this._removeLocalStore('session');
|
if (forceUpdate === true) {
|
||||||
|
this._session = {};
|
||||||
|
this._removeLocalStore('session');
|
||||||
|
}
|
||||||
|
|
||||||
this._session = this._getLocalStore('session');
|
this._session = this._getLocalStore('session');
|
||||||
if (this._session && Object.keys(this._session).length > 0) {
|
|
||||||
if (this._session.expires && this._session.expires > Date.now()) {
|
if (this._session && Object.keys(this._session).length > 0 && this._session.expires && this._session.expires > Date.now()) {
|
||||||
return new Promise(resolve => { resolve(this._session); });
|
return new Promise(resolve => {
|
||||||
}
|
resolve(this._session);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
@ -94,10 +100,11 @@ export default class Session {
|
||||||
let xhr = new window.XMLHTTPRequest();
|
let xhr = new window.XMLHTTPRequest();
|
||||||
xhr.open('POST', '/login', true);
|
xhr.open('POST', '/login', true);
|
||||||
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||||
xhr.onreadystatechange = () => {
|
xhr.onreadystatechange = async () => {
|
||||||
if (xhr.readyState === 4) {
|
if (xhr.readyState === 4) {
|
||||||
if (xhr.status != 200)
|
if (xhr.status != 200) {
|
||||||
reject(Error('XMLHttpRequest error: Error while attempting to login'));
|
reject(Error('XMLHttpRequest error: Error while attempting to login'));
|
||||||
|
}
|
||||||
|
|
||||||
return resolve(true);
|
return resolve(true);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Link from 'next/prefetch';
|
import Link from 'next/link';
|
||||||
import withSession from '../components/with-session';
|
import withSession from '../components/with-session';
|
||||||
|
|
||||||
const Index = ({ session, isLoggedIn }) => {
|
const Index = ({ session, isLoggedIn }) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1>Hello Worlds!</h1>
|
<h1>Hello Worlds!</h1>
|
||||||
|
{!isLoggedIn && <p><Link href='/login'><a>Login</a></Link></p>}
|
||||||
|
{isLoggedIn && <p><Link href='/logout'><a>Logout</a></Link></p>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,77 @@
|
||||||
|
import React from 'react';
|
||||||
|
import withSession from '../components/with-session';
|
||||||
|
import Session from '../components/session';
|
||||||
|
|
||||||
|
class Login extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
|
};
|
||||||
|
this.handleSubmit = this.handleSubmit.bind(this);
|
||||||
|
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||||
|
this.handlePasswordChange = this.handlePasswordChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleUsernameChange(event) {
|
||||||
|
this.setState({
|
||||||
|
username: event.target.value.trim(),
|
||||||
|
password: this.state.password
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handlePasswordChange(event) {
|
||||||
|
this.setState({
|
||||||
|
username: this.state.username,
|
||||||
|
password: event.target.value.trim()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleSubmit(evnet) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const session = new Session();
|
||||||
|
session
|
||||||
|
.login(this.username, this.password)
|
||||||
|
.then(() => {
|
||||||
|
this.props.url.push('/');
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let loginForm = <div />;
|
||||||
|
if (!this.props.session.user) {
|
||||||
|
loginForm = (
|
||||||
|
<div>
|
||||||
|
<form id='login' method='post' action='/login' onSubmit={this.handleSubmit}>
|
||||||
|
<input name='_csrf' type='hidden' value={this.props.session.csrfToken} />
|
||||||
|
<h3>Login</h3>
|
||||||
|
<p>
|
||||||
|
<label htmlFor='username'>Username</label><br />
|
||||||
|
<input name='username' type='text' id='username' value={this.state.username} onChange={this.handleUsernameChange} />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label htmlFor='password'>Password</label><br />
|
||||||
|
<input name='password' type='text' id='password' value={this.state.password} onChange={this.handlePasswordChange} />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<button id='submitButton' type='submit'>Login</button>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Authentication</h2>
|
||||||
|
{loginForm}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withSession(Login);
|
|
@ -47,9 +47,11 @@ exports.configure = ({
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
/*
|
||||||
server.use((req, res, next) => {
|
server.use((req, res, next) => {
|
||||||
csrf(req, res, next);
|
csrf(req, res, next);
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
passport.use(new Strategy((username, password, cb) => {
|
passport.use(new Strategy((username, password, cb) => {
|
||||||
models.User.findOne({ where: {username: username} }).then(user => {
|
models.User.findOne({ where: {username: username} }).then(user => {
|
||||||
|
|
Loading…
Reference in New Issue