This commit is contained in:
Roman Hergenreder 2020-06-17 17:00:32 +02:00
parent 99672405c6
commit 8133498ea5
5 changed files with 102 additions and 15 deletions

4
admin/dist/main.js vendored

File diff suppressed because one or more lines are too long

@ -7,11 +7,19 @@ export default function Alert(props) {
const onClose = props.onClose || function() { };
const title = props.title || "Untitled Alert";
const message = props.message || "Alert message";
const type = props.type || "danger";
let icon = "ban";
if (type === "warning") {
icon = "exclamation-triangle";
} else if(type === "success") {
icon = "check";
}
return (
<div className={"alert alert-danger alert-dismissible"}>
<div className={"alert alert-" + type + " alert-dismissible"}>
<button type="button" className={"close"} data-dismiss={"alert"} aria-hidden={"true"} onClick={onClose}>×</button>
<h5><Icon icon={"ban"} className={"icon"} /> {title}</h5>
<h5><Icon icon={icon} className={"icon"} /> {title}</h5>
{message}
</div>
)

@ -8,9 +8,27 @@ export default class CreateUser extends React.Component {
constructor(props) {
super(props);
this.parent = {
showDialog: props.showDialog || function () { },
api: props.api,
};
this.state = {
errors: [],
sendInvite: true
sendInvite: true,
username: "",
email: "",
password: "",
confirmPassword: ""
}
}
removeError(i) {
if (i >= 0 && i < this.state.errors.length) {
let errors = this.state.errors.slice();
errors.splice(i, 1);
this.setState({...this.state, errors: errors});
}
}
@ -27,12 +45,14 @@ export default class CreateUser extends React.Component {
<div className={"form-group"}>
<label htmlFor={"password"}>Password</label>
<input type={"password"} className={"form-control"} placeholder={"Password"}
id={"password"} name={"password"}/>
id={"password"} name={"password"} value={this.state.password}
onChange={this.onChangeInput.bind(this)}/>
</div>
<div className={"form-group"}>
<label htmlFor={"confirmPassword"}>Confirm Password</label>
<input type={"password"} className={"form-control"} placeholder={"Confirm Password"}
id={"confirmPassword"} name={"confirmPassword"}/>
id={"confirmPassword"} name={"confirmPassword"} value={this.state.confirmPassword}
onChange={this.onChangeInput.bind(this)}/>
</div>
</div>
}
@ -55,19 +75,21 @@ export default class CreateUser extends React.Component {
</div>
</div>
<div className={"content"}>
{errors}
<div className={"row"}>
<div className={"col-lg-6 p-3"}>
<div className={"col-lg-6 pl-5 pr-5"}>
{errors}
<form role={"form"} onSubmit={(e) => this.submitForm(e)}>
<div className={"form-group"}>
<label htmlFor={"username"}>Username</label>
<input type={"text"} className={"form-control"} placeholder={"Enter username"}
name={"username"} id={"username"} maxLength={32}/>
name={"username"} id={"username"} maxLength={32} value={this.state.username}
onChange={this.onChangeInput.bind(this)}/>
</div>
<div className={"form-group"}>
<label htmlFor={"email"}>E-Mail</label>
<input type={"email"} className={"form-control"} placeholder={"E-Mail address"}
id={"email"} name={"email"} maxLength={64}/>
id={"email"} name={"email"} maxLength={64} value={this.state.email}
onChange={this.onChangeInput.bind(this)}/>
</div>
<div className={"form-check"}>
<input type={"checkbox"} className={"form-check-input"}
@ -81,6 +103,10 @@ export default class CreateUser extends React.Component {
</label>
</div>
{passwordForm}
<Link to={"/admin/users"} className={"btn btn-info mt-2 mr-2"}>
<Icon icon={"arrow-left"}/>
&nbsp;Back
</Link>
<button type={"submit"} className={"btn btn-primary mt-2"}>Submit</button>
</form>
</div>
@ -92,6 +118,53 @@ export default class CreateUser extends React.Component {
submitForm(e) {
e.preventDefault();
const requiredFields = (this.state.sendInvite ?
["username", "email"] :
["username", "password", "confirmPassword"]);
let missingFields = [];
for (const field of requiredFields) {
if (!this.state[field]) {
missingFields.push(field);
}
}
if (missingFields.length > 0) {
let errors = this.state.errors.slice();
errors.push({title: "Missing input", message: "The following fields are missing: " + missingFields.join(", "), type: "warning"});
this.setState({ ...this.state, errors: errors });
return;
}
const username = this.state.username;
const email = this.state.email || "";
const password = this.state.password;
const confirmPassword = this.state.confirmPassword;
if (this.state.sendInvite) {
this.parent.api.inviteUser(username, email).then((res) => {
let errors = this.state.errors.slice();
if (!res.success) {
errors.push({ title: "Error inviting User", message: res.msg, type: "error" });
this.setState({ ...this.state, errors: errors });
} else {
errors.push({ title: "Success", message: "The invitation was successfully sent.", type: "success" });
this.setState({ ...this.state, errors: errors, username: "", email: "" });
}
});
} else {
this.parent.api.createUser(username, email, password, confirmPassword).then((res) => {
let errors = this.state.errors.slice();
if (!res.success) {
errors.push({ title: "Error creating User", message: res.msg, type: "error" });
this.setState({ ...this.state, errors: errors, password: "", confirmPassword: "" });
} else {
errors.push({ title: "Success", message: "The user was successfully created.", type: "success" });
this.setState({ ...this.state, errors: errors, username: "", email: "", password: "", confirmPassword: "" });
}
});
}
}
onCheckboxChange() {
@ -100,4 +173,11 @@ export default class CreateUser extends React.Component {
sendInvite: !this.state.sendInvite,
});
}
onChangeInput(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({ ...this.state, [name]: value });
}
}

@ -9,8 +9,7 @@ export default class UserOverview extends React.Component {
constructor(props) {
super(props);
this.parent = {
showDialog: props.showDialog || function () {
},
showDialog: props.showDialog || function () { },
api: props.api,
};
this.state = {

4
js/admin.min.js vendored

File diff suppressed because one or more lines are too long