update backend

fuware-fe/src/components/Header.jsx

@@ -67,7 +67,7 @@ export default function Header() {
               colorScheme="info"
               onClick={logOut}
             >
-              {language.logout}
+              {language.ui.logout}
             </Button>
           </Show>
         </Flex>

fuware-fe/src/components/Navbar/Navbar.jsx

@@ -12,7 +12,7 @@ const NAVBAR_ITEM = [
   {
     path: '/dashboard',
     icon: IconDashboard,
-    text: language?.dashboard,
+    text: language?.ui.dashboard,
   },
 ]
 

fuware-fe/src/lang/vi.json

@@ -1,10 +1,14 @@
 {
-  "login": "Đăng Nhập",
-  "logout": "Đăng xuất",
-  "dashboard": "Bảng điều khiển",
-  "champion": "Tướng",
-  "skin": "Trang phục",
-  "list": "Danh sách",
-  "favourite": "Yêu thích",
-  "bought": "Đã Mua"
+  "ui": {
+    "username": "Tên người dùng",
+    "password": "Mật khẩu",
+    "login": "Đăng Nhập",
+    "logout": "Đăng xuất",
+    "dashboard": "Bảng điều khiển"
+  },
+  "message": {
+    "CREATED_USER": "Username already registered!",
+    "LOGIN_WRONG": "Your username or password input is wrong!",
+    "USER_LOCK": "Your Account was locked"
+  }
 }

fuware-fe/src/pages/Login.jsx

@@ -23,12 +23,22 @@ const LoginPage = styled('div')`
   width: 100%;
   height: 100svh;
   display: flex;
+  padding-left: 15px;
+  padding-right: 15px;
   place-items: center;
 
   .login-wrap {
-    width: 500px;
+    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;
@@ -87,14 +97,21 @@ export default function Login() {
     <LoginPage>
       <div class="login-wrap">
         <Center width="100%" mb="$10">
-          gsdfgj;l
+          <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 className="login-box">
+        <div class="login-box">
           <form autoComplete="off" onSubmit={submit}>
             <Stack direction="column">
               <Center w="100%" mb="$5">
                 <Heading level="1" size="xl">
-                  {language.login}
+                  {language.ui.login}
                 </Heading>
               </Center>
               <Field
@@ -103,7 +120,9 @@ export default function Login() {
                 formHandler={formHandler}
                 render={(field) => (
                   <FormControl mb="$3" invalid={field.helpers.error}>
-                    <FormLabel for="username">Username:</FormLabel>
+                    <FormLabel for="username">
+                      {language.ui.username}:
+                    </FormLabel>
                     <Input id="username" type="text" {...field.props} />
                     <Show when={field.helpers.error}>
                       <FormErrorMessage>
@@ -119,7 +138,9 @@ export default function Login() {
                 formHandler={formHandler}
                 render={(field) => (
                   <FormControl mb="$5" invalid={field.helpers.error}>
-                    <FormLabel for="username">Password:</FormLabel>
+                    <FormLabel for="username">
+                      {language.ui.password}:
+                    </FormLabel>
                     <Input id="password" type="password" {...field.props} />
                     <Show when={field.helpers.error}>
                       <FormErrorMessage>
@@ -130,7 +151,7 @@ export default function Login() {
                 )}
               />
               <Button size="sm" type="submit">
-                Login
+                {language.ui.login}
               </Button>
             </Stack>
           </form>

fuware-fe/src/utils/enum.js

@@ -1,3 +1,5 @@
+const PRODUCTION = import.meta.env.NODE_ENV === 'production'
+
 export const SECRET_KEY = 'bGV0IGRvIGl0IGZvciBlbmNyeXRo'
 export const STORE_KEY = 'dXNlciBsb2dpbiBpbmZv'
-export const LOGIN_KEY = import.meta.env.VITE_LOGIN_KEY
+export const LOGIN_KEY = PRODUCTION ? import.meta.env.VITE_LOGIN_KEY : 'logcook'