add FE source

2024-05-13 03:16:06 +00:00
parent a7e31b8ca9
commit 4a4d8e762c
44 changed files with 3727 additions and 0 deletions
--- a/fuware-fe/src/pages/Login.jsx
+++ b/fuware-fe/src/pages/Login.jsx
@ -0,0 +1,141 @@
+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;
+  place-items: center;
+
+  .login-wrap {
+    width: 500px;
+    margin: 0 auto;
+
+    .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">
+          gsdfgj;l
+        </Center>
+        <div className="login-box">
+          <form autoComplete="off" onSubmit={submit}>
+            <Stack direction="column">
+              <Center w="100%" mb="$5">
+                <Heading level="1" size="xl">
+                  {language.login}
+                </Heading>
+              </Center>
+              <Field
+                mode="input"
+                name="username"
+                formHandler={formHandler}
+                render={(field) => (
+                  <FormControl mb="$3" invalid={field.helpers.error}>
+                    <FormLabel for="username">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">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">
+                Login
+              </Button>
+            </Stack>
+          </form>
+        </div>
+      </div>
+    </LoginPage>
+  )
+}