granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix auth modals

Browse source
This commit is contained in:
Justin Edmund 2023-01-21 08:37:11 -08:00
parent 1ee55cc1c2
commit da1bca2c05
4 changed files with 83 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/LoginModal/index.scss
View file

@ -2,11 +2,10 @@
gap: $unit;
min-width: $unit * 52;
form {
.Fields {
display: flex;
flex-direction: column;
gap: calc($unit / 2);
margin-bottom: $unit-3x;
padding: 0 $unit-3x;
gap: $unit;
padding: 0 $unit-4x;
}
}

11
components/LoginModal/index.tsx
View file

@ -9,7 +9,7 @@ import setUserToken from '~utils/setUserToken'
import { accountState } from '~utils/accountState'
import Button from '~components/Button'
import Input from '~components/LabelledInput'
import Input from '~components/Input'
import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
import DialogContent from '~components/DialogContent'
import changeLanguage from '~utils/changeLanguage'
@ -43,6 +43,7 @@ const LoginModal = () => {
// Set up form refs
const emailInput: React.RefObject<HTMLInputElement> = React.createRef()
const passwordInput: React.RefObject<HTMLInputElement> = React.createRef()
const footerRef: React.RefObject<HTMLDivElement> = React.createRef()
const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
@ -199,6 +200,7 @@ const LoginModal = () => {
</DialogTrigger>
<DialogContent
className="Login"
footerref={footerRef}
onEscapeKeyDown={onEscapeKeyDown}
onOpenAutoFocus={onOpenAutoFocus}
>
@ -212,6 +214,7 @@ const LoginModal = () => {
</div>
<form className="form" onSubmit={login}>
<div className="Fields">
<Input
className="Bound"
name="email"
@ -230,11 +233,15 @@ const LoginModal = () => {
error={errors.password}
ref={passwordInput}
/>
</div>
<div className="DialogFooter" ref={footerRef}>
<div className="Buttons Span">
<Button
disabled={!formValid}
text={t('modals.login.buttons.confirm')}
/>
</div>
</div>
</form>
</DialogContent>
</Dialog>

5
components/SignupModal/index.scss
View file

@ -2,12 +2,11 @@
gap: $unit;
min-width: $unit * 52;
form {
.Fields {
display: flex;
flex-direction: column;
gap: calc($unit / 2);
margin-bottom: $unit-2x;
padding: 0 $unit-3x;
padding: 0 $unit-4x;
.terms {
color: $grey-50;

11
components/SignupModal/index.tsx
View file

@ -9,7 +9,7 @@ import setUserToken from '~utils/setUserToken'
import { accountState } from '~utils/accountState'
import Button from '~components/Button'
import Input from '~components/LabelledInput'
import Input from '~components/Input'
import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
import DialogContent from '~components/DialogContent'
import CrossIcon from '~public/icons/Cross.svg'
@ -49,6 +49,8 @@ const SignupModal = (props: Props) => {
const emailInput = React.createRef<HTMLInputElement>()
const passwordInput = React.createRef<HTMLInputElement>()
const passwordConfirmationInput = React.createRef<HTMLInputElement>()
const footerRef = React.createRef<HTMLDivElement>()
const form = [
usernameInput,
emailInput,
@ -279,6 +281,7 @@ const SignupModal = (props: Props) => {
</DialogTrigger>
<DialogContent
className="Signup"
footerref={footerRef}
onEscapeKeyDown={onEscapeKeyDown}
onOpenAutoFocus={onOpenAutoFocus}
>
@ -292,6 +295,7 @@ const SignupModal = (props: Props) => {
</div>
<form className="form" onSubmit={register}>
<div className="Fields">
<Input
className="Bound"
name="username"
@ -329,11 +333,16 @@ const SignupModal = (props: Props) => {
error={errors.passwordConfirmation}
ref={passwordConfirmationInput}
/>
</div>
<div className="DialogFooter" ref={footerRef}>
<div className="Buttons Span">
<Button
disabled={!formValid}
text={t('modals.signup.buttons.confirm')}
/>
</div>
</div>
<p className="terms">
{/* <Trans i18nKey="modals.signup.agreement">