update: core distribution libs & helpers

update: app model

added: electron main ipcRenderer getSystemPreferences

added: sidebar_collapse support

.umirc.js

@@ -12,9 +12,13 @@ export default defineConfig({
   targets: { ie: 9 },
   dva: { immer: true },
   ignoreMomentLocale: true,
+  mountElementId: "root",
   nodeModulesTransform: {
     type: 'none',
   },
+  // ssr: {
+  //   devServerRender: true,
+  // },
   alias: {
     antd: resolve(__dirname, './node_modules/antd'),
     api: resolve(__dirname, './node_modules/@ragestudio/ycorejs-lib'), // ./api

globals/sidebar_menu.js

@@ -89,7 +89,7 @@ export default [
     {
         id: 'logout',
         title: 'Logout',
-        icon: <Icons.LogOut style={{ color: 'red', marginRight: '10px' }} />,
+        icon: <Icons.LogOut style={{ color: '#ef233c', marginRight: '10px' }} />,
         attributes: {
             position: "bottom",
             require: 'login'
@@ -98,7 +98,7 @@ export default [
     {
         id: 'login',
         title: 'Signin',
-        icon: <Icons.LogIn style={{ color: 'blue', marginRight: '10px' }} />,
+        icon: <Icons.LogIn style={{ color: '#5390d9', marginRight: '10px' }} />,
         attributes: {
             position: "bottom",
             require: "guest"

main/index.js

@@ -9,6 +9,7 @@ const {
   shell,
   screen,
   BrowserView,
+  systemPreferences, 
   Notification,
   globalShortcut
 } = require('electron')
@@ -39,7 +40,21 @@ const isNotDisturb = getDoNotDisturb()
 
 // Prevent multiple instances
 if (!gotTheLock) {
-  app.quit();
+  app.quit()
+}
+
+function relaunchApp(){
+  mainWindow.close()
+  app.relaunch()
+}
+
+function resumeApp(){
+  if (mainWindow) {
+    mainWindow.show()
+    mainWindow.focus()
+  }else{
+    createWindow()
+  }
 }
 
 function contextualMenu(payload){
@@ -78,7 +93,6 @@ function notify(params) {
 }
 
 async function __init() {
-  log.log('Notify support => ', notifySupport)
   createWindow()
 }
 
@@ -105,16 +119,16 @@ function createWindow() {
       // Disable in dev since I think hot reload is messing with it
       webSecurity: !is.dev()
     }
-  });
+  })
 
   if (is.dev()) {
     globalShortcut.register('CommandOrControl+R', () => {
-      mainWindow.reload();
-    });
+      mainWindow.reload()
+    })
 
     globalShortcut.register('F5', () => {
-      mainWindow.reload();
-    });
+      mainWindow.reload()
+    })
   }
 
   mainWindow.webContents.session.webRequest.onHeadersReceived(
@@ -122,18 +136,12 @@ function createWindow() {
       urls: ['http://*/*', 'https://*/*']
     },
     (details, callback) => {
-      // eslint-disable-next-line
-      delete details.responseHeaders['Access-Control-Allow-Origin'];
-      // eslint-disable-next-line
-      delete details.responseHeaders['access-control-allow-origin'];
+      delete details.responseHeaders['Access-Control-Allow-Origin']
+      delete details.responseHeaders['access-control-allow-origin']
       if (details.url.includes('www.google-analytics.com')) {
-        // eslint-disable-next-line
-        details.responseHeaders['Access-Control-Allow-Origin'] = [
-          'http://localhost:8000'
-        ];
+        details.responseHeaders['Access-Control-Allow-Origin'] = [ app_path ]
       } else {
-        // eslint-disable-next-line
-        details.responseHeaders['Access-Control-Allow-Origin'] = ['*'];
+        details.responseHeaders['Access-Control-Allow-Origin'] = ['*']
       }
       callback({
         cancel: false,
@@ -150,41 +158,41 @@ function createWindow() {
 
   const trayMenuTemplate = [
     {
-      label: '🧰 DevTools',
+      label: '🧰 Open DevTools',
       click: () => mainWindow.webContents.openDevTools()
     },
     {
-      label: '🔄 Reload',
+      label: '🔄 Relaunch',
       click: () => {
-        mainWindow.close()
-        app.relaunch()
+        relaunchApp()
       }
     },
     {
       label: '🛑 Quit',
-      click: () => mainWindow.close()
+      click: () => app.quit()
     }
   ];
 
-  tray.setContextMenu(Menu.buildFromTemplate(trayMenuTemplate));
-  tray.setToolTip(packagejson.title);
-  tray.on('double-click', () => mainWindow.show());
+  tray.setContextMenu(Menu.buildFromTemplate(trayMenuTemplate))
+  tray.setToolTip(packagejson.title)
+  tray.on('double-click', () => resumeApp())
+
+  mainWindow.loadURL(app_path)
+  mainWindow.focus()
 
-  mainWindow.loadURL(app_path);
   if (is.dev()) {
-    
-    mainWindow.webContents.openDevTools();
+    mainWindow.webContents.openDevTools()
   }
 
   // const handleRedirect = (e, url) => {
   //   if (url !== mainWindow.webContents.getURL()) {
-  //     e.preventDefault();
-  //     shell.openExternal(url);
+  //     e.preventDefault()
+  //     shell.openExternal(url)
   //   }
   // };
 
-  // mainWindow.webContents.on('will-navigate', handleRedirect);
-  // mainWindow.webContents.on('new-window', handleRedirect);
+  // mainWindow.webContents.on('will-navigate', handleRedirect)
+  // mainWindow.webContents.on('new-window', handleRedirect)
 }
 
 app.on('ready', () => {
@@ -202,41 +210,41 @@ app.on('ready', () => {
     notify({title: "Starting development server..."})
     waitOn({ resources: [app_path] }, function (err) {
       if (err) {
-        return log.log(err, ' | electron Aborted create window')
+        return log.log(err)
       }
       __init()
       loadWindow.close()
-    });
+    })
   }else{
     __init()
   }
-});
+})
 
 app.on('window-all-closed', () => {
-  app.quit();
-});
+  mainWindow = null;
+})
 
 app.on('before-quit', async () => {
   mainWindow.removeAllListeners('close');
   mainWindow = null;
-});
+})
 
 ipcMain.handle('update-progress-bar', (event, p) => {
   mainWindow.setProgressBar(p);
-});
+})
 
 ipcMain.handle('hide-window', () => {
   if (mainWindow) {
     mainWindow.hide();
   }
-});
+})
 
 ipcMain.handle('show-window', () => {
   if (mainWindow) {
     mainWindow.show();
     mainWindow.focus();
   }
-});
+})
 
 ipcMain.handle('min-max-window', () => {
   if (mainWindow.isMaximized()) {
@@ -244,25 +252,27 @@ ipcMain.handle('min-max-window', () => {
   } else if (mainWindow.maximizable) {
     mainWindow.maximize();
   }
-});
+})
+
+ipcMain.handle('getSystemPreferences', () => {
+  return systemPreferences
+})
 
 ipcMain.handle('minimize-window', () => {
   mainWindow.minimize();
-});
+})
 
 ipcMain.handle('quit-app', () => {
-  mainWindow.close();
-});
+  app.quit();
+})
 
 ipcMain.handle('open-devtools', () => {
   mainWindow.webContents.openDevTools({ mode: 'undocked' });
-});
+})
 
-ipcMain.handle('appRestart', () => {
-  log.log('Restarting app');
-  app.relaunch();
-  mainWindow.close();
-});
+ipcMain.handle('appRelaunch', () => {
+  relaunchApp()
+})
 
 ipcMain.handle('app_notify', (event, payload) => {
   notify(payload)

package.json

@@ -3,7 +3,7 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.9.18",
+  "version": "0.9.25",
   "stage": "dev-pre",
   "description": "",
   "author": "RageStudio",
@@ -22,7 +22,7 @@
   "scripts": {
     "start": "umi dev",
     "postinstall": "electron-builder install-app-deps",
-    "electronDev": "concurrently \"electron .\" \"umi dev\"",
+    "electronDev": "concurrently \"electron .\" \"npm start\"",
     "build": "npm run build:main && npm run build:renderer",
     "build:main": "ESLINT=none roadhog build",
     "build:renderer": "ESLINT=none umi build",
@@ -51,7 +51,6 @@
     "electron-updater": "^4.3.4",
     "enquire-js": "^0.2.1",
     "feather-reactjs": "^2.0.13",
-    "heroicons": "^0.4.2",
     "html2canvas": "^1.0.0-rc.7",
     "jquery": "^3.5.1",
     "jsonwebtoken": "^8.5.1",
@@ -61,7 +60,6 @@
     "moment": "^2.28.0",
     "node-sass": "^4.13.1",
     "nprogress": "^0.2.0",
-    "package": "^1.0.1",
     "path-to-regexp": "^6.1.0",
     "platform": "^1.3.6",
     "radium": "^0.26.0",
@@ -83,7 +81,6 @@
     "redux-thunk": "^2.3.0",
     "request": "^2.88.2",
     "simple-icons": "^3.8.0",
-    "slash": "^3.0.0",
     "socket.io-client": "^2.3.0",
     "stack-trace": "0.0.10",
     "store": "^2.0.12",
@@ -112,7 +109,10 @@
     "electron-rebuild": "^1.7.3",
     "electron-reloader": "^1.0.1",
     "jsdoc": "^3.6.5",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.1",
+    "style-loader": "^1.2.1",
     "typescript": "^3.8.3",
-    "umi": "^3.2.20"
+    "umi": "^3.2.22"
   }
 }

src/components/Layout/Overlay/components/cards/__searchBar.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './__searchBar.less'
-import {newSearch} from "core/cores/interface_helper"
+import {newSearch} from "core/helpers/overlay"
 
 export default class __searchBar extends React.Component{
     state = {

src/components/Layout/Overlay/index.js

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import styles from './index.less'
 import * as errorhandler from 'core/libs/errorhandler'
 import * as antd from 'antd'
-import { router } from 'core/cores'
+import { router } from 'core/libs'
 import {
   Primary,
   Secondary,

src/components/Layout/Sider/default/index.js

@@ -6,12 +6,16 @@ import classnames from 'classnames'
 import { connect } from 'umi'
 
 @connect(({ app }) => ({ app }))
-export default class Sider_Default extends React.PureComponent {
+export default class Sider_Default extends React.Component {
   state = {
     loading: true,
     menus: null
   }
 
+  toogleCollapse(){
+    window.toogleSidebarCollapse()
+  }
+
   componentDidMount(){
     this.setState({ menus: this.props.menus, loading: false })
   }
@@ -23,9 +27,11 @@ export default class Sider_Default extends React.PureComponent {
       let componentPosition = e.attributes.position || "top" 
      
       return componentPosition == position
-        ? (<antd.Menu.Item key={e.id}>
-        {e.icon} <span>{e.title}</span>
-        </antd.Menu.Item>)
+        ? (
+          <antd.Menu.Item icon={e.icon} key={e.id}>
+            <span>{e.title}</span>
+          </antd.Menu.Item>
+        )
         : null
     })
   }
@@ -44,23 +50,25 @@ export default class Sider_Default extends React.PureComponent {
 
   render() {
     const { handleClickMenu } = this.props
-    return this.state.loading? null : (
+    if (this.state.loading) {
+      return null
+    }
+    return (
       <div className={styles.left_sider_wrapper}>
         <antd.Layout.Sider
+          collapsed={this.props.app.sidebar_collapsed || false}
           trigger={null}
           className={styles.left_sider_container}
           width="175px"
-          style={{ flex:'unset', maxWidth: 'unset', minWidth: '175px', width: '100%'}}
+          style={{ flex:'unset' }}
         >
           <div onClick={() => {handleClickMenu({key: ''})}} className={classnames(styles.left_sider_header, {[styles.emb]: this.props.app.embedded})}>
             <img className={styles.logotype} src={this.props.logo} />
-          </div>
-         
+          </div>         
           <div className={styles.left_sider_menuContainer}>
               <antd.Menu
-                selectable={true}
+                selectable={false}
                 className={styles.left_sider_menuItems}
-                mode="vertical"
                 onClick={handleClickMenu}
               >
                 {this.renderMenus(this.state.menus, "top")}
@@ -70,7 +78,6 @@ export default class Sider_Default extends React.PureComponent {
                 <antd.Menu
                   selectable={false}
                   className={styles.left_sider_menuItems}
-                  mode="vertical"
                   onClick={handleClickMenu}
                 >
                   {this.renderMenus(this.state.menus, "bottom")}

src/components/Layout/Sider/default/index.less

@@ -22,49 +22,13 @@
     .ant-layout-sider {
       background-color: transparent;
       float: right;
+
       .ant-menu {
         font-weight: 700;
         color: unset;
         vertical-align: middle;
         // margin: 0 0 0 5px;
-      }
-
-      .ant-menu-item {
-        -webkit-app-region: no-drag;
-        transition: @transition-ease-inout;
-
-        border-radius: 4px 8px 8px 4px;
-        padding: 2px 0 2px 24px;
-        
-        text-align: left;
-      }
-
-      .ant-menu-item:hover {
-        border-radius: 8px;
-        transform: translate(10px,0);
-        
-        // background: linear-gradient(49deg, rgba(255,255,255,1) 32%, rgba(255, 255, 255, 0) 100%);
-        backdrop-filter: blur(2px);
-        // border-left: 10px @app_accent_gradient solid;
-        box-shadow: -2px 2px 1px 0 rgba(51, 51, 51, 0.13);
-        color: rgb(102, 102, 102);
-      }
-
-      .ant-menu-item-selected {
-        background-color: unset;
-        // background: linear-gradient(90deg, rgb(255, 230, 0) 2%, rgba(255,255,255,0.5) 10%);
-    
-      }
-
-      .anticon {
-        font-size: @left_sider_sizeIcons;
-      }
-
-     
-      .ant-menu-inline-collapsed,
-      .antd-menu-vertical-left,
-      .ant-menu-vertical {
-        border-right: 0 solid transparent;
+        // border-right: 0!important;
       }
     }
   }
@@ -117,7 +81,6 @@
 .left_sider_menuContainer {
   height: 100%;
   margin: 18px 0 8px;
-  flex: 1;
 
   :global {
     .ant-layout-sider-children {
@@ -126,24 +89,50 @@
       justify-content: space-between;
     }
 
-    .ant-layout-sider-collapsed {
+    .ant-menu-item {
+      -webkit-app-region: no-drag;
+      transition: @transition-ease-inout;
+
+      border-radius: 4px 8px 8px 4px;
+      padding: 2px 0 2px 24px;
+      border-right: 0!important;
+
+      text-align: left;
+    }
+
+    .ant-menu-item:hover {
+      border-radius: 8px;
+      transform: translate(10px,0);
+      
+      // background: linear-gradient(49deg, rgba(255,255,255,1) 32%, rgba(255, 255, 255, 0) 100%);
+      backdrop-filter: blur(2px);
+      // border-left: 10px @app_accent_gradient solid;
+      box-shadow: -2px 2px 1px 0 rgba(51, 51, 51, 0.13);
+      color: rgb(102, 102, 102);
+    }
+
+    .ant-menu-item-selected {
+      background-color: unset;
+      // background: linear-gradient(90deg, rgb(255, 230, 0) 2%, rgba(255,255,255,0.5) 10%);
+    }
+
+    .anticon {
+      font-size: @left_sider_sizeIcons;
+    }
+   
+    .ant-layout-sider-collapsed, .ant-menu-inline-collapsed {
       .ant-menu-item {
-        left: 0;
-        margin: 0;
-        padding: 0;
-      }
-
-      .ant-menu-inline-collapsed>.ant-menu-item {
-        padding: 0;
-        left: 0;
+        > span{
+          visibility: hidden;
+        }
+      } 
+      .ant-menu-item:hover {
+        box-shadow: unset;
       }
+      
     }
 
-    .ant-menu-inline .ant-menu-item {
-      font-family: @__Global_general_font_family;
-    }
-
-    .ant-menu-dark .ant-menu-item a {
+    .ant-menu-item a {
       color: @AppTheme_global_color;
     }
   }
@@ -152,7 +141,7 @@
 .left_sider_menuItems {
   background-color: transparent;
   margin-bottom: 8px;
-  width: 100%;
+  //width: 100%;
   font-weight: 500;
 
   animation: fadein 0.5s;

src/components/Layout/Sider/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { app_config } from 'config'
-import { router } from 'core/cores'
+import { router } from 'core/libs'
 
 import Sider_Mobile from './mobile'
 import Sider_Default from './default'

src/components/PostCard/index.js

@@ -8,7 +8,7 @@ import Icon from '@ant-design/icons'
 import classnames from 'classnames'
 
 import settings from 'core/libs/settings'
-import { router } from 'core/cores'
+import { router } from 'core/libs'
 import LikeBtn from './components/like'
 import { connect } from 'umi'
 

src/core/cores/interface_helper/index.js

@@ -1,23 +0,0 @@
-/**
-* 
-* In this function it is the one that collects all the errors and then displays them by 'payload'
-* 
-* @param {HTMLTableElement} Interface Helper - Interface Errors
-* Checks if a character is in the control string
-* @param {string} position
-* @param {string} id
-* @param {string} mode
-* @param {string} element
-* @param {string} NAH
-* @return {void} Nothing
-* @param {Array} payload - TThis element generates the errors
-*/
-
-// Reducers & helpers
-import { Swapper } from 'components/Layout/Overlay'
-import { useSelector } from 'umi';
-import { connect } from 'dva';
-
-export function newSearch(payload){
-    Swapper.openFragment({ id: 'search', position: 'primary' ,mode: 'half', element: <div>NAH</div> })
-}

src/core/helpers/index.js

@@ -1,5 +1,3 @@
-export * from './router'
-
 import * as user from './user'
 import * as session from './session'
 

src/core/helpers/overlay/index.js

@@ -0,0 +1,6 @@
+
+import { Swapper } from 'components/Layout/Overlay'
+
+export function newSearch(payload){
+    Swapper.openFragment({ id: 'search', position: 'primary' ,mode: 'half', element: <div>NAH</div> })
+}

src/core/index.js

@@ -52,7 +52,7 @@ export function generatePostURI(id){
 export function writeToClipboard(text){
   navigator.clipboard.writeText(text)
   .then(() => {
-    libs.Interface.notify.info('Copy to clipboard')
+    libs.appInterface.notify.info('Copy to clipboard')
   }, () => {
     /* failure */
   })

src/core/libs/errorhandler/index.js

@@ -1,4 +1,4 @@
-import { notify } from 'core/libs/interface/notify'
+import { appInterface } from 'core/libs'
 import verbosity from 'core/libs/verbosity'
 
 // STRINGS
@@ -10,7 +10,7 @@ export const INVALID_PROPS = `Some props failed!`
 export const onError = {
     internal_proccess: (...rest) => {
         verbosity.error(...rest)
-        notify.open({
+        appInterface.notify.open({
             message: INTERNAL_PROCESS_FAILED,
             description:
             <div style={{ display: 'flex', flexDirection: 'column', margin: 'auto' }}>
@@ -22,7 +22,7 @@ export const onError = {
     },
     invalid_data: (error, expecting) => {
         verbosity.error(error)
-        notify.open({
+        appInterface.notify.open({
             message: 'Invalid Data',
             description:
             <div style={{ display: 'flex', flexDirection: 'column', margin: 'auto' }}>

src/core/libs/index.js

@@ -1,5 +1,7 @@
-import * as v3_model from './v3_model';
-import * as Interface from './interface'
+import * as v3_model from './v3_model'
+import * as appInterface from './appInterface'
 export * from './settings'
+export * from './router'
+export * from './verbosity'
 
-export { v3_model, Interface };
+export { v3_model, appInterface }

src/core/libs/keybinds/index.js

@@ -0,0 +1,2 @@
+import { defaults, app_config } from 'config'
+import { get_value } from 'core'

src/core/libs/router/index.js

@@ -1,15 +1,5 @@
-/**
-* 
-* Specify all core paths and export elements
-* 
-* @param {HTMLTableElement} router - Archives Paths
-*/
-
 import { history } from 'umi';
 
-/**
- * Specify the paths of the files, in this case it is pointing to the root
- */
 export const router = {
   push: e => {
     history.push({
@@ -26,9 +16,6 @@ export const router = {
   },
 };
 
-/**
- * You are exporting the elements to collect errors
- */
 export const goTo = {
   top: id => {
     const element = document.getElementById(id);

src/core/libs/settings/index.js

@@ -1,5 +1,4 @@
 import { defaults, app_config } from 'config'
-import { get_value } from 'core'
 
 export function parseLocalStorage(){
     const a = localStorage.getItem(app_config.app_settings_storage)

src/core/libs/verbosity/index.js

@@ -3,7 +3,7 @@ import stackTrace from 'stack-trace'
 // import path from 'path'
 const verbosity_enabled = settings('verbosity')
 
-const verbosity = {
+export const verbosity = {
   log: (...cont) => {
     return verbosity_enabled ? console.log(...cont) : null
   },

src/layouts/PrimaryLayout.js

@@ -53,7 +53,12 @@ class PrimaryLayout extends React.Component {
          payload: { x: e.clientX, y: e.clientY }
       }
     }) 
-
+    window.toogleSidebarCollapse = () => {
+      this.props.dispatch({
+        type: "app/handleCollapseSidebar",
+        payload: !this.props.app.sidebar_collapsed
+      })
+    }
     window.contextMenu = this.props.app.contextMenu
     window.contextMenu.open = (payload) => {
       if (!payload) return false

src/models/app.js

@@ -1,13 +1,10 @@
-/* global window */
-import store from 'store';
-import { pathMatchRegexp, queryLayout } from 'core';
-import { app_config } from 'config';
-import keys from 'config/app_keys';
-import { router, user, session } from 'core/cores';
-import verbosity from 'core/libs/verbosity'
-import { notify } from 'core/libs/interface/notify'
+import store from 'store'
+import { app_config } from 'config'
+import keys from 'config/app_keys'
+import { user, session } from 'core/helpers'
+import { router, verbosity, appInterface } from 'core/libs'
 import settings from 'core/libs/settings'
-import { uri_resolver } from 'api/lib';
+import { uri_resolver } from 'api/lib'
 
 import jwt from 'jsonwebtoken'
 import cookie from 'cookie_js'
@@ -33,6 +30,7 @@ export default {
       yPos: 0,
       xPos: 0
     },
+    sidebar_collapsed: store.get("sidebar_collapse"),
     overlayActive: false,
     overlayElement: null,
     embedded: false,
@@ -250,8 +248,8 @@ export default {
           isAdmin: sessionData.admin,
           isDev: sessionData.dev,
           isPro: sessionData.is_pro
-        },
-        exp: Math.floor(Date.now() / 1000) * 120
+        }
+       
       }
 
         jwt.sign(frame, state.server_key, (err, token) => {
@@ -264,7 +262,7 @@ export default {
           state.session_authframe = token
         })
 
-        notify.success('Login done!')
+        appInterface.notify.success('Login done!')
         router.push('/')
         state.session_valid = true
         location.reload()
@@ -295,7 +293,10 @@ export default {
       store.set('theme', payload);
       state.theme = payload;
     },
-
+    handleCollapseSidebar(state, { payload }){
+      store.set('sidebar_collapse', payload);
+      state.sidebar_collapsed = payload
+    },
     isUser(state, { payload, callback }){
       if(!payload || !callback) return false
       switch (payload) {

src/pages/login/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
-import { app_info, iatToString } from 'core'
-import { router } from 'core/cores/router'
-import { notify } from 'core/libs/interface/notify'
+import { iatToString } from 'core'
+import { router, appInterface } from 'core/libs'
 
 import styles from './index.less'
 import classnames from 'classnames'
@@ -19,99 +18,58 @@ export function transitionToogle() {
   window.LoginComponent.setState({
     transition: !window.LoginComponent.state.transition,
   })
-  window.LoginComponent.toogleYulioID()
 }
 import { connect } from 'umi'
 
-@connect(({ app }) => ({ app }))
-class Login extends React.PureComponent {
-  constructor(props) {
-    super(props)
-    window.LoginComponent = this
-    this.state = {
-      transition: false,
-      using: 1,
-    }
-  }
-  switchType = {
-    f: a => {
-      this.setState({ using: a })
-    },
-    login: () => {
-      this.switchType.f(1)
-    },
-    register: () => {
-      this.switchType.f(2)
-    },
-    forgot: () => {
-      this.switchType.f(3)
-    },
-    guest: () => {
-      this.switchType.f(4)
-    }
-  }
+const types = [
+  {
+    id: "login",
+    key: 0,
+    renderText: `Sign in ${app_config.siteName}`
+  },
+  {
+    id: "register",
+    key: 1,
+    renderText: "Register"
+  },
+  {
+    id: "guest",
+    key: 2,
+    renderText: "Use guest session"
+  },
+  {
+    id: "forgot",
+    key: 3,
+    renderText: "Forgotten password"
+  },
+]
 
-  renderType(t) {
-    const a = this.state.using
-    if (t) {
-      switch (a) {
-        case 1:
-          return `Sign in ${app_config.siteName}`
-        case 2:
-          return 'Register'
-        case 3:
-          return 'Forgot'
-        case 4: 
-          return 'Guest'
-        default:
-          return 'Auth'
-      }
-    } else {
-      switch (a) {
-        case 1:
-          return <NormalLoginForm />
-        case 2:
-          return <RegistrationForm />
-        case 3:
-          return null
-        case 4: 
-          return <GuestSession />
-        default:
-          return <NormalLoginForm />
-      }
-    }
+const typesRenderMap = {
+  0: <NormalLoginForm />,
+  1: <RegistrationForm />,
+  2: <GuestSession />
+}
+
+@connect(({ app }) => ({ app }))
+class Login extends React.Component {
+  state = {
+    transition: false,
+    key: 0,
   }
 
   renderHelperButtons = () => {
-    if (this.state.using == 1) {
-      return (
-        <div className={styles.login_helper_footer}>
-          <antd.Button type="link" onClick={() => this.switchType.forgot()}>
-            Forgotten password
-          </antd.Button>
-          <antd.Button type="link" onClick={() => this.switchType.register()}>
-            Create an account
-          </antd.Button>
-          <antd.Button type="link" onClick={() => this.switchType.guest()}>
-            Use guest session 
-          </antd.Button>
-        </div>
+    return types.map((e) => {
+      return(
+        <antd.Button type="link" onClick={() => this.setState({ key: e.key })}>
+          {e.renderText || "Invalid"}
+        </antd.Button>
       )
-    }
-    if (this.state.using == 2 || 3) {
-      return (
-        <div className={styles.login_helper_footer}>
-          <antd.Button type="link" onClick={() => this.switchType.login()}>
-            Login
-          </antd.Button>
-        </div>
-      )
-    }
+    })
   }
 
   componentDidMount(){
     if (this.props.app.session_valid) {
-      notify.info('You have already logged into an account, you can change your account by logging in again')
+      appInterface.notify.info('You have already logged into an account, you can change your account by logging in again')
     }
   }
   
@@ -126,7 +84,6 @@ class Login extends React.PureComponent {
       antd.Modal.confirm({
         title: this.props.app.session_data.username,
         icon:  <antd.Avatar src={this.props.app.session_data.avatar} />,
-        content: 'Some descriptions',
         onOk() {
           router.push('/')
         },
@@ -143,28 +100,19 @@ class Login extends React.PureComponent {
           [styles.goOut]: this.state.transition,
         })}
       >
-        <div
-          style={{
-            fontSize: '8px',
-            position: 'absolute',
-            top: '12px',
-            left: '12px',
-          }}
-        >
-        ⚠ Using v{app_info.version} {app_info.stage}
-        </div>
-
         <div className={styles.login_wrapper}>
           <div className={styles.auth_box}>
             <div className={styles.left_body}>
               <h6>
                 <img className={styles.yid_logo} src={'https://api.ragestudio.net/id.svg'} /> YulioID&trade;
               </h6>
-              <h2> {this.renderType(true)} </h2>
+              <h2> {types[this.state.key].renderText || "Auth"} </h2>
             </div>
             <div className={styles.right_body}>
-              {this.renderType()}
-              {this.renderHelperButtons()}
+              {typesRenderMap[this.state.key]}
+              <div className={styles.login_helper_footer}>
+                {this.renderHelperButtons()}
+              </div>
             </div>
             {this.props.app.session_authframe?
               <div className={styles.third_body}>

src/pages/login/login.js

@@ -6,7 +6,7 @@ import HeadShake from 'react-reveal/HeadShake';
 
 import * as antd from 'antd'
 
-import { session, user } from 'core/cores'
+import { session, user } from 'core/helpers'
 
 import verbosity from 'core/libs/verbosity'
 
@@ -199,6 +199,7 @@ export class NormalLoginForm extends React.PureComponent {
               ]}
             >
               <Input
+                autoFocus
                 prefix={<UserOutlined className="site-form-item-icon" />}
                 placeholder="Username or Email"
               />
@@ -233,6 +234,7 @@ export class NormalLoginForm extends React.PureComponent {
               ]}
             >
               <Input.Password
+                autoFocus
                 prefix={<LockOutlined className="site-form-item-icon" />}
                 type={this.state.swpass ? 'text' : 'password'}
                 placeholder="Password"

src/pages/logout.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as antd from 'antd'
 import { connect } from 'umi'
-import { router, user, session } from 'core/cores';
+import { router } from 'core/libs';
 import * as Icons from 'components/Icons'
 
 @connect(({ app }) => ({ app }))

src/pages/settings/components/theme/index.js

@@ -7,7 +7,7 @@ import styles from './index.less'
 import { onError } from 'core/libs/errorhandler'
 import { theme, getOptimalOpacityFromIMG, get_style_rule_value } from 'core/libs/style' 
 import { urlToBase64, imageToBase64, arrayToObject } from 'core'
-import exportDataAsFile from 'core/libs/interface/export_data'
+import exportDataAsFile from 'core/libs/appInterface/export_data'
 import ThemeSettingsList from 'globals/theme_settings.js'
 
 class ThemeConfigurator extends React.Component{