jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-04-27 07:48:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

connect reset password to login view (#4489)

Browse source
This commit is contained in:
Jeremy Letto 2021-12-07 21:57:12 -06:00 • committed by GitHub
parent 811ee54c76
commit 1f15445c69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 893 additions and 445 deletions
Download patch file Download diff file Expand all files Collapse all files

13
webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.css
View file

@ -1,13 +1,6 @@
.RequestPasswordResetForm {
width: 100%;
}
.RequestPasswordResetForm-MFA-Message {
margin-top: -20px;
}
.RequestPasswordResetForm-Error {
margin-bottom: 10px;
padding-bottom: 15px;
}
.RequestPasswordResetForm-item {
@ -26,3 +19,7 @@
.RequestPasswordResetForm-submit {
width: 100%;
}
.selectedHost {
margin-top: 40px;
}

126
webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx
View file

@ -1,9 +1,11 @@
// eslint-disable-next-line
import React, { useState } from "react";
import { connect } from 'react-redux';
import { Form, Field, reduxForm, change } from 'redux-form'
import { Form, Field } from 'react-final-form';
import { OnChange } from 'react-final-form-listeners';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { InputField, KnownHosts } from 'components';
import { FormKey } from 'types';
@ -12,16 +14,10 @@ import './RequestPasswordResetForm.css';
import { useReduxEffect } from 'hooks';
import { ServerTypes } from 'store';
const RequestPasswordResetForm = (props) => {
const { dispatch, handleSubmit } = props;
const RequestPasswordResetForm = ({ onSubmit, skipTokenRequest }) => {
const [errorMessage, setErrorMessage] = useState(false);
const [isMFA, setIsMFA] = useState(false);
const onHostChange: any = ({ host, port }) => {
dispatch(change(FormKey.RESET_PASSWORD_REQUEST, 'host', host));
dispatch(change(FormKey.RESET_PASSWORD_REQUEST, 'port', port));
}
useReduxEffect(() => {
setErrorMessage(true);
}, ServerTypes.RESET_PASSWORD_FAILED, []);
@ -30,63 +26,73 @@ const RequestPasswordResetForm = (props) => {
setIsMFA(true);
}, ServerTypes.RESET_PASSWORD_CHALLENGE, []);
const onSubmit = (event) => {
const handleOnSubmit = (form) => {
setErrorMessage(false);
handleSubmit(event);
onSubmit(form);
}
const validate = values => {
const errors: any = {};
if (!values.userName) {
errors.userName = 'Required';
}
if (isMFA && !values.email) {
errors.email = 'Required';
}
if (!values.selectedHost) {
errors.selectedHost = 'Required';
}
return errors;
};
return (
<Form className="RequestPasswordResetForm" onSubmit={onSubmit}>
<div className="RequestPasswordResetForm-items">
{errorMessage ? (
<div className="RequestPasswordResetForm-Error">Request Password Reset Failed, please try again</div>
) : null}
<div className="RequestPasswordResetForm-item">
<Field label="Username" name="user" component={InputField} autoComplete="username" />
</div>
{isMFA ? (
<div className="RequestPasswordResetForm-item">
<div className="RequestPasswordResetForm-MFA-Message">Server has multi-factor authentication enabled</div>
<Field label="Email" name="email" component={InputField} autoComplete="email" />
</div>
) : null}
<div className="RequestPasswordResetForm-item">
<Field name='selectedHost' component={KnownHosts} onChange={onHostChange} />
</div>
</div>
<Button className="RequestPasswordResetForm-submit rounded tall" color="primary" variant="contained" type="submit">
Request Reset Token
</Button>
<Form onSubmit={handleOnSubmit} validate={validate}>
{({ handleSubmit, form }) => {
const onHostChange: any = ({ userName }) => {
form.change('userName', userName);
setIsMFA(false);
}
return (
<form className="RequestPasswordResetForm" onSubmit={handleSubmit}>
<div className="RequestPasswordResetForm-items">
<div className="RequestPasswordResetForm-item">
<Field label="Username" name="userName" component={InputField} autoComplete="username" disabled={isMFA} />
</div>
{isMFA ? (
<div className="RequestPasswordResetForm-item">
<Field label="Email" name="email" component={InputField} autoComplete="email" />
<div>Server has multi-factor authentication enabled</div>
</div>
) : null}
<div className="RequestPasswordResetForm-item selectedHost">
<Field name='selectedHost' component={KnownHosts} disabled={isMFA} />
<OnChange name="selectedHost">{onHostChange}</OnChange>
</div>
{errorMessage && (
<div className="RequestPasswordResetForm-item">
<Typography color="error">Request password reset failed</Typography>
</div>
)}
</div>
<Button className="RequestPasswordResetForm-submit rounded tall" color="primary" variant="contained" type="submit">
Request Reset Token
</Button>
<div>
<Button color="primary" onClick={() => skipTokenRequest(form.getState().values.userName)}>
I already have a reset token
</Button>
</div>
</form>
);
}}
</Form>
);
};
const propsMap = {
form: FormKey.RESET_PASSWORD_REQUEST,
validate: values => {
const errors: any = {};
if (!values.user) {
errors.user = 'Required';
}
if (!values.host) {
errors.host = 'Required';
}
if (!values.port) {
errors.port = 'Required';
}
return errors;
}
};
const mapStateToProps = () => ({
initialValues: {
// host: "mtg.tetrarch.co/servatrice",
// port: "443"
// host: "server.cockatrice.us",
// port: "4748"
}
});
export default connect(mapStateToProps)(reduxForm(propsMap)(RequestPasswordResetForm));
export default RequestPasswordResetForm;