aly/servatrice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Webatrice: Account Registration form (pt2) (#4454)

Browse source 
Co-authored-by: ParkTandem <93353951+ParkTandem@users.noreply.github.com>
This commit is contained in:
Zach H 2021-10-31 22:15:51 -04:00 committed by GitHub
parent ac300b0b6d
commit a87c66885c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 128 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
webclient/src/components/RegistrationDialog/RegistrationDialog.css Normal file
View file

@ -0,0 +1,5 @@
.dialog-title {
display: flex;
justify-content: space-between;
align-items: center;
}

36
webclient/src/components/RegistrationDialog/RegistrationDialog.tsx Normal file
View file

@ -0,0 +1,36 @@
import React from "react";
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import { RegisterForm } from 'forms';
import './RegistrationDialog.css';
const RegistrationDialog = ({ classes, handleClose, isOpen }: any) => {
const handleOnClose = () => {
handleClose();
}
return (
<Dialog onClose={handleOnClose} open={isOpen}>
<DialogTitle disableTypography className="dialog-title">
<Typography variant="h6">Create New Account</Typography>
{handleOnClose ? (
<IconButton onClick={handleOnClose}>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
<DialogContent>
<RegisterForm onSubmit={handleOnClose}></RegisterForm>
</DialogContent>
</Dialog>
);
};
export default RegistrationDialog;

1
webclient/src/components/index.ts
View file

@ -12,6 +12,7 @@ export { default as ThreePaneLayout } from './ThreePaneLayout/ThreePaneLayout';
export { default as CheckboxField } from './CheckboxField/CheckboxField';
export { default as SelectField } from './SelectField/SelectField';
export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/ScrollToBottomOnChanges';
export { default as RegistrationDialog } from './RegistrationDialog/RegistrationDialog';
// Guards
export { default as AuthGuard } from './Guard/AuthGuard';

33
webclient/src/forms/RegisterForm/RegisterForm.css
View file

@ -1,14 +1,21 @@
.registerForm {
width: 100%;
padding: 20px;
}
.registerForm-item {
display: flex;
flex-direction: column;
}
.registerForm-submit.MuiButton-root {
display: block;
margin: 20px auto 0;
.registerForm {
width: 100%;
}
.registerForm-submit {
width: 100%;
/*padding is off, something in material-theme is causing it*/
}
.row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.column {
width: 48%;
flex: 0 1 auto;
align-self: auto;
}

121
webclient/src/forms/RegisterForm/RegisterForm.tsx
View file

@ -1,55 +1,66 @@
// eslint-disable-next-line
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Form, Field, reduxForm } from 'redux-form'
import Button from '@material-ui/core/Button';
import { InputField } from 'components';
import { FormKey } from 'types';
import './RegisterForm.css';
const RegisterForm = ({ handleSubmit }) => (
<Form className="registerForm" onSubmit={handleSubmit} autoComplete="off">
<div className="registerForm-item">
<Field label="Host" name="host" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Port" name="port" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Player Name" name="user" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Password" name="pass" type="password" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Password (again)" name="passwordConfirm" type="password" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Email" name="email" type="email" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Email (again)" name="emailConfirm" type="email" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Real Name" name="realName" component={InputField} />
</div>
<Button className="registerForm-submit" color="primary" variant="contained" type="submit">
Register
</Button>
</Form>
);
const propsMap = {
form: FormKey.REGISTER,
};
const mapStateToProps = () => ({
initialValues: {
}
});
export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm));
// eslint-disable-next-line
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Form, Field, reduxForm, change } from 'redux-form'
import Button from '@material-ui/core/Button';
import { InputField, KnownHosts } from 'components';
import { FormKey } from 'types';
import './RegisterForm.css';
const RegisterForm = (props) => {
const { dispatch, handleSubmit } = props;
const onHostChange = ({ host, port }) => {
dispatch(change(FormKey.REGISTER, 'host', host));
dispatch(change(FormKey.REGISTER, 'port', port));
}
return (
<Form className="registerForm row" onSubmit={handleSubmit} autoComplete="off">
<div className="leftRegisterForm column" >
<div className="registerForm-item">
<KnownHosts onChange={onHostChange} />
{ /* Padding is off */ }
</div>
<div className="registerForm-item">
<Field label="Country" name="country" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Real Name" name="realName" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Email" name="email" type="email" component={InputField} />
</div>
</div>
<div className="rightRegisterForm column">
<div className="registerForm-item">
<Field label="Player Name" name="user" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Password" name="pass" type="password" component={InputField} />
</div>
<div className="registerForm-item">
<Field label="Password (again)" name="passwordConfirm" type="password" component={InputField} />
</div>
<Button className="registerForm-submit tall" color="primary" variant="contained" type="submit">
Register
</Button>
</div>
</Form >
);
}
const propsMap = {
form: FormKey.REGISTER,
};
const mapStateToProps = () => ({
initialValues: {
}
});
export default connect(mapStateToProps)(reduxForm(propsMap)(RegisterForm));