mirror of
https://github.com/OpenFactorioServerManager/factorio-server-manager.git
synced 2024-12-29 02:57:24 +02:00
added logout, improved login and logout ui
This commit is contained in:
parent
345bdc6688
commit
1862d43bfb
5
app/dist/dist/css/AdminLTE.css
vendored
5
app/dist/dist/css/AdminLTE.css
vendored
@ -4918,3 +4918,8 @@ table.text-center th {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.col-centered {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
12
app/dist/dist/css/factorio-server-manager.css
vendored
Normal file
12
app/dist/dist/css/factorio-server-manager.css
vendored
Normal 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;
|
||||
}
|
@ -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:// -->
|
||||
|
2
auth.go
2
auth.go
@ -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 {
|
||||
|
@ -649,7 +649,7 @@ func GetCurrentLogin(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
return
|
||||
}
|
||||
fmt.Println(user, err)
|
||||
|
||||
resp.Success = true
|
||||
resp.Data = user
|
||||
|
||||
|
2
main.go
2
main.go
@ -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)
|
||||
}
|
||||
|
@ -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(
|
||||
|
@ -25,4 +25,9 @@ class Header extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
username: React.PropTypes.string.isRequired,
|
||||
loggedIn: React.PropTypes.bool.isRequired,
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
@ -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,
|
||||
}
|
||||
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user