Done for Login and notification system
This commit is contained in:
@ -1,17 +1,5 @@
|
||||
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'
|
||||
@ -19,12 +7,18 @@ import { Show, onMount } from 'solid-js'
|
||||
import { styled } from 'solid-styled-components'
|
||||
import * as yup from 'yup'
|
||||
|
||||
import logo from '@assets/logo-fuware.svg'
|
||||
import useAuth from '@hooks/useAuth'
|
||||
import useToast from '@hooks/useToast'
|
||||
|
||||
const LoginPage = styled('div')`
|
||||
width: 100%;
|
||||
height: 100svh;
|
||||
display: flex;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
background: #fff url('/images/bg-login.jpg') no-repeat fixed center;
|
||||
background-size: cover;
|
||||
place-items: center;
|
||||
|
||||
.login-wrap {
|
||||
@ -32,11 +26,51 @@ const LoginPage = styled('div')`
|
||||
max-width: 500px;
|
||||
min-width: 320px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -120px;
|
||||
left: -285px;
|
||||
background: #10b981;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -40px;
|
||||
left: -130px;
|
||||
background: #ff6600;
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
display: block;
|
||||
width: 40%;
|
||||
max-width: 150px;
|
||||
min-width: 100px;
|
||||
margin: 0 auto;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
@ -57,6 +91,8 @@ const language = useLanguage()
|
||||
export default function Login() {
|
||||
const { store, setAuth } = useSiteContext()
|
||||
const navigate = useNavigate()
|
||||
const { clickLogIn } = useAuth(setAuth)
|
||||
const notify = useToast()
|
||||
const formHandler = useFormHandler(yupSchema(loginSchema))
|
||||
const { formData } = formHandler
|
||||
|
||||
@ -70,90 +106,115 @@ export default function Login() {
|
||||
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 })
|
||||
}
|
||||
const { username, password } = formData()
|
||||
await clickLogIn(username, password, formHandler.resetForm)
|
||||
notify.success({
|
||||
title: 'Login success!',
|
||||
description: 'Welcome back!',
|
||||
closable: true,
|
||||
})
|
||||
} catch (error) {
|
||||
notificationService.show({
|
||||
status: 'danger',
|
||||
notify.error({
|
||||
title: 'Login fail!',
|
||||
description: error?.data || 'Your username or password input is wrong!',
|
||||
closable: false,
|
||||
description: error?.data
|
||||
? language.message[error.data]
|
||||
: 'Your username or password input is wrong!',
|
||||
closable: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<LoginPage>
|
||||
<div class="login-wrap">
|
||||
<Center width="100%" mb="$10">
|
||||
<div class="card glass card-compact login-wrap shadow-xl">
|
||||
<div class="h-44">
|
||||
<picture class="logo">
|
||||
<source
|
||||
srcSet="/images/logo_fuware.png"
|
||||
type="image/png"
|
||||
media="(min-width: 600px)"
|
||||
/>
|
||||
<img src="/images/logo_fuware.png" alt="logo" />
|
||||
<source srcSet={logo} type="image/png" media="(min-width: 600px)" />
|
||||
<img src={logo} alt="logo" />
|
||||
</picture>
|
||||
</Center>
|
||||
<div class="login-box">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title">{language.ui.login}</h1>
|
||||
<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
|
||||
mode="input"
|
||||
name="username"
|
||||
formHandler={formHandler}
|
||||
render={(field) => (
|
||||
<label class="form-control w-full pb-5">
|
||||
<label
|
||||
class="input input-bordered flex items-center gap-2 w-full"
|
||||
classList={{ 'input-error': field.helpers.error }}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4 opacity-70"
|
||||
>
|
||||
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
|
||||
</svg>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
class="grow w-full"
|
||||
placeholder="Username"
|
||||
{...field.props}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<Show when={field.helpers.error}>
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-red-600">
|
||||
{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>
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
</label>
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
mode="input"
|
||||
name="password"
|
||||
formHandler={formHandler}
|
||||
render={(field) => (
|
||||
<label class="form-control w-full">
|
||||
<label
|
||||
class="input input-bordered flex items-center gap-2 w-full"
|
||||
classList={{ 'input-error': field.helpers.error }}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4 opacity-70"
|
||||
>
|
||||
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
|
||||
</svg>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
class="grow w-full"
|
||||
placeholder="Password"
|
||||
{...field.props}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<Show when={field.helpers.error}>
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-red-600">
|
||||
{field.helpers.errorMessage}
|
||||
</FormErrorMessage>
|
||||
</Show>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Button size="sm" type="submit">
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
</label>
|
||||
)}
|
||||
/>
|
||||
<div class="card-actions justify-end mt-5">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{language.ui.login}
|
||||
</Button>
|
||||
</Stack>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user