added Login component

packages/app/src/components/Login/index.jsx

@@ -0,0 +1,132 @@
+import React from "react"
+import * as antd from "antd"
+import { FormGenerator } from "components"
+import { Icons } from "components/Icons"
+
+import config from "config"
+
+import "./index.less"
+
+const formInstance = [
+    {
+        id: "username",
+        element: {
+            component: "Input",
+            icon: "User",
+            placeholder: "Username",
+            props: {
+                autoCorrect: "off",
+                autoCapitalize: "none",
+                className: "login-form-username",
+            },
+        },
+        item: {
+            hasFeedback: true,
+            rules: [
+                {
+                    required: true,
+                    message: 'Please input your Username!',
+                },
+            ],
+        }
+    },
+    {
+        id: "password",
+        element: {
+            component: "Input",
+            icon: "Lock",
+            placeholder: "Password",
+            props: {
+                type: "password"
+            }
+        },
+        item: {
+            hasFeedback: true,
+            rules: [
+                {
+                    required: true,
+                    message: 'Please input your Password!',
+                },
+            ],
+        }
+    },
+    {
+        id: "login_btn",
+        withValidation: true,
+        element: {
+            component: "Button",
+            props: {
+                icon: "User",
+                children: "Login",
+                type: "primary",
+                htmlType: "submit"
+            }
+        }
+    },
+]
+
+export default class Login extends React.Component {
+    static pageStatement = {
+        bottomBarAllowed: false
+    }
+
+    handleFinish = async (values, ctx) => {
+        ctx.toogleValidation(true)
+
+        const payload = {
+            username: values.username,
+            password: values.password,
+            allowRegenerate: values.allowRegenerate,
+        }
+
+        this.props.sessionController.login(payload, (error, response) => {
+            ctx.toogleValidation(false)
+            ctx.clearErrors()
+
+            if (error) {
+                ctx.shake("all")
+                return ctx.error("result", error)
+            } else {
+                if (response.status === 200) {
+                    this.onDone()
+                }
+            }
+        })
+    }
+
+    onDone = () => {
+        if (typeof this.props.onDone === "function") {
+            this.props.onDone()
+        }
+
+        if (typeof this.props.close === "function") {
+            this.props.close()
+        }
+    }
+
+    render() {
+        return (
+            <div className="login">
+                <div className="header">
+                    <div className="logo">
+                        <img src={config.logo?.full} />
+                    </div>
+                </div>
+                {this.props.session && <div className="session_available">
+                    <h3><Icons.AlertCircle /> You already have a valid session.</h3>
+                    <div className="session_card">
+                        @{this.props.session.username}
+                    </div>
+                    <antd.Button type="primary" onClick={() => window.app.setLocation(config.app?.mainPath ?? "/main")} >Go to main</antd.Button>
+                </div>}
+                <FormGenerator
+                    name="normal_login"
+                    renderLoadingIcon
+                    className="login-form"
+                    items={formInstance}
+                    onFinish={this.handleFinish}
+                />
+            </div>
+        )
+    }
+}

packages/app/src/components/Login/index.less

@@ -0,0 +1,63 @@
+.login {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	> div {
+		margin-bottom: 20px;
+	}
+
+	.header {
+		.logo {
+			width: 15vw;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+
+.login-form {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.login-form-username {
+	font-size: 20px!important;
+	
+	input {
+		padding: 20px!important;
+		font-size: 20px!important;
+	}
+}
+
+.session_available {
+	width: fit-content;
+	height: fit-content;
+
+	padding: 20px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	border: 1px solid #e5e5e5;
+	border-radius: 8px;
+
+	.session_card {
+		width: fit-content;
+		height: fit-content;
+
+		margin: 10px;
+        padding: 5px 10px;
+
+		border: 1px solid #e5e5e5;
+		border-radius: 8px;
+	}
+}

packages/app/src/components/index.js

@@ -22,6 +22,7 @@ export { default as Skeleton } from "./Skeleton"
 export { default as Navigation } from "./Navigation"
 export { default as ImageUploader } from "./ImageUploader"
 export { default as ImageViewer } from "./ImageViewer"
+export { default as Login } from "./Login"
 
 // BUTTONS
 export { default as LikeButton } from "./LikeButton"