mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-13 09:17:30 -05:00
adding Admin server
This commit is contained in:
Luke Berndt
279
account/src/User/UserForm.js
Normal file
279
account/src/User/UserForm.js
Normal file
@@ -0,0 +1,279 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Form,
|
||||
Dimmer,
|
||||
Loader,
|
||||
Button,
|
||||
Message,
|
||||
Icon
|
||||
} from "semantic-ui-react";
|
||||
|
||||
|
||||
// ----------------------------------------------------
|
||||
class UserForm extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.checkInputs = this.checkInputs.bind(this);
|
||||
this.render = this.render.bind(this)
|
||||
|
||||
this.state = {
|
||||
checkInputMessages: [],
|
||||
registerMessages: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
screenName: "",
|
||||
email: "",
|
||||
location: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
firstNameError: false,
|
||||
lastNameError: false,
|
||||
screenNameError: false,
|
||||
emailError: false,
|
||||
locationError: false,
|
||||
passwordError: false,
|
||||
confirmPasswordError: false,
|
||||
isEditing: this.props.isEditing
|
||||
};
|
||||
if (this.props.isEditing) {
|
||||
this.state.firstName = this.props.user.firstName;
|
||||
this.state.lastName = this.props.user.lastName;
|
||||
this.state.screenName = this.props.user.screenName;
|
||||
this.state.email = this.props.user.email;
|
||||
this.state.location = this.props.user.location;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
checkInputs() {
|
||||
let error = false;
|
||||
var checkInputMessages = [];
|
||||
|
||||
if (this.state.firstName === "") {
|
||||
this.setState({ firstNameError: true });
|
||||
checkInputMessages.push("First Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ firstNameError: false });
|
||||
}
|
||||
|
||||
if (this.state.lastName === "") {
|
||||
this.setState({ lastNameError: true });
|
||||
checkInputMessages.push("Last Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ lastNameError: false });
|
||||
}
|
||||
|
||||
if (this.state.email === "") {
|
||||
this.setState({ emailError: true });
|
||||
checkInputMessages.push("Email is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ emailError: false });
|
||||
}
|
||||
|
||||
if (this.state.location === "") {
|
||||
this.setState({ locationError: true });
|
||||
checkInputMessages.push("Location is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ locationError: false });
|
||||
}
|
||||
|
||||
if (this.state.screenName === "") {
|
||||
this.setState({ screenNameError: true });
|
||||
checkInputMessages.push("Screen Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ screenNameError: false });
|
||||
}
|
||||
|
||||
if (this.props.isEditing) {
|
||||
this.setState({ checkInputMessages: checkInputMessages });
|
||||
return error;
|
||||
}
|
||||
|
||||
if (this.state.password === "") {
|
||||
this.setState({ passwordError: true });
|
||||
checkInputMessages.push("Password is required");
|
||||
error = true;
|
||||
} if (this.state.password.length < 7) {
|
||||
this.setState({ passwordError: true });
|
||||
checkInputMessages.push("Password must be 7 charecters or more");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ passwordError: false });
|
||||
}
|
||||
|
||||
if (this.state.password !== this.state.confirmPassword) {
|
||||
this.setState({ confirmPasswordError: true });
|
||||
checkInputMessages.push("The passwords did not match");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ confirmPasswordError: false });
|
||||
}
|
||||
|
||||
this.setState({ checkInputMessages: checkInputMessages });
|
||||
return error;
|
||||
}
|
||||
|
||||
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
let inputError = this.checkInputs();
|
||||
|
||||
if (!inputError) {
|
||||
const user = (({ firstName, lastName, screenName, location, email, password }) => ({ firstName, lastName, screenName, location, email, password }))(this.state);
|
||||
this.props.onSubmit(user);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
var registerMessage = "";
|
||||
var floatStyle = {
|
||||
overflow: 'auto'
|
||||
}
|
||||
var dimmerProps = {};
|
||||
if (this.props.isWaiting) {
|
||||
dimmerProps["active"] = true;
|
||||
}
|
||||
const { isEditing } = this.props;
|
||||
if (this.state.checkInputMessages.length || this.props.requestMessage.length) {
|
||||
var counter = 0;
|
||||
registerMessage = (
|
||||
<Message compact warning icon>
|
||||
<Icon name="lightning" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
<ul>
|
||||
{this.state.checkInputMessages.map(function (listValue) {
|
||||
return <li key={`ListItem_${counter++}`}>{listValue}</li>;
|
||||
})}
|
||||
{this.props.requestMessage.length > 0 &&
|
||||
<li key="req-mess">{this.props.requestMessage}</li>
|
||||
}
|
||||
</ul>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
className="raised padding segment"
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
<Dimmer {...dimmerProps}>
|
||||
<Loader indeterminate>Updating Profile</Loader>
|
||||
</Dimmer>
|
||||
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="firstName"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.firstNameError}
|
||||
defaultValue={this.state.firstName}
|
||||
label="First name"
|
||||
placeholder="First Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="lastName"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.lastNameError}
|
||||
defaultValue={this.state.lastName}
|
||||
label="Last name"
|
||||
placeholder="Last Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="email"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.emailError}
|
||||
defaultValue={this.state.email}
|
||||
disabled={isEditing}
|
||||
label="Email"
|
||||
placeholder="Email..."
|
||||
/>
|
||||
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="screenName"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.screenNameError}
|
||||
defaultValue={this.state.screenName}
|
||||
label="Screen Name"
|
||||
placeholder="Screen Name..."
|
||||
/>
|
||||
<p style={{ fontStyle: "italic" }}>
|
||||
Shown on OpenMHz for each of your systems
|
||||
</p>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="location"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.locationError}
|
||||
defaultValue={this.state.location}
|
||||
label="General Location"
|
||||
placeholder="City, State..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
{isEditing !== true && (
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.passwordError}
|
||||
disabled={isEditing}
|
||||
label="Password"
|
||||
placeholder="Password..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.confirmPasswordError}
|
||||
disabled={isEditing}
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm Password..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
)}
|
||||
<div style={floatStyle}>
|
||||
<Button type="submit" size="large" floated="right" value="Login" color='blue'>
|
||||
{isEditing !== true ? 'Register' : 'Update'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
{registerMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UserForm;
|
||||
Reference in New Issue
Block a user