mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-13 17:27:37 -05:00
everything switched over, time to test
This commit is contained in:
Luke Berndt
@@ -2,7 +2,7 @@
|
||||
import React, { useEffect, useState, } from "react";
|
||||
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
|
||||
import { loginUser } from "../features/user/userSlice";
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
Container,
|
||||
Header,
|
||||
@@ -35,66 +35,52 @@ const Login = (props) => {
|
||||
const navigate = useNavigate();
|
||||
let [searchParams, setSearchParams] = useSearchParams();
|
||||
const nextLocation = searchParams.get("nextLocation");
|
||||
const dispatch = useDispatch();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
|
||||
|
||||
const loginSubmit = (event) => {
|
||||
const loginSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
/*
|
||||
var success = { type: "path", nextPathname: "/" };
|
||||
if (nextLocation) {
|
||||
success.type = "location";
|
||||
switch (this.props.nextLocation) {
|
||||
case "frontend":
|
||||
success.nextLocation = process.env.REACT_APP_FRONTEND_SERVER;
|
||||
break;
|
||||
default:
|
||||
case "admin":
|
||||
success.nextLocation = process.env.REACT_APP_ADMIN_SERVER;
|
||||
break;
|
||||
const result = await dispatch(loginUser({email,password})).unwrap();
|
||||
if (result.success) {
|
||||
|
||||
if (nextLocation) {
|
||||
switch (this.props.nextLocation) {
|
||||
case "frontend":
|
||||
window.location = process.env.REACT_APP_FRONTEND_SERVER;
|
||||
break;
|
||||
default:
|
||||
case "admin":
|
||||
window.location = process.env.REACT_APP_ADMIN_SERVER;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
navigate("/");
|
||||
}
|
||||
console.log(result)
|
||||
} else {
|
||||
console.error(result);
|
||||
setLoginMessage(result.message);
|
||||
if (result.message === "unconfirmed email") {
|
||||
/*data.userId = response.data.userId;
|
||||
dispatch(loginEmailError(data));*/
|
||||
navigate("/wait-confirm-email");
|
||||
}
|
||||
}
|
||||
|
||||
// Passed in via react-redux. Returns a promise.
|
||||
this.props
|
||||
.manualLogin(
|
||||
{
|
||||
// this function is passed in via react-redux
|
||||
email,
|
||||
password
|
||||
},
|
||||
success
|
||||
|
||||
) // holds the path to redirect to after login (if any)
|
||||
.then(loginMessage => {
|
||||
if (loginMessage) {
|
||||
// report to the user is there was a problem during login
|
||||
this.setState({
|
||||
loginMessage
|
||||
});
|
||||
}
|
||||
});*/
|
||||
}
|
||||
|
||||
/*
|
||||
let loginMessageDisplay =(<></>)
|
||||
|
||||
if (this.state.loginMessage) {
|
||||
loginMessage = (
|
||||
if (loginMessage) {
|
||||
loginMessageDisplay = (
|
||||
<Message icon>
|
||||
<Icon name="lemon" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
{this.state.loginMessage}
|
||||
{loginMessage}
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
*/
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Header as="h1">{process.env.REACT_APP_SITE_NAME}</Header>
|
||||
@@ -176,7 +162,7 @@ const Login = (props) => {
|
||||
<Button type="submit" size="large" value="Login" fluid>
|
||||
Login
|
||||
</Button>
|
||||
{loginMessage}
|
||||
{loginMessageDisplay}
|
||||
</Segment>
|
||||
</Form>
|
||||
<div style={forgotStyle} >
|
||||
|
||||
@@ -1,45 +1,37 @@
|
||||
import React, { Component } from "react"
|
||||
import React, { useEffect, useState, } from "react";
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
|
||||
import UserForm from "./UserForm";
|
||||
import {
|
||||
Container,
|
||||
Header
|
||||
} from "semantic-ui-react";
|
||||
import { updateProfile } from "../features/user/userSlice";
|
||||
|
||||
class Profile extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleProfileSubmit = this.handleProfileSubmit.bind(this);
|
||||
}
|
||||
const Profile = (props) => {
|
||||
const [message, setMessage] = useState("");
|
||||
const user = useSelector((state) => state.user);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleProfileSubmit = async (updatedUser) => {
|
||||
updatedUser.userId = user.userId
|
||||
|
||||
state = {
|
||||
requestMessage: ""
|
||||
const result = await dispatch(updateProfile(updatedUser)).unwrap();
|
||||
if (result.success) {
|
||||
console.log(result)
|
||||
} else {
|
||||
setMessage = result.message;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
handleProfileSubmit(user) {
|
||||
user.userId = this.props.user.userId
|
||||
this.props
|
||||
.updateProfile(user)
|
||||
.then(requestMessage => {
|
||||
if (requestMessage) {
|
||||
// report to the user is there was a problem during registration
|
||||
this.setState({
|
||||
requestMessage
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
// The Key on UserForm get updated when the user is loaded. This forces the Component to be completely redrawn, otherwise the changes in the Prop are not copied to State.
|
||||
return(
|
||||
<Container text>
|
||||
<Header as="h1">Update Profile</Header>
|
||||
<UserForm onSubmit={this.handleProfileSubmit} user={this.props.user} isEditing={true} requestMessage={this.state.requestMessage} isWaiting={this.props.isWaiting} key={this.props.user.userId}/>
|
||||
<UserForm onSubmit={handleProfileSubmit} user={user} isEditing={true} requestMessage={message} isWaiting={props.isWaiting} key={user.userId}/>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Profile
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { registerUser } from "../features/user/userSlice";
|
||||
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
Container,
|
||||
Header,
|
||||
@@ -8,53 +11,39 @@ import {
|
||||
|
||||
import UserForm from "./UserForm";
|
||||
|
||||
// ----------------------------------------------------
|
||||
class Register extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._onRegisterSubmit = this._onRegisterSubmit.bind(this);
|
||||
function Register(props) {
|
||||
const [requestMessage, setRequestMessage] = useState("");
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const onRegisterSubmit = async(user) => {
|
||||
const result = await dispatch(registerUser(user)).unwrap();
|
||||
if (result.success) {
|
||||
navigate("/sent-confirm-email");
|
||||
} else {
|
||||
console.error(result);
|
||||
setRequestMessage(result.message);
|
||||
}
|
||||
};
|
||||
|
||||
state = {
|
||||
requestMessage: ""
|
||||
}
|
||||
|
||||
|
||||
|
||||
_onRegisterSubmit(user) {
|
||||
this.props
|
||||
.manualRegister(user)
|
||||
.then(requestMessage => {
|
||||
if (requestMessage) {
|
||||
// report to the user is there was a problem during registration
|
||||
this.setState({
|
||||
requestMessage
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
<Message icon>
|
||||
<Icon name='trophy'/>
|
||||
<Message.Content>
|
||||
<Message.Header>Welcome!</Message.Header>
|
||||
<p>Creating an account on OpenMHz is the first step in sharing radio system recordings using Trunk Recorder.</p>
|
||||
<p>After creating an account, head over <a href="https://github.com/robotastic/trunk-recorder">here</a> to learn more about Trunk Recorder</p>
|
||||
<p> - Luke</p>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
</Container>
|
||||
<Container text>
|
||||
<Header style={{ paddingTop: '20px' }} as="h1">Register</Header>
|
||||
<UserForm onSubmit={this._onRegisterSubmit} requestMessage={this.state.requestMessage} isWaiting={this.props.isWaiting}/>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<Icon name='trophy'/>
|
||||
<Message.Content>
|
||||
<Message.Header>Welcome!</Message.Header>
|
||||
<p>Creating an account on OpenMHz is the first step in sharing radio system recordings using Trunk Recorder.</p>
|
||||
<p>After creating an account, head over <a href="https://github.com/robotastic/trunk-recorder">here</a> to learn more about Trunk Recorder</p>
|
||||
<p> - Luke</p>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
</Container>
|
||||
<Container text>
|
||||
<Header style={{ paddingTop: '20px' }} as="h1">Register</Header>
|
||||
<UserForm onSubmit={onRegisterSubmit} requestMessage={requestMessage} isWaiting={props.isWaiting}/>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Register;
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { resetPassword } from "../features/user/userSlice";
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useDispatch } from 'react-redux'
|
||||
import {
|
||||
Container,
|
||||
Form,
|
||||
@@ -6,101 +9,101 @@ import {
|
||||
Button,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
class ResetPassword extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleResetPassword = this.handleResetPassword.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
}
|
||||
state = {
|
||||
checkInputMessages: [],
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
passwordError: false,
|
||||
confirmPasswordError: false,
|
||||
sentReset: false
|
||||
};
|
||||
const ResetPassword = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [passwordError, setPasswordError] = useState(false);
|
||||
const [confirmPasswordError, setConfirmPasswordError] = useState(false);
|
||||
const [checkInputMessages, setCheckInputMessages] = useState([]);
|
||||
const { userId, token } = useParams();
|
||||
|
||||
|
||||
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
|
||||
|
||||
handleResetPassword(event) {
|
||||
const handleResetPassword = async () => {
|
||||
let error = false;
|
||||
var checkInputMessages = [];
|
||||
var inputMessages = [];
|
||||
|
||||
if (this.state.password === "") {
|
||||
this.setState({ passwordError: true });
|
||||
checkInputMessages.push("Password is required");
|
||||
if (password === "") {
|
||||
setPasswordError(true);
|
||||
inputMessages.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");
|
||||
} else if (password.length < 7) {
|
||||
setPasswordError(true);
|
||||
inputMessages.push("Password must be 7 characters or more");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ confirmPasswordError: false });
|
||||
setPasswordError(false);
|
||||
}
|
||||
|
||||
const { match: { params } } = this.props;
|
||||
this.setState({ checkInputMessages: checkInputMessages });
|
||||
if (password !== confirmPassword) {
|
||||
setConfirmPasswordError(true);
|
||||
inputMessages.push("The passwords did not match");
|
||||
error = true;
|
||||
} else {
|
||||
setConfirmPasswordError(false);
|
||||
}
|
||||
|
||||
const { match: { params } } = props;
|
||||
setCheckInputMessages(inputMessages);
|
||||
if (!error) {
|
||||
this.props.resetPassword(params.userId, params.token, this.state.password).then(resetSent => {
|
||||
this.setState({resetSent: true});
|
||||
});
|
||||
const result = await dispatch(resetPassword({ userId, token, password })).unwrap();
|
||||
if (result.success) {
|
||||
navigate("/login");
|
||||
} else {
|
||||
console.error(result);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
<Segment>
|
||||
<Form
|
||||
className="raised padding segment"
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.passwordError}
|
||||
label="Password"
|
||||
placeholder="Password..."
|
||||
<Form className="raised padding segment">
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
error={passwordError}
|
||||
label="Password"
|
||||
placeholder="Password..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
error={confirmPasswordError}
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm Password..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Button
|
||||
size="large"
|
||||
content="Reset Password"
|
||||
onClick={handleResetPassword}
|
||||
fluid
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.confirmPasswordError}
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm Password..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Button
|
||||
size="large"
|
||||
content="Reset Password"
|
||||
onClick={this.handleResetPassword}
|
||||
fluid
|
||||
/>
|
||||
</Form>
|
||||
</Segment>
|
||||
{checkInputMessages.length > 0 && (
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
{checkInputMessages.map((msg) => (
|
||||
<p key={msg} style={{ color: "red" }}>
|
||||
{msg}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</Segment>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResetPassword;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Form,
|
||||
Grid,
|
||||
@@ -7,106 +7,99 @@ import {
|
||||
Message,
|
||||
Icon
|
||||
} from "semantic-ui-react";
|
||||
import { sendResetPassword } from "../features/user/userSlice";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useDispatch } from 'react-redux'
|
||||
|
||||
const returnStyle = {
|
||||
marginTop: "30px"
|
||||
};
|
||||
|
||||
class SendResetPassword extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSendResetPassword = this.handleSendResetPassword.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
}
|
||||
state = {
|
||||
checkInputMessages: "",
|
||||
email: "",
|
||||
emailError: false,
|
||||
sentReset: false
|
||||
const SendResetPassword = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const [checkInputMessages, setCheckInputMessages] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [resetSent, setResetSent] = useState(false);
|
||||
|
||||
const returnStyle = {
|
||||
marginTop: "30px"
|
||||
};
|
||||
|
||||
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
|
||||
|
||||
handleSendResetPassword(event) {
|
||||
|
||||
|
||||
if (this.state.email === "") {
|
||||
this.setState({ emailError: true, checkInputMessages: "Email is required"});
|
||||
|
||||
const handleSendResetPassword = async () => {
|
||||
if (email === "") {
|
||||
setEmailError(true);
|
||||
setCheckInputMessages("Email is required");
|
||||
} else {
|
||||
this.setState({ emailError: false });
|
||||
|
||||
this.props.sendResetPassword({email: this.state.email}).then(resetMessage => {
|
||||
if (resetMessage) {
|
||||
// report to the user is there was a problem during login
|
||||
|
||||
this.setState({resetSent: false, checkInputMessages: resetMessage, emailError: true});
|
||||
} else {
|
||||
this.setState({resetSent: true});
|
||||
const result = await dispatch(sendResetPassword({ email })).unwrap();
|
||||
if (result.success) {
|
||||
setResetSent(true);
|
||||
setEmailError(true);
|
||||
} else {
|
||||
setCheckInputMessages(result.message);
|
||||
console.error(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
var resetMessage = "";
|
||||
if (this.state.checkInputMessages.length) {
|
||||
resetMessage = (
|
||||
<Message compact warning icon>
|
||||
<Icon name="lightning" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
};
|
||||
|
||||
{this.state.checkInputMessages}
|
||||
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
return (
|
||||
|
||||
|
||||
<Grid verticalAlign='middle' centered>
|
||||
<Grid.Row>
|
||||
|
||||
<Grid.Column width="6">
|
||||
{ !this.state.resetSent ? (
|
||||
<div>
|
||||
<h2>Forgot your password?</h2>
|
||||
<Form className="raised padding segment" onSubmit={this.handleSubmit}>
|
||||
Enter the email address for your account.
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="email"
|
||||
onChange={this.handleInputChange}
|
||||
error={this.state.emailError}
|
||||
label="Email"
|
||||
placeholder="Email..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Button
|
||||
size="large"
|
||||
content="Reset Password"
|
||||
onClick={this.handleSendResetPassword}
|
||||
fluid
|
||||
/>
|
||||
</Form>
|
||||
{resetMessage}
|
||||
</div>
|
||||
)
|
||||
:( <Segment raised padded='very'>
|
||||
<h2>Reset Link Sent </h2>
|
||||
<div>An email with a link to reset your password was sent to: {this.state.email}</div>
|
||||
<Link to="/" style={returnStyle}><Icon name="left arrow"/>Back to OpenMHz</Link>
|
||||
</Segment>
|
||||
)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
var resetMessage = "";
|
||||
if (checkInputMessages.length) {
|
||||
resetMessage = (
|
||||
<Message compact warning icon>
|
||||
<Icon name="lightning" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
{checkInputMessages}
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid verticalAlign="middle" centered>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6}>
|
||||
{!resetSent ? (
|
||||
<div>
|
||||
<h2>Forgot your password?</h2>
|
||||
<Form className="raised padding segment">
|
||||
Enter the email address for your account.
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="email"
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
value={email}
|
||||
error={emailError}
|
||||
label="Email"
|
||||
placeholder="Email..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Button
|
||||
size="large"
|
||||
content="Reset Password"
|
||||
onClick={handleSendResetPassword}
|
||||
fluid
|
||||
/>
|
||||
</Form>
|
||||
{resetMessage}
|
||||
</div>
|
||||
) : (
|
||||
<Segment raised padded="very">
|
||||
<h2>Reset Link Sent </h2>
|
||||
<div>
|
||||
An email with a link to reset your password was sent to: {email}
|
||||
</div>
|
||||
<Link to="/" style={returnStyle}>
|
||||
<Icon name="left arrow" />
|
||||
Back to OpenMHz
|
||||
</Link>
|
||||
</Segment>
|
||||
)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default SendResetPassword;
|
||||
|
||||
@@ -1,28 +1,25 @@
|
||||
import React, { Component } from "react"
|
||||
import {
|
||||
Container,
|
||||
Message,
|
||||
Icon
|
||||
} from "semantic-ui-react";
|
||||
import React from "react";
|
||||
import { Container, Message, Icon } from "semantic-ui-react";
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
class SentConfirmEmail extends Component {
|
||||
const SentConfirmEmail = ({ user }) => {
|
||||
const { email } = useSelector((state) => state.user);
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
<Message icon>
|
||||
<Icon name='envelope outline' />
|
||||
<Message.Content>
|
||||
<Message.Header>Confirmation email sent!</Message.Header>
|
||||
<p>
|
||||
We sent an email to the address you gave us: {email}<br />
|
||||
Please click on the link in the email to verify the email address.
|
||||
</p>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Container text>
|
||||
<Message icon>
|
||||
<Icon name='envelope outline' />
|
||||
<Message.Content>
|
||||
<Message.Header>Confirmation email sent!</Message.Header>
|
||||
<p>We sent an email to the address you gave us: {this.props.user.email}<br />
|
||||
Please click on the link in the email to verify the email address.</p>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SentConfirmEmail
|
||||
export default SentConfirmEmail;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import React, { useEffect, useState, } from "react";
|
||||
import {
|
||||
Form,
|
||||
Dimmer,
|
||||
@@ -10,270 +11,260 @@ import {
|
||||
|
||||
|
||||
// ----------------------------------------------------
|
||||
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;
|
||||
const UserForm = (props) => {
|
||||
const [checkInputMessages, setCheckInputMessages] = useState([]);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [screenName, setScreenName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [firstNameError, setFirstNameError] = useState(false);
|
||||
const [lastNameError, setLastNameError] = useState(false);
|
||||
const [screenNameError, setScreenNameError] = useState(false);
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [locationError, setLocationError] = useState(false);
|
||||
const [passwordError, setPasswordError] = useState(false);
|
||||
const [confirmPasswordError, setConfirmPasswordError] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(props.isEditing);
|
||||
const requestMessage = props.requestMessage;
|
||||
|
||||
useEffect(() => {
|
||||
if (props.isEditing) {
|
||||
setFirstName(props.user.firstName);
|
||||
setLastName(props.user.lastName);
|
||||
setScreenName(props.user.screenName);
|
||||
setEmail(props.user.email);
|
||||
setLocation(props.user.location);
|
||||
}
|
||||
}
|
||||
}, [props.isEditing, props.user]);
|
||||
|
||||
|
||||
|
||||
checkInputs() {
|
||||
const checkInputs = () => {
|
||||
let error = false;
|
||||
var checkInputMessages = [];
|
||||
let inputMessages = [];
|
||||
|
||||
if (this.state.firstName === "") {
|
||||
this.setState({ firstNameError: true });
|
||||
checkInputMessages.push("First Name is required");
|
||||
if (firstName === "") {
|
||||
setFirstNameError(true);
|
||||
inputMessages.push("First Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ firstNameError: false });
|
||||
setFirstNameError(false);
|
||||
}
|
||||
|
||||
if (this.state.lastName === "") {
|
||||
this.setState({ lastNameError: true });
|
||||
checkInputMessages.push("Last Name is required");
|
||||
if (lastName === "") {
|
||||
setLastNameError(true);
|
||||
inputMessages.push("Last Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ lastNameError: false });
|
||||
setLastNameError(false);
|
||||
}
|
||||
|
||||
if (this.state.email === "") {
|
||||
this.setState({ emailError: true });
|
||||
checkInputMessages.push("Email is required");
|
||||
if (email === "") {
|
||||
setEmailError(true);
|
||||
inputMessages.push("Email is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ emailError: false });
|
||||
setEmailError(false);
|
||||
}
|
||||
|
||||
if (this.state.location === "") {
|
||||
this.setState({ locationError: true });
|
||||
checkInputMessages.push("Location is required");
|
||||
if (location === "") {
|
||||
setLocationError(true);
|
||||
inputMessages.push("Location is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ locationError: false });
|
||||
setLocationError(false);
|
||||
}
|
||||
|
||||
if (this.state.screenName === "") {
|
||||
this.setState({ screenNameError: true });
|
||||
checkInputMessages.push("Screen Name is required");
|
||||
if (screenName === "") {
|
||||
setScreenNameError(true);
|
||||
inputMessages.push("Screen Name is required");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ screenNameError: false });
|
||||
setScreenNameError(false);
|
||||
}
|
||||
|
||||
if (this.props.isEditing) {
|
||||
this.setState({ checkInputMessages: checkInputMessages });
|
||||
if (props.isEditing) {
|
||||
setCheckInputMessages(checkInputMessages);
|
||||
return error;
|
||||
}
|
||||
|
||||
if (this.state.password === "") {
|
||||
this.setState({ passwordError: true });
|
||||
checkInputMessages.push("Password is required");
|
||||
if (password === "") {
|
||||
setPasswordError(true);
|
||||
inputMessages.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");
|
||||
} if (password.length < 7) {
|
||||
setPasswordError(true);
|
||||
inputMessages.push("Password must be 7 charecters or more");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ passwordError: false });
|
||||
setPasswordError(false);
|
||||
}
|
||||
|
||||
if (this.state.password !== this.state.confirmPassword) {
|
||||
this.setState({ confirmPasswordError: true });
|
||||
checkInputMessages.push("The passwords did not match");
|
||||
if (password !== confirmPassword) {
|
||||
setConfirmPasswordError(true);
|
||||
inputMessages.push("The passwords did not match");
|
||||
error = true;
|
||||
} else {
|
||||
this.setState({ confirmPasswordError: false });
|
||||
setConfirmPasswordError(false);
|
||||
}
|
||||
|
||||
this.setState({ checkInputMessages: checkInputMessages });
|
||||
setCheckInputMessages(inputMessages);
|
||||
return error;
|
||||
}
|
||||
|
||||
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
|
||||
|
||||
handleSubmit(event) {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
let inputError = this.checkInputs();
|
||||
let inputError = checkInputs();
|
||||
|
||||
if (!inputError) {
|
||||
const user = (({ firstName, lastName, screenName, location, email, password }) => ({ firstName, lastName, screenName, location, email, password }))(this.state);
|
||||
this.props.onSubmit(user);
|
||||
const user ={ firstName, lastName, screenName, location, email, password };
|
||||
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..."
|
||||
/>
|
||||
var registerMessage = "";
|
||||
var floatStyle = {
|
||||
overflow: 'auto'
|
||||
}
|
||||
var dimmerProps = {};
|
||||
if (props.isWaiting) {
|
||||
dimmerProps["active"] = true;
|
||||
}
|
||||
|
||||
</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>
|
||||
if (checkInputMessages.length || requestMessage.length) {
|
||||
var counter = 0;
|
||||
registerMessage = (
|
||||
<Message compact warning icon>
|
||||
<Icon name="lightning" />
|
||||
<Message.Content>
|
||||
<Message.Header>Problems...</Message.Header>
|
||||
<ul>
|
||||
{checkInputMessages.map(function (listValue) {
|
||||
return <li key={`ListItem_${counter++}`}>{listValue}</li>;
|
||||
})}
|
||||
{requestMessage.length > 0 &&
|
||||
<li key="req-mess">{requestMessage}</li>
|
||||
}
|
||||
</ul>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
className="raised padding segment"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Dimmer {...dimmerProps}>
|
||||
<Loader indeterminate>Updating Profile</Loader>
|
||||
</Dimmer>
|
||||
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="firstName"
|
||||
onChange={e => setFirstName(e.target.value)}
|
||||
error={firstNameError}
|
||||
value={firstName}
|
||||
label="First name"
|
||||
placeholder="First Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="lastName"
|
||||
onChange={e => setLastName(e.target.value)}
|
||||
error={lastNameError}
|
||||
value={lastName}
|
||||
label="Last name"
|
||||
placeholder="Last Name..."
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
<Form.Group widths="equal">
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="email"
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
error={emailError}
|
||||
value={email}
|
||||
disabled={isEditing}
|
||||
label="Email"
|
||||
placeholder="Email..."
|
||||
/>
|
||||
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
type="text"
|
||||
name="screenName"
|
||||
onChange={e => setScreenName(e.target.value)}
|
||||
error={screenNameError}
|
||||
value={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={e => setLocation(e.target.value)}
|
||||
error={locationError}
|
||||
value={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={e => setPassword(e.target.value)}
|
||||
error={passwordError}
|
||||
disabled={isEditing}
|
||||
label="Password"
|
||||
placeholder="Password..."
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
error={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;
|
||||
|
||||
@@ -1,52 +1,43 @@
|
||||
import React, { Component } from "react"
|
||||
import {
|
||||
Container,
|
||||
Header,
|
||||
Button,
|
||||
Message,
|
||||
Icon
|
||||
} from "semantic-ui-react";
|
||||
class WaitConfirmEmail extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSendConfirmEmail = this.handleSendConfirmEmail.bind(this);
|
||||
import React, { useState } from "react";
|
||||
import { sendConfirmEmail } from "../features/user/userSlice";
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { Container, Header, Button, Message, Icon } from "semantic-ui-react";
|
||||
|
||||
}
|
||||
handleSendConfirmEmail(event) {
|
||||
this.props.sendConfirmEmail(this.props.user.userId).then(loginMessage => {
|
||||
if (loginMessage) {
|
||||
// report to the user is there was a problem during login
|
||||
this.setState({
|
||||
loginMessage
|
||||
});
|
||||
}
|
||||
});
|
||||
const WaitConfirmEmail = () => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { email, userId } = useSelector((state) => state.user);
|
||||
|
||||
const handleSendConfirmEmail = async (event) => {
|
||||
const message = await dispatch(sendConfirmEmail(userId)).unwrap();
|
||||
navigate("/sent-confirm-email")
|
||||
};
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Container text>
|
||||
<Message icon>
|
||||
<Icon name='envelope outline'/>
|
||||
<Message.Content>
|
||||
<Message.Header>Confirm your email address</Message.Header>
|
||||
<p>We sent an email to the address you gave us: {this.props.user.email}<br/>
|
||||
Please click on the link in the email to verify the email address.</p>
|
||||
<Header as='h3'>Didn't get an email?</Header>
|
||||
<p>So, you have waited a bit and haven't gotten anything?</p>
|
||||
|
||||
return (
|
||||
<Container text>
|
||||
<Message icon>
|
||||
<Icon name="envelope outline" />
|
||||
<Message.Content>
|
||||
<Message.Header>Confirm your email address</Message.Header>
|
||||
<p>
|
||||
We sent an email to the address you gave us: {email}
|
||||
<br />
|
||||
Please click on the link in the email to verify the email address.
|
||||
</p>
|
||||
<Header as="h3">Didn't get an email?</Header>
|
||||
<p>So, you have waited a bit and haven't gotten anything?</p>
|
||||
<p>...and you checked your spam folder?</p>
|
||||
<p>Well, click below.</p>
|
||||
<Button
|
||||
size="large"
|
||||
content="Resend Email Confirmation"
|
||||
onClick={this.handleSendConfirmEmail}
|
||||
/>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
<Button
|
||||
size="large"
|
||||
content="Resend Email Confirmation"
|
||||
onClick={handleSendConfirmEmail}
|
||||
/>
|
||||
</Message.Content>
|
||||
</Message>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default WaitConfirmEmail
|
||||
export default WaitConfirmEmail;
|
||||
|
||||
Reference in New Issue
Block a user