2019-08-27 06:17:32 +00:00
|
|
|
import React, { Component } from 'react';
|
2019-09-19 00:50:29 +00:00
|
|
|
import Cookies from 'universal-cookie';
|
2019-09-16 02:02:15 +00:00
|
|
|
|
2019-09-15 00:29:55 +00:00
|
|
|
import { connect } from 'react-redux';
|
2020-01-19 05:33:49 +00:00
|
|
|
import { userLogin, userSignup, loadCookieToState } from '../actions';
|
2019-08-27 06:17:32 +00:00
|
|
|
|
|
|
|
class AuthMenu extends Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props)
|
2019-08-28 01:01:42 +00:00
|
|
|
|
2019-10-17 00:12:14 +00:00
|
|
|
const cookies = new Cookies();
|
|
|
|
const datacookie = cookies.get('DataCookie');
|
|
|
|
|
|
|
|
if (datacookie) {
|
2019-10-19 17:16:29 +00:00
|
|
|
const data = JSON.parse(atob(datacookie.split('.')[1]))
|
|
|
|
if (data.exp > Math.floor(Date.now() / 1000)) {
|
2019-10-17 00:12:14 +00:00
|
|
|
this.state = {
|
|
|
|
user_authed: true,
|
|
|
|
where_in_auth_menu: "loggedIn",
|
|
|
|
username: data.username,
|
2020-01-20 23:56:40 +00:00
|
|
|
admin: data.admin,
|
|
|
|
verified: data.verified,
|
2019-10-17 00:12:14 +00:00
|
|
|
exp: data.exp,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.state = {
|
|
|
|
user_authed: false,
|
|
|
|
where_in_auth_menu: "requestUsername",
|
|
|
|
username: "",
|
|
|
|
password: "",
|
|
|
|
email: "",
|
|
|
|
exp: null,
|
|
|
|
}
|
|
|
|
}
|
2019-10-19 17:16:29 +00:00
|
|
|
} else {
|
2019-10-17 00:12:14 +00:00
|
|
|
this.state = {
|
|
|
|
user_authed: false,
|
|
|
|
where_in_auth_menu: "requestUsername",
|
|
|
|
username: "",
|
|
|
|
password: "",
|
|
|
|
email: "",
|
|
|
|
exp: null
|
|
|
|
}
|
2019-08-27 06:17:32 +00:00
|
|
|
}
|
2019-08-28 01:01:42 +00:00
|
|
|
|
2019-10-19 17:16:29 +00:00
|
|
|
this.props.loadCookieToState(this.state)
|
2019-10-17 00:12:14 +00:00
|
|
|
|
2019-09-07 02:18:14 +00:00
|
|
|
this.handleInputChange = this.handleInputChange.bind(this)
|
2019-09-15 00:03:41 +00:00
|
|
|
|
|
|
|
this.handleEmailRequestForAccountCreation = this.handleEmailRequestForAccountCreation.bind(this)
|
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
this.handlePasswordForLogin = this.handlePasswordForLogin.bind(this)
|
2019-09-15 00:03:41 +00:00
|
|
|
this.handlePasswordForAccountCreation = this.handlePasswordForAccountCreation.bind(this)
|
|
|
|
|
|
|
|
this.handleLogin = this.handleLogin.bind(this)
|
|
|
|
this.handleCreateAccount = this.handleCreateAccount.bind(this)
|
|
|
|
|
2019-08-28 00:53:20 +00:00
|
|
|
this.authMenu = this.authMenu.bind(this)
|
2019-08-27 06:17:32 +00:00
|
|
|
}
|
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
|
2019-09-07 02:18:14 +00:00
|
|
|
handleInputChange(event) {
|
|
|
|
const target = event.target;
|
|
|
|
const value = target.value;
|
|
|
|
const name = target.name;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
[name]: value
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-09-15 00:03:41 +00:00
|
|
|
handleEmailRequestForAccountCreation() {
|
|
|
|
this.setState(state => ({
|
|
|
|
where_in_auth_menu: "requestEmail",
|
|
|
|
auth_menu_visible: true,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2019-08-28 01:42:16 +00:00
|
|
|
handlePasswordForLogin() {
|
2019-08-27 06:17:32 +00:00
|
|
|
this.setState(state => ({
|
2019-08-28 01:42:16 +00:00
|
|
|
where_in_auth_menu: "requestPasswordForLogin",
|
2019-08-27 06:17:32 +00:00
|
|
|
auth_menu_visible: true,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2019-09-15 00:03:41 +00:00
|
|
|
handlePasswordForAccountCreation() {
|
2019-08-27 06:17:32 +00:00
|
|
|
this.setState(state => ({
|
2019-09-15 00:03:41 +00:00
|
|
|
where_in_auth_menu: "requestPasswordForCreation",
|
2019-08-27 06:17:32 +00:00
|
|
|
auth_menu_visible: true,
|
|
|
|
}));
|
|
|
|
}
|
2019-08-28 01:42:16 +00:00
|
|
|
|
2019-09-15 00:03:41 +00:00
|
|
|
handleLogin() {
|
2019-09-15 00:29:55 +00:00
|
|
|
this.props.userLogin(this.state.username, this.state.password)
|
2019-09-17 00:53:34 +00:00
|
|
|
.then(res => {
|
|
|
|
this.setState(state => ({
|
2019-10-19 17:40:46 +00:00
|
|
|
auth_menu_visible: false,
|
|
|
|
where_in_auth_menu: "loggedIn"
|
2019-09-17 00:53:34 +00:00
|
|
|
}))
|
2019-09-17 01:30:18 +00:00
|
|
|
this.props.close()
|
2019-09-17 00:53:34 +00:00
|
|
|
}
|
|
|
|
)
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
})
|
2019-08-27 06:17:32 +00:00
|
|
|
}
|
|
|
|
|
2019-09-15 00:03:41 +00:00
|
|
|
handleCreateAccount() {
|
2020-01-19 05:33:49 +00:00
|
|
|
this.props.userSignup(this.state.username, this.state.password, this.state.email)
|
|
|
|
.then(res => {
|
|
|
|
this.setState(state => ({
|
|
|
|
where_in_auth_menu: "loggedIn",
|
|
|
|
auth_menu_visible: false,
|
|
|
|
}))
|
|
|
|
this.props.close()
|
|
|
|
}
|
|
|
|
)
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
})
|
2019-09-15 00:03:41 +00:00
|
|
|
}
|
2019-08-28 01:42:16 +00:00
|
|
|
|
2019-08-28 00:53:20 +00:00
|
|
|
authMenu() {
|
2019-08-28 01:17:11 +00:00
|
|
|
if (!this.props.auth_menu_visible) {
|
2019-08-28 00:53:20 +00:00
|
|
|
return null;
|
|
|
|
}
|
2019-09-15 00:03:41 +00:00
|
|
|
const { username, password, email } = this.state;
|
2019-08-28 00:53:20 +00:00
|
|
|
switch(this.state.where_in_auth_menu) {
|
2019-08-28 01:42:16 +00:00
|
|
|
case 'requestUsername':
|
2019-08-28 00:53:20 +00:00
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
|
|
|
<div className="ui left icon input">
|
2019-09-07 02:18:14 +00:00
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="Username"
|
|
|
|
name="username"
|
2019-09-15 00:03:41 +00:00
|
|
|
value={username}
|
2019-09-07 02:18:14 +00:00
|
|
|
onChange={this.handleInputChange}
|
2019-09-07 02:38:28 +00:00
|
|
|
></input>
|
2019-08-28 00:53:20 +00:00
|
|
|
<i className="users icon"></i>
|
|
|
|
</div>
|
|
|
|
<div className="fluid ui buttons">
|
2019-09-15 00:03:41 +00:00
|
|
|
<button onClick={this.handleEmailRequestForAccountCreation} className="blue ui button">Sign Up</button>
|
2019-08-28 00:53:20 +00:00
|
|
|
<div className="or"></div>
|
2019-08-28 01:42:16 +00:00
|
|
|
<button onClick={this.handlePasswordForLogin} className="ui teal button">Sign In</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
case 'requestPasswordForLogin':
|
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
|
|
|
<div className="ui left icon input">
|
2019-09-07 02:18:14 +00:00
|
|
|
<input
|
2019-09-15 00:03:41 +00:00
|
|
|
type={"password"}
|
2019-09-07 02:18:14 +00:00
|
|
|
placeholder="Password"
|
2019-09-07 02:38:28 +00:00
|
|
|
name="password"
|
2019-09-15 00:03:41 +00:00
|
|
|
value={password}
|
2019-09-07 02:18:14 +00:00
|
|
|
onChange={this.handleInputChange}
|
2019-09-07 02:38:28 +00:00
|
|
|
></input>
|
2019-08-28 01:42:16 +00:00
|
|
|
<i className="lock icon"></i>
|
|
|
|
</div>
|
2019-09-15 00:03:41 +00:00
|
|
|
<button onClick={this.handleLogin} className="fluid ui positive button">Log In</button>
|
2019-08-28 01:42:16 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
case 'requestEmail':
|
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
|
|
|
<div className="ui left icon input">
|
2019-09-07 02:18:14 +00:00
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="email@address.tld"
|
2019-09-15 00:03:41 +00:00
|
|
|
name="email"
|
|
|
|
value={email}
|
2019-09-07 02:18:14 +00:00
|
|
|
onChange={this.handleInputChange}
|
2019-09-07 02:38:28 +00:00
|
|
|
></input>
|
2019-08-28 01:42:16 +00:00
|
|
|
<i className="mail icon"></i>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
2019-09-15 00:03:41 +00:00
|
|
|
<button onClick={this.handlePasswordForAccountCreation} className="fluid ui teal button">Next</button>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
|
|
|
)
|
2019-08-28 01:42:16 +00:00
|
|
|
case 'requestPasswordForCreation':
|
2019-08-28 00:53:20 +00:00
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
|
|
|
<div className="ui left icon input">
|
2019-09-15 00:03:41 +00:00
|
|
|
<input
|
|
|
|
type={"password"}
|
|
|
|
placeholder="Password"
|
|
|
|
name="password"
|
|
|
|
value={password}
|
|
|
|
onChange={this.handleInputChange}
|
2019-09-07 02:38:28 +00:00
|
|
|
></input>
|
2019-08-28 01:17:11 +00:00
|
|
|
<i className="lock icon"></i>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
2019-09-15 00:03:41 +00:00
|
|
|
<button onClick={this.handleCreateAccount} className="fluid ui positive button">Create Account!</button>
|
2019-08-28 00:53:20 +00:00
|
|
|
</div>
|
|
|
|
)
|
2019-10-19 17:40:46 +00:00
|
|
|
case 'loggedIn':
|
|
|
|
return (
|
|
|
|
<div className="ui menu dropdown" style={{display: "inline"}}>
|
2020-01-23 04:30:35 +00:00
|
|
|
{ this.state.admin &&
|
2019-10-19 17:40:46 +00:00
|
|
|
<div className="ui left icon input">
|
|
|
|
<i className="edit icon"></i>
|
2019-10-20 01:59:16 +00:00
|
|
|
<button onClick={() => { document.location.href = "/newpost/"; }} className="fluid ui positive button">Create Post!</button>
|
2019-10-19 17:40:46 +00:00
|
|
|
</div>
|
2020-01-23 04:30:35 +00:00
|
|
|
}
|
2020-01-23 04:19:20 +00:00
|
|
|
<div className="ui left icon input">
|
|
|
|
<i className="sign-out icon"></i>
|
|
|
|
<button onClick={() => {
|
|
|
|
var cookies = new Cookies();
|
|
|
|
cookies.remove('DataCookie', { path: '/', domain: process.env.REACT_APP_API_DOMAIN });
|
|
|
|
window.location.reload();
|
|
|
|
}} className="fluid ui negative button">Sign Out</button>
|
|
|
|
</div>
|
|
|
|
|
2019-10-19 17:40:46 +00:00
|
|
|
</div>
|
|
|
|
)
|
2019-08-28 00:53:20 +00:00
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-27 06:17:32 +00:00
|
|
|
render() {
|
|
|
|
return (
|
2019-08-28 00:53:20 +00:00
|
|
|
this.authMenu(this.state.auth_menu_visible)
|
2019-08-27 06:17:32 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-15 00:29:55 +00:00
|
|
|
export default connect(
|
2019-10-19 17:40:46 +00:00
|
|
|
null,
|
2020-01-19 05:33:49 +00:00
|
|
|
{ userLogin, userSignup, loadCookieToState }
|
2019-09-15 00:29:55 +00:00
|
|
|
)(AuthMenu);
|