mirror of
https://github.com/OpenFactorioServerManager/factorio-server-manager.git
synced 2025-02-09 13:47:17 +02:00
moved add user form and user list to own components, improved UI
This commit is contained in:
majormjr
parent
479667ef5b
commit
18e5e4e4e8
@ -2,7 +2,7 @@ language: go
|
||||
go:
|
||||
- 1.4.3
|
||||
- 1.5.4
|
||||
- release
|
||||
- 1.6.2
|
||||
- tip
|
||||
|
||||
install:
|
||||
|
||||
18
auth.go
18
auth.go
@ -56,7 +56,7 @@ func (auth *AuthHTTP) createInitialUser(username, password, role, email string)
|
||||
return err
|
||||
}
|
||||
|
||||
err = auth.aaa.Update(nil, nil, username, password, "")
|
||||
err = auth.aaa.Update(nil, nil, username, password, email)
|
||||
if err != nil {
|
||||
log.Printf("Error saving user: %s", err)
|
||||
return err
|
||||
@ -67,15 +67,21 @@ func (auth *AuthHTTP) createInitialUser(username, password, role, email string)
|
||||
return nil
|
||||
}
|
||||
|
||||
func (auth *AuthHTTP) listUsers() ([]httpauth.UserData, error) {
|
||||
func (auth *AuthHTTP) listUsers() ([]User, error) {
|
||||
var userResponse []User
|
||||
users, err := auth.backend.Users()
|
||||
if err != nil {
|
||||
log.Printf("Error list users: %s", err)
|
||||
return nil, err
|
||||
}
|
||||
|
||||
for _, user := range users {
|
||||
u := User{Username: user.Username, Role: user.Role, Email: user.Email}
|
||||
userResponse = append(userResponse, u)
|
||||
}
|
||||
|
||||
log.Printf("listing users: %+v", users)
|
||||
return users, nil
|
||||
return userResponse, nil
|
||||
}
|
||||
|
||||
func (auth *AuthHTTP) addUser(username, password, email, role string) error {
|
||||
@ -84,6 +90,12 @@ func (auth *AuthHTTP) addUser(username, password, email, role string) error {
|
||||
if err != nil {
|
||||
log.Printf("Error creating user %v: %s", user, err)
|
||||
}
|
||||
err = auth.aaa.Update(nil, nil, username, password, email)
|
||||
if err != nil {
|
||||
log.Printf("Error saving user: %s", err)
|
||||
return err
|
||||
}
|
||||
|
||||
log.Printf("Added user: %v", user)
|
||||
return nil
|
||||
}
|
||||
|
||||
@ -27,7 +27,6 @@ class CreateSave extends React.Component {
|
||||
this.setState({loading: false});
|
||||
} else {
|
||||
alert(data.data)
|
||||
document.getElementById('uploadsave').removeChild(loading);
|
||||
this.setState({loading: false});
|
||||
}
|
||||
}
|
||||
|
||||
89
ui/App/components/Users/AddUser.jsx
Normal file
89
ui/App/components/Users/AddUser.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
|
||||
class AddUser extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.createUser = this.createUser.bind(this);
|
||||
this.validateEmail = this.validateEmail.bind(this);
|
||||
}
|
||||
|
||||
validateEmail(email) {
|
||||
var re = /\S+@\S+\.\S+/;
|
||||
return re.test(email)
|
||||
}
|
||||
|
||||
createUser(e) {
|
||||
e.preventDefault();
|
||||
console.log(this.refs);
|
||||
let user = {
|
||||
username: this.refs.username.value,
|
||||
// Add handler for listing roles
|
||||
role: "admin",
|
||||
password: this.refs.password.value,
|
||||
email: this.refs.email.value,
|
||||
}
|
||||
if (user.password !== this.refs.passwordConfirm.value) {
|
||||
console.log("passwords do not match")
|
||||
return
|
||||
}
|
||||
|
||||
console.log(this.validateEmail(user.username))
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/api/user/add",
|
||||
dataType: "json",
|
||||
data: JSON.stringify(user),
|
||||
success: (resp) => {
|
||||
if (resp.success === true) {
|
||||
alert("User: " + user.username + " added successfully.");
|
||||
this.props.listUsers();
|
||||
} else {
|
||||
alert("Error adding user: ", resp.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div className="box">
|
||||
<div className="box-header">
|
||||
<h3 className="box-title">Manage Users</h3>
|
||||
</div>
|
||||
|
||||
<div className="box-body">
|
||||
<h4>Add user</h4>
|
||||
|
||||
<form action="" onSubmit={this.createUser}>
|
||||
<div className="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input ref="username" type="text" className="form-control" id="username" placeholder="Enter username" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label for="email">Email address</label>
|
||||
<input ref="email" type="text" className="form-control" id="email" placeholder="Enter email" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input ref="password" type="password" className="form-control" id="password" placeholder="Enter password" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label for="password">Password confirmation</label>
|
||||
<input ref="passwordConfirm" type="password" className="form-control" id="password" placeholder="Enter password again" />
|
||||
</div>
|
||||
|
||||
<button className="btn btn-block btn-success" type="submit"><i className="fa fa-plus fa-fw"></i>Add User</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AddUser.propTypes = {
|
||||
listUsers: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default AddUser
|
||||
72
ui/App/components/Users/UserTable.jsx
Normal file
72
ui/App/components/Users/UserTable.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
|
||||
class UserTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.removeUser = this.removeUser.bind(this);
|
||||
}
|
||||
|
||||
removeUser(user) {
|
||||
user = {username: user}
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/api/user/remove",
|
||||
dataType: "json",
|
||||
data: JSON.stringify(user),
|
||||
success: (resp) => {
|
||||
if (resp.success === true) {
|
||||
console.log(resp)
|
||||
alert(resp.data)
|
||||
this.props.listUsers();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div className="box">
|
||||
<div className="box-header">
|
||||
<h3 className="box-title">Users</h3>
|
||||
</div>
|
||||
|
||||
<div className="box-body">
|
||||
<table className="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>Email</th>
|
||||
<th>Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.users.map( (user, i) => {
|
||||
return(
|
||||
<tr key={user.username}>
|
||||
<td>{user.username}</td>
|
||||
<td>{user.role}</td>
|
||||
<td>{user.email}</td>
|
||||
<td>
|
||||
<button className="btn btn-danger" onClick={()=>{this.removeUser(user.username)}}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
UserTable.proptypes = {
|
||||
users: React.PropTypes.array.isRequired,
|
||||
listUsers: React.PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default UserTable
|
||||
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import {IndexLink} from 'react-router';
|
||||
import UserTable from './Users/UserTable.jsx';
|
||||
import AddUser from './Users/AddUser.jsx';
|
||||
|
||||
class UsersContent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.listUsers = this.listUsers.bind(this);
|
||||
this.createUser = this.createUser.bind(this);
|
||||
this.state = {
|
||||
users: [],
|
||||
}
|
||||
@ -22,9 +23,7 @@ class UsersContent extends React.Component {
|
||||
dataType: "json",
|
||||
success: (resp) => {
|
||||
if (resp.success === true) {
|
||||
console.log("Listing users: ", resp.data)
|
||||
this.setState({users: resp.data})
|
||||
console.log(this.state)
|
||||
} else {
|
||||
console.log("error listing users.")
|
||||
}
|
||||
@ -32,37 +31,6 @@ class UsersContent extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
createUser(e) {
|
||||
e.preventDefault();
|
||||
console.log(this.refs);
|
||||
let user = {
|
||||
username: this.refs.username.value,
|
||||
// Add handler for listing roles
|
||||
role: "admin",
|
||||
password: this.refs.password.value,
|
||||
email: this.refs.email.value,
|
||||
}
|
||||
if (user.password !== this.refs.passwordConfirm.value) {
|
||||
console.log("passwords do not match")
|
||||
return
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/api/user/add",
|
||||
dataType: "json",
|
||||
data: JSON.stringify(user),
|
||||
success: (resp) => {
|
||||
if (resp.success === true) {
|
||||
alert("User: " + user.username + " added successfully.");
|
||||
this.listUsers();
|
||||
} else {
|
||||
alert("Error deleting user: ", resp.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div className="content-wrapper">
|
||||
@ -76,49 +44,16 @@ class UsersContent extends React.Component {
|
||||
<li className="active">Here</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="content">
|
||||
<div className="box">
|
||||
<div className="box-header">
|
||||
<h3 className="box-title">Users</h3>
|
||||
</div>
|
||||
|
||||
<div className="box-body">
|
||||
|
||||
{this.state.users.map( (user, i) => {
|
||||
return(
|
||||
<div>
|
||||
<h4>{user.Username}</h4>
|
||||
<UserTable
|
||||
users={this.state.users}
|
||||
listUsers={this.listUsers}
|
||||
/>
|
||||
<AddUser
|
||||
listUsers={this.listUsers}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<h4>Add user</h4>
|
||||
|
||||
<form action="" onSubmit={this.createUser}>
|
||||
<div className="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input ref="username" type="text" className="form-control" id="username" placeholder="Enter username" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input ref="password" type="text" className="form-control" id="password" placeholder="Enter password" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label for="password">Password confirmation</label>
|
||||
<input ref="passwordConfirm" type="text" className="form-control" id="password" placeholder="Enter password again" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label for="email">Email address</label>
|
||||
<input ref="email" type="text" className="form-control" id="email" placeholder="Enter email again" />
|
||||
</div>
|
||||
|
||||
<button className="btn btn-block btn-success" type="submit"><i className="fa fa-plus fa-fw"></i>Add User</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user