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

1
webclient/src/forms/ResetPasswordForm/ResetPasswordForm.css
View file

@ -1,5 +1,6 @@
.ResetPasswordForm {
width: 100%;
padding-bottom: 15px;
}
.ResetPasswordForm-item {

109
webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx
View file

@ -1,9 +1,11 @@
// eslint-disable-next-line
import React, {useState} from "react";
import React, { useEffect, 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,58 +14,18 @@ import './ResetPasswordForm.css';
import { useReduxEffect } from '../../hooks';
import { ServerTypes } from '../../store';
const ResetPasswordForm = (props) => {
const { dispatch, handleSubmit } = props;
const ResetPasswordForm = ({ onSubmit, userName }) => {
const [errorMessage, setErrorMessage] = useState(false);
const onHostChange: any = ({ host, port }) => {
dispatch(change(FormKey.RESET_PASSWORD, 'host', host));
dispatch(change(FormKey.RESET_PASSWORD, 'port', port));
}
useReduxEffect(() => {
setErrorMessage(true);
}, ServerTypes.RESET_PASSWORD_FAILED, []);
return (
<Form className="ResetPasswordForm" onSubmit={handleSubmit}>
<div className="ResetPasswordForm-items">
{errorMessage ? (
<div><h3>Password Reset Failed, please try again</h3></div>
) : null}
<div className="ResetPasswordForm-item">
<Field label="Username" name="user" component={InputField} autoComplete="username" />
</div>
<div className="ResetPasswordForm-item">
<Field label="Token" name="token" component={InputField} />
</div>
<div className="ResetPasswordForm-item">
<Field label="Password" name="newPassword" component={InputField} />
</div>
<div className="ResetPasswordForm-item">
<Field label="Password Again" name="passwordAgain" component={InputField} />
</div>
<div className="ResetPasswordForm-item">
<Field name='selectedHost' component={KnownHosts} onChange={onHostChange} />
</div>
</div>
<Button className="ResetPasswordForm-submit rounded tall" color="primary" variant="contained" type="submit">
Change Password
</Button>
</Form>
);
};
const propsMap = {
form: FormKey.RESET_PASSWORD,
validate: values => {
const validate = values => {
const errors: any = {};
if (!values.user) {
errors.user = 'Required';
if (!values.userName) {
errors.userName = 'Required';
}
if (!values.token) {
errors.token = 'Required';
@ -76,24 +38,47 @@ const propsMap = {
} else if (values.newPassword !== values.passwordAgain) {
errors.passwordAgain = 'Passwords don\'t match'
}
if (!values.host) {
errors.host = 'Required';
}
if (!values.port) {
errors.port = 'Required';
if (!values.selectedHost) {
errors.selectedHost = 'Required';
}
return errors;
}
};
return (
<Form onSubmit={onSubmit} validate={validate} initialValues={{ userName }}>
{({ handleSubmit, form }) => (
<form className='ResetPasswordForm' onSubmit={handleSubmit}>
<div className='ResetPasswordForm-items'>
<div className='ResetPasswordForm-item'>
<Field label='Username' name='userName' component={InputField} autoComplete='username' disabled={!!userName} />
</div>
<div className='ResetPasswordForm-item'>
<Field label='Token' name='token' component={InputField} />
</div>
<div className='ResetPasswordForm-item'>
<Field label='Password' name='newPassword' type='password' component={InputField} autoComplete='new-password' />
</div>
<div className='ResetPasswordForm-item'>
<Field label='Password Again' name='passwordAgain' type='password' component={InputField} autoComplete='new-password' />
</div>
<div className='ResetPasswordForm-item'>
<Field name='selectedHost' component={KnownHosts} disabled />
</div>
{errorMessage && (
<div className='ResetPasswordForm-item'>
<Typography color="error">Password reset failed</Typography>
</div>
)}
</div>
<Button className='ResetPasswordForm-submit rounded tall' color='primary' variant='contained' type='submit'>
Reset Password
</Button>
</form>
)}
</Form>
);
};
const mapStateToProps = () => ({
initialValues: {
// host: "mtg.tetrarch.co/servatrice",
// port: "443"
// host: "server.cockatrice.us",
// port: "4748"
}
});
export default connect(mapStateToProps)(reduxForm(propsMap)(ResetPasswordForm));
export default ResetPasswordForm;