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") {
-				this.beforeLoginLocation = window.location.pathname
-			}
+			// if (window.location.pathname !== "/login") {
+			// 	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,29 +98,19 @@ export default class Login extends React.Component {
         if (typeof this.props.onDone === "function") {
             this.props.onDone()
         }
-    }
 
-    componentWillUnmount() {
-        window.app.SidebarController.toogleVisible(true)
-        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)
+        if (typeof this.props.close === "function") {
+            this.props.close()
         }
     }
 
     render() {
-        return (
-            <div className="app_login">
+        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">
@@ -128,7 +118,6 @@ export default class Login extends React.Component {
                 </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
@@ -137,7 +126,5 @@ export default class Login extends React.Component {
                 onFinish={this.handleFinish}
             />
         </div>
-            </div>
-        )
     }
 }

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

@@ -1,7 +1,4 @@
-.app_login {
-	height: 100vh;
-	width: 100vw;
-
+.login {
 	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,8 +379,11 @@ export default class FormGenerator extends React.Component {
 			return null
 		}
 
-		return (
-			<div>
+		return <div
+			key={this.props.id}
+			id={this.props.id}
+			className="formWrapper"
+		>
 			<Form
 				hideRequiredMark={this.props.hideRequiredMark ?? false}
 				name={this.props.name ?? "new_form"}
@@ -390,6 +396,5 @@ export default class FormGenerator extends React.Component {
 			</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,7 +31,17 @@ export default class ThemeExtension extends Extension {
 				this.resetDefault()
 			})
 
+			await this.initialize()
+		},
+	]
+
+	static get currentVariant() {
+		return document.documentElement.style.getPropertyValue("--themeVariant")
+	}
+
+	initialize = async () => {
 		let theme = this.getStoragedTheme()
+
 		const modifications = this.getStoragedModifications()
 		const variantKey = this.getStoragedVariant()
 
@@ -57,11 +67,6 @@ export default class ThemeExtension extends Extension {
 
 		// apply variation
 		this.applyVariant(variantKey)
-		},
-	]
-
-	static get currentVariant() {
-		return document.documentElement.style.getPropertyValue("--themeVariant")
 	}
 
 	getRootVariables = () => {
@@ -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"