Merge pull request #58 from ragestudio/login-drawer

Login drawer

.corenode

@@ -1,3 +1,3 @@
 {
-  "version": "0.17.1"
+  "version": "0.17.2"
 }

package.json

@@ -9,5 +9,5 @@
   "dependencies": {
     "corenode": "^0.28.26"
   },
-  "version": "0.17.1"
+  "version": "0.17.2"
 }

packages/app/constants/settings/account.jsx

@@ -144,6 +144,6 @@ export default [
         "type": "Button",
         "icon": "LogOut",
         "title": "Logout",
-        "emitEvent": "logout",
+        "emitEvent": "session.logout",
     }
 ]

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comty",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "license": "MIT",
   "scripts": {
     "dev": "vite",

packages/app/src/App.jsx

@@ -53,7 +53,7 @@ import { Translation } from "react-i18next"
 import { Session, User } from "models"
 import config from "config"
 
-import { NotFound, RenderError, Crash, Settings, Navigation } from "components"
+import { NotFound, RenderError, Crash, Settings, Navigation, Login } from "components"
 import { Icons } from "components/Icons"
 
 import Layout from "./layout"
@@ -62,7 +62,16 @@ import * as Render from "extensions/render.extension.jsx"
 import "theme/index.less"
 
 class App extends React.Component {
-	//static debugMode = true
+	//static debugMode = true // this will enable debug mode of evite app (dah...)
+
+	sessionController = new Session()
+
+	userController = new User()
+
+	state = {
+		session: null,
+		user: null,
+	}
 
 	loadingMessage = false
 
@@ -71,6 +80,16 @@ class App extends React.Component {
 	}
 
 	static eventsHandlers = {
+		"app.createLogin": async function () {
+			app.DrawerController.open("login", Login, {
+				componentProps: {
+					sessionController: this.sessionController
+				}
+			})
+		},
+		"session.logout": async function () {
+			await this.sessionController.logout()
+		},
 		"new_session": async function () {
 			await this.flushState()
 			await this.initialization()
@@ -85,11 +104,12 @@ class App extends React.Component {
 			this.eventBus.emit("forceToLogin")
 		},
 		"forceToLogin": function () {
-			if (window.location.pathname !== "/login") {
+			// if (window.location.pathname !== "/login") {
-				this.beforeLoginLocation = window.location.pathname
+			// 	this.beforeLoginLocation = window.location.pathname
-			}
+			// }
 
-			window.app.setLocation("/login")
+			// window.app.setLocation("/login")
+			app.eventBus.emit("app.createLogin")
 		},
 		"invalid_session": async function (error) {
 			await this.sessionController.forgetLocalSession()
@@ -246,13 +266,6 @@ class App extends React.Component {
 		}
 	}
 
-	sessionController = new Session()
-	userController = new User()
-	state = {
-		session: null,
-		user: null,
-	}
-
 	flushState = async () => {
 		await this.setState({ session: null, user: null })
 	}

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

@@ -98,46 +98,33 @@ export default class Login extends React.Component {
         if (typeof this.props.onDone === "function") {
             this.props.onDone()
         }
-    }
 
-    componentWillUnmount() {
+        if (typeof this.props.close === "function") {
-        window.app.SidebarController.toogleVisible(true)
+            this.props.close()
-        window.app.HeaderController.toogleVisible(true)
-    }
-
-    componentDidMount() {
-        const sidebarVisible = window.app.SidebarController.isVisible()
-        const headerVisible = window.app.HeaderController.isVisible()
-
-        if (sidebarVisible) {
-            window.app.SidebarController.toogleVisible(false)
-        }
-
-        if (headerVisible) {
-            window.app.HeaderController.toogleVisible(false)
         }
     }
 
     render() {
-        return (
+        return <div className="login">
-            <div className="app_login">
+            <div className="header">
-                {this.props.session && <div className="session_available">
+                <div className="logo">
-                    <h3><Icons.AlertCircle /> You already have a valid session.</h3>
+                    <img src={config.logo?.full} />
-                    <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>}
-                <div>
-                    <FormGenerator
-                        name="normal_login"
-                        renderLoadingIcon
-                        className="login-form"
-                        items={formInstance}
-                        onFinish={this.handleFinish}
-                    />
                 </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

@@ -1,7 +1,4 @@
-.app_login {
+.login {
-	height: 100vh;
-	width: 100vw;
-
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -10,6 +7,17 @@
 	> div {
 		margin-bottom: 20px;
 	}
+
+	.header {
+		.logo {
+			width: 15vw;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
 }
 
 .login-form {

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

@@ -16,6 +16,8 @@ import {
 } from "antd"
 import HeadShake from "react-reveal/HeadShake"
 
+import "./index.less"
+
 const allComponents = {
 	Input,
 	Button,
@@ -169,8 +171,9 @@ export default class FormGenerator extends React.Component {
 
 	renderValidationIcon() {
 		if (this.props.renderLoadingIcon && this.state.validating) {
-			return <Icons.LoadingOutlined spin style={{ marginTop: "7px" }} />
+			return <Icons.LoadingOutlined spin style={{ margin: 0 }} />
 		}
+
 		return null
 	}
 
@@ -376,20 +379,22 @@ export default class FormGenerator extends React.Component {
 			return null
 		}
 
-		return (
+		return <div
-			<div>
+			key={this.props.id}
-				<Form
+			id={this.props.id}
-					hideRequiredMark={this.props.hideRequiredMark ?? false}
+			className="formWrapper"
-					name={this.props.name ?? "new_form"}
+		>
-					onFinish={(e) => this.handleFinish(e)}
+			<Form
-					ref={this.ref}
+				hideRequiredMark={this.props.hideRequiredMark ?? false}
-					{...this.props.formProps}
+				name={this.props.name ?? "new_form"}
-				>
+				onFinish={(e) => this.handleFinish(e)}
-					{this.renderItems(this.props.items)}
+				ref={this.ref}
-					<Form.Item key="result" help={helpStatus} validateStatus={validateStatus} />
+				{...this.props.formProps}
-				</Form>
+			>
-				{this.renderValidationIcon()}
+				{this.renderItems(this.props.items)}
-			</div>
+				<Form.Item key="result" help={helpStatus} validateStatus={validateStatus} />
-		)
+			</Form>
+			{this.renderValidationIcon()}
+		</div>
 	}
 }

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

@@ -0,0 +1,5 @@
+.formWrapper {
+    svg {
+        margin: 0;
+    }
+}

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"

packages/app/src/extensions/theme.extension.jsx

@@ -31,32 +31,7 @@ export default class ThemeExtension extends Extension {
 				this.resetDefault()
 			})
 
-			let theme = this.getStoragedTheme()
+			await this.initialize()
-			const modifications = this.getStoragedModifications()
-			const variantKey = this.getStoragedVariant()
-
-			if (!theme) {
-				// load default theme
-				theme = this.getDefaultTheme()
-			} else {
-				// load URL and initialize theme
-			}
-
-			// set global theme
-			this.theme = theme
-
-			// override with static vars
-			if (theme.staticVars) {
-				this.update(theme.staticVars)
-			}
-
-			// override theme with modifications
-			if (modifications) {
-				this.update(modifications)
-			}
-
-			// apply variation
-			this.applyVariant(variantKey)
 		},
 	]
 
@@ -64,6 +39,36 @@ export default class ThemeExtension extends Extension {
 		return document.documentElement.style.getPropertyValue("--themeVariant")
 	}
 
+	initialize = async () => {
+		let theme = this.getStoragedTheme()
+
+		const modifications = this.getStoragedModifications()
+		const variantKey = this.getStoragedVariant()
+
+		if (!theme) {
+			// load default theme
+			theme = this.getDefaultTheme()
+		} else {
+			// load URL and initialize theme
+		}
+
+		// set global theme
+		this.theme = theme
+
+		// override with static vars
+		if (theme.staticVars) {
+			this.update(theme.staticVars)
+		}
+
+		// override theme with modifications
+		if (modifications) {
+			this.update(modifications)
+		}
+
+		// apply variation
+		this.applyVariant(variantKey)
+	}
+
 	getRootVariables = () => {
 		let attributes = document.documentElement.getAttribute("style").trim().split(";")
 		attributes = attributes.slice(0, (attributes.length - 1))
@@ -108,7 +113,7 @@ export default class ThemeExtension extends Extension {
 
 		window.app.settings.set("primaryColor", this.theme.staticVars.primaryColor)
 
-		return this.init()
+		this.initialize()
 	}
 
 	update = (update) => {

packages/app/src/pages/users/index.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import * as antd from "antd"
-import { Icons } from "components/icons"
+import { Icons } from "components/Icons"
 import { ActionsBar, SelectableList } from "components"
 
 import "./index.less"

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comty-desktop",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "main": "main/index.js",
   "license": "MIT",
   "scripts": {

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comty/server",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "main": "dist/index.js",
   "scripts": {
     "dev": "nodemon --ignore dist/ --exec corenode-node ./src/index.js"

packages/streaming-server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comty/streaming-server",
   "author": "RageStudio",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "main": "dist/index.js",
   "scripts": {
     "dev": "nodemon --ignore dist/ --exec corenode-node ./src/index.js"