CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

refactor: improve the auth component

Browse source
This commit is contained in:
Sebastian Sauerer 2022-03-13 14:07:03 +01:00
parent 80bcf68a7f
commit 2ba1dd7f26
2 changed files with 45 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/components/auth/auth.module.css
View file

@ -5,17 +5,17 @@
} }
.form { .form {
display: flex; display: grid;
flex-direction: column; place-items: center;
align-items: center;
justify-content: center;
width: 100%;
} }
.formGroup { .formGroup {
margin-bottom: 1rem; display: flex;
flex-direction: column;
place-items: center;
gap: 10px;
} }
.formHeader { .formContentSpace {
margin-bottom: 1rem; margin-bottom: 1rem;
} }

93
client/components/auth/index.tsx
View file

@ -1,5 +1,5 @@
import { FormEvent, useState } from 'react' import { FormEvent, useState } from 'react'
import { Button, Card, Input, Text } from '@geist-ui/core' import { Button, Input, Text, useToasts } from '@geist-ui/core'
import styles from './auth.module.css' import styles from './auth.module.css'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Link from '../Link' import Link from '../Link'
@ -9,15 +9,11 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [error, setError] = useState(''); const { setToast } = useToasts();
const signingIn = page === 'signin' const signingIn = page === 'signin'
const NO_EMPTY_SPACE_REGEX = /^\S*$/;
const handleJson = (json: any) => { const handleJson = (json: any) => {
if (json.error) return setError(json.error.message)
localStorage.setItem('drift-token', json.token) localStorage.setItem('drift-token', json.token)
localStorage.setItem('drift-userid', json.userId) localStorage.setItem('drift-userid', json.userId)
router.push('/') router.push('/')
@ -27,12 +23,6 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault() e.preventDefault()
if (!username.match(NO_EMPTY_SPACE_REGEX))
return setError("Username can't be empty")
if (!password.match(NO_EMPTY_SPACE_REGEX))
return setError("Password can't be empty")
const reqOpts = { const reqOpts = {
method: 'POST', method: 'POST',
headers: { headers: {
@ -50,58 +40,51 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
handleJson(json) handleJson(json)
} catch (err: any) { } catch (err: any) {
setError(err.message || "Something went wrong") setToast({ text: "Something went wrong", type: 'error' })
} }
} }
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.form}> <div className={styles.form}>
<div className={styles.formHeader}> <div className={styles.formContentSpace}>
<h1>{signingIn ? 'Sign In' : 'Sign Up'}</h1> <h1>{signingIn ? 'Sign In' : 'Sign Up'}</h1>
</div> </div>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Card> <div className={styles.formGroup}>
<div className={styles.formGroup}> <Input
<Input htmlType="text"
htmlType="text" id="username"
id="username" value={username}
value={username} onChange={(event) => setUsername(event.target.value)}
onChange={(event) => setUsername(event.target.value)} placeholder="Username"
placeholder="Username" required
required scale={4 / 3}
label='Username' />
/> <Input
</div> htmlType='password'
<div className={styles.formGroup}> id="password"
<Input value={password}
htmlType='password' onChange={(event) => setPassword(event.target.value)}
id="password" placeholder="Password"
value={password} required
onChange={(event) => setPassword(event.target.value)} scale={4 / 3}
placeholder="Password" />
required <Button type="success" htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
label='Password' </div>
/> <div className={styles.formContentSpace}>
</div> {signingIn ? (
<div style={{ display: 'flex', justifyContent: 'center' }}> <Text>
<Button type="success" ghost htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button> Don&apos;t have an account?{" "}
</div> <Link color href="/signup">Sign up</Link>
<div className={styles.formGroup}> </Text>
{signingIn ? ( ) : (
<Text> <Text>
Don&apos;t have an account?{" "} Already have an account?{" "}
<Link color href="/signup">Sign up</Link> <Link color href="/signin">Sign in</Link>
</Text> </Text>
) : ( )}
<Text> </div>
Already have an account?{" "}
<Link color href="/signin">Sign in</Link>
</Text>
)}
</div>
{error && <Text type='error'>{error}</Text>}
</Card>
</form> </form>
</div> </div>
</div > </div >