163 lines
4.4 KiB
JavaScript
163 lines
4.4 KiB
JavaScript
import { postLogin } from '@api/auth'
|
|
import { useSiteContext } from '@context/SiteContext'
|
|
import useLanguage from '@hooks/useLanguage'
|
|
import {
|
|
Button,
|
|
Center,
|
|
FormControl,
|
|
FormErrorMessage,
|
|
FormLabel,
|
|
Heading,
|
|
Input,
|
|
Stack,
|
|
notificationService,
|
|
} from '@hope-ui/solid'
|
|
import { useNavigate } from '@solidjs/router'
|
|
import { Field, useFormHandler } from 'solid-form-handler'
|
|
import { yupSchema } from 'solid-form-handler/yup'
|
|
import { Show, onMount } from 'solid-js'
|
|
import { styled } from 'solid-styled-components'
|
|
import * as yup from 'yup'
|
|
|
|
const LoginPage = styled('div')`
|
|
width: 100%;
|
|
height: 100svh;
|
|
display: flex;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
place-items: center;
|
|
|
|
.login-wrap {
|
|
width: 40%;
|
|
max-width: 500px;
|
|
min-width: 320px;
|
|
margin: 0 auto;
|
|
|
|
.logo {
|
|
width: 40%;
|
|
max-width: 150px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.login-box {
|
|
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
|
|
border-radius: 5px;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
`
|
|
|
|
const loginSchema = yup.object({
|
|
username: yup.string().required('Username is required'),
|
|
password: yup.string().required('Password is required'),
|
|
})
|
|
|
|
const language = useLanguage()
|
|
|
|
export default function Login() {
|
|
const { store, setAuth } = useSiteContext()
|
|
const navigate = useNavigate()
|
|
const formHandler = useFormHandler(yupSchema(loginSchema))
|
|
const { formData } = formHandler
|
|
|
|
onMount(() => {
|
|
if (store.auth) {
|
|
navigate('/', { replace: true })
|
|
}
|
|
})
|
|
|
|
const submit = async (event) => {
|
|
event.preventDefault()
|
|
await formHandler.validateForm()
|
|
try {
|
|
const loginData = {
|
|
username: formData()?.username,
|
|
password: formData()?.password,
|
|
}
|
|
|
|
const resp = await postLogin(loginData)
|
|
|
|
if (resp.status === 200) {
|
|
const user = resp?.data || {}
|
|
setAuth({ auth: true, user })
|
|
formHandler.resetForm()
|
|
navigate('/', { replace: true })
|
|
}
|
|
} catch (error) {
|
|
notificationService.show({
|
|
status: 'danger',
|
|
title: 'Login fail!',
|
|
description: error?.data || 'Your username or password input is wrong!',
|
|
closable: false,
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<LoginPage>
|
|
<div class="login-wrap">
|
|
<Center width="100%" mb="$10">
|
|
<picture class="logo">
|
|
<source
|
|
srcSet="/images/logo_fuware.png"
|
|
type="image/png"
|
|
media="(min-width: 600px)"
|
|
/>
|
|
<img src="/images/logo_fuware.png" alt="logo" />
|
|
</picture>
|
|
</Center>
|
|
<div class="login-box">
|
|
<form autoComplete="off" onSubmit={submit}>
|
|
<Stack direction="column">
|
|
<Center w="100%" mb="$5">
|
|
<Heading level="1" size="xl">
|
|
{language.ui.login}
|
|
</Heading>
|
|
</Center>
|
|
<Field
|
|
mode="input"
|
|
name="username"
|
|
formHandler={formHandler}
|
|
render={(field) => (
|
|
<FormControl mb="$3" invalid={field.helpers.error}>
|
|
<FormLabel for="username">
|
|
{language.ui.username}:
|
|
</FormLabel>
|
|
<Input id="username" type="text" {...field.props} />
|
|
<Show when={field.helpers.error}>
|
|
<FormErrorMessage>
|
|
{field.helpers.errorMessage}
|
|
</FormErrorMessage>
|
|
</Show>
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
<Field
|
|
mode="input"
|
|
name="password"
|
|
formHandler={formHandler}
|
|
render={(field) => (
|
|
<FormControl mb="$5" invalid={field.helpers.error}>
|
|
<FormLabel for="username">
|
|
{language.ui.password}:
|
|
</FormLabel>
|
|
<Input id="password" type="password" {...field.props} />
|
|
<Show when={field.helpers.error}>
|
|
<FormErrorMessage>
|
|
{field.helpers.errorMessage}
|
|
</FormErrorMessage>
|
|
</Show>
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
<Button size="sm" type="submit">
|
|
{language.ui.login}
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</LoginPage>
|
|
)
|
|
}
|