added logout, improved login and logout ui

This commit is contained in:
majormjr 2016-04-30 17:48:45 -04:00
parent 345bdc6688
commit 1862d43bfb
11 changed files with 116 additions and 59 deletions

View File

@ -4918,3 +4918,8 @@ table.text-center th {
white-space: normal !important;
}
}
.col-centered {
float: none;
margin: 0 auto;
}

View File

@ -0,0 +1,12 @@
/* Custom CSS for Factorio Server Manager */
.col-centered {
float: none;
margin: 0 auto;
}
.absolute-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

View File

@ -16,6 +16,8 @@
<link rel="stylesheet" href="./dist/dist/css/AdminLTE.css">
<!-- AdminLTE Skins. -->
<link rel="stylesheet" href="./dist/dist/css/skins/skin-blue.css">
<!-- Extra CSS tweaks -->
<link rel="stylesheet" href="./dist/dist/css/factorio-server-manager.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

View File

@ -47,7 +47,7 @@ func (auth *AuthHTTP) createRoles() {
}
}
func (auth *AuthHTTP) createUser(username, password, role, email string) error {
func (auth *AuthHTTP) createInitialUser(username, password, role, email string) error {
user := httpauth.UserData{Username: username, Role: role, Email: email}
err := auth.backend.SaveUser(user)
if err != nil {

View File

@ -649,7 +649,7 @@ func GetCurrentLogin(w http.ResponseWriter, r *http.Request) {
}
return
}
fmt.Println(user, err)
resp.Success = true
resp.Data = user

View File

@ -79,7 +79,7 @@ func main() {
Auth = initAuth()
Auth.createAuthDb(config.DatabaseFile)
Auth.createRoles()
err := Auth.createUser(config.Username, config.Password, "admin", "")
err := Auth.createInitialUser(config.Username, config.Password, "admin", "")
if err != nil {
log.Printf("Error creating user: %s", err)
}

View File

@ -18,6 +18,7 @@ class App extends React.Component {
serverStatus: {},
saves: [],
loggedIn: false,
username: "",
}
}
@ -31,14 +32,13 @@ class App extends React.Component {
}
checkLogin() {
console.log(this.state);
$.ajax({
url: "/api/user/status",
dataType: "json",
success: (data) => {
console.log(data.success);
if (data.success === true) {
this.setState({loggedIn: true})
this.setState({loggedIn: true,
username: data.data.Username})
}
}
})
@ -87,7 +87,10 @@ class App extends React.Component {
if (this.state.loggedIn) {
var resp =
<div>
<Header />
<Header
username={this.state.username}
loggedIn={this.state.loggedIn}
/>
<Sidebar
serverStatus={this.facServStatus}
@ -101,18 +104,21 @@ class App extends React.Component {
serverStatus: this.state.serverStatus,
getStatus: this.getStatus,
saves: this.state.saves,
getSaves: this.getSaves}
getSaves: this.getSaves,
username: this.state.username}
)}
<Footer />
<HiddenSidebar
serverStatus={this.state.serverStatus}
/>;
username={this.state.username}
loggedIn={this.state.loggedIn}
checkLogin={this.checkLogin}
/>
</div>
} else {
var resp = <div><p>Not Logged in</p></div>;
console.log(resp);
}
return(

View File

@ -25,4 +25,9 @@ class Header extends React.Component {
}
}
Header.propTypes = {
username: React.PropTypes.string.isRequired,
loggedIn: React.PropTypes.bool.isRequired,
}
export default Header

View File

@ -1,16 +1,37 @@
import React from 'react';
import {Link} from 'react-router';
import {Link, browserHistory} from 'react-router';
class HiddenSidebar extends React.Component {
constructor(props) {
super(props);
this.onLogout = this.onLogout.bind(this);
}
capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
onLogout(e) {
e.preventDefault();
$.ajax({
url: "/api/logout",
dataType: "json",
success: (resp) => {
alert(resp)
}
});
// Wait for 1 second for logout callback to complete
setTimeout(() => {
browserHistory.push("/login");
}, 1000);
}
render() {
var username;
if (this.props.loggedIn) {
username = <p>{this.props.username}</p>
}
return(
<aside className="control-sidebar control-sidebar-dark">
<ul className="control-sidebar-menu">
@ -21,12 +42,13 @@ class HiddenSidebar extends React.Component {
</Link>
</li>
<li>
<a href="/api/logout">
<a onClick={this.onLogout}>
<i className="menu-icon fa fa-lock bg-red"></i>
Login
</a>
</li>
</ul>
Current user: {username}
<div className="table-responsive">
<table className="table table-border">
<thead>
@ -53,6 +75,9 @@ class HiddenSidebar extends React.Component {
HiddenSidebar.propTypes = {
serverStatus: React.PropTypes.object.isRequired,
username: React.PropTypes.string.isRequired,
loggedIn: React.PropTypes.bool.isRequired,
checkLogin: React.PropTypes.func.isRequired,
}

View File

@ -13,7 +13,6 @@ class LoginContent extends React.Component {
loginUser(e) {
e.preventDefault();
console.log(this)
let user = {
username: this.refs.username.value,
password: this.refs.password.value,
@ -26,62 +25,65 @@ class LoginContent extends React.Component {
data: JSON.stringify(user),
success: (resp) => {
console.log(resp);
if (resp.success === true) {
browserHistory.push("/")
}
browserHistory.push("/");
}
})
});
setTimeout(() => {
browserHistory.push("/");
}, 1000);
}
render() {
return(
<div className="container center-block">
<div className="container ">
<div className="row">
<div className="col-xs-6">
<div className="center-block">
<section className="content-header">
<h1>
Login
<small>Login to manage Factorio</small>
</h1>
</section>
<div className="absolute-center is-responsive">
<div className="col-centered col-md-4 col-mod-offset-2">
<div className="center-block">
<section className="content-header">
<h1>
Factorio Server Manager
<small>Login to manage Factorio</small>
</h1>
</section>
<section className="content">
<div className="row">
<div className="login-box-body">
<section className="content">
<div className="row">
<div className="login-box-body">
<form onSubmit={this.loginUser}>
<div className="form-group has-feedback">
<input type="text" ref="username" className="form-control" placeholder="Username" />
<span className="fa fa-envelope form-control-feedback"></span>
</div>
<div className="form-group has-feedback">
<input type="password" ref="password" className="form-control" placeholder="Password" />
<span className="fa fa-lock form-control-feedback"></span>
</div>
<div className="row">
<div className="col-xs-8">
<div className="checkbox">
<label className="">
<div className="" aria-checked="false" aria-disabled="false" style={{position: "relative"}}>
<input type="checkbox"/>
</div> Remember Me
</label>
<form onSubmit={this.loginUser}>
<div className="form-group has-feedback">
<input type="text" ref="username" className="form-control" placeholder="Username" />
<span className="fa fa-envelope form-control-feedback"></span>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-4">
<button type="submit" className="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
</div>
</form>
<div className="form-group has-feedback">
<input type="password" ref="password" className="form-control" placeholder="Password" />
<span className="fa fa-lock form-control-feedback"></span>
</div>
<div className="row">
<div className="col-xs-8">
<div className="checkbox">
<label className="">
<div className="" aria-checked="false" aria-disabled="false" style={{position: "relative"}}>
<input type="checkbox"/>
</div> Remember Me
</label>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-4">
<button type="submit" className="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
</div>
</form>
<a href="#">I forgot my password</a><br />
</div>
<a href="#">I forgot my password</a><br />
</div>
</div>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
</div>

View File

@ -162,6 +162,7 @@ class ServerCtl extends React.Component {
</div>
<hr />
<label>Select Save File</label>
<select ref="savefile" className="form-control">
{this.props.saves.map( (save, i) => {
return(
@ -170,7 +171,6 @@ class ServerCtl extends React.Component {
})}
</select>
<label>Select Save File</label>
</div>
<div className="box box-success">