0.2.25A1

.vscode/launch.json

@@ -1,17 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Program",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "program": "${file}"
-        }
-    ]
-}

config/app.settings.js

@@ -6,7 +6,8 @@ function SettingStoragedValue(e) {
       })
       const fr = Ite.filter(Boolean)
       return fr.toString()
-  } catch (error) {
+    } 
+    catch (error) {
       return null
     }
 }
@@ -21,33 +22,17 @@ export var AppSettings = {
   DisableRegister: true,
   DisablePasswordRecover: true,
   // Activating this, the logs must be trowed
-  force_showDevLogs: fromStorage
+  force_showDevLogs: fromStorage? SettingStoragedValue('force_showDevLogs') : false,
-    ? SettingStoragedValue('force_showDevLogs')
+  StrictLightMode: fromStorage? SettingStoragedValue('strict_lightMode') : false,
-    : false,
+  SignForNotExpire: fromStorage? SettingStoragedValue('sessions_noexpire') : false,
-  StrictLightMode: fromStorage
+  auto_search_ontype: fromStorage? SettingStoragedValue('auto_search_ontype') : false,
-    ? SettingStoragedValue('strict_lightMode')
+  auto_feedrefresh: fromStorage? SettingStoragedValue('auto_feedrefresh') : false,
-    : false,
+  default_showpostcreator: fromStorage? SettingStoragedValue('default_showpostcreator') : false,
-  SignForNotExpire: fromStorage
+  default_collapse_sider: fromStorage? SettingStoragedValue('default_collapse_sider') : true,
-    ? SettingStoragedValue('sessions_noexpire')
+  force_show_postactions: fromStorage? SettingStoragedValue('force_show_postactions') : false,
-    : false,
-  auto_search_ontype: fromStorage
-    ? SettingStoragedValue('auto_search_ontype')
-    : false,
-  auto_feedrefresh: fromStorage
-    ? SettingStoragedValue('auto_feedrefresh')
-    : false,
-  default_showpostcreator: fromStorage
-    ? SettingStoragedValue('default_showpostcreator')
-    : false,
-  default_collapse_sider: fromStorage
-    ? SettingStoragedValue('default_collapse_sider')
-    : true,
-  force_show_postactions: fromStorage
-    ? SettingStoragedValue('force_show_postactions')
-    : false,
   MaxLengthPosts: '512',
   CurrentBundle: 'light_ng',
   // In KB
   MaximunAPIPayload: '101376',
-  limit_post_catch: '20',
+  limit_post_catch: '20'
 }

config/keys.js

@@ -1,3 +1,7 @@
 module.exports = {
+  // Global Server Key (Requiered for RS-YIBTP), Not autogenerated, must be included on. (Recommended not modify this constants)
+
+  server_key:
+    'f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768',
   secretOrKey: 'secret',
 }

config/ycore.config.js

@@ -18,13 +18,6 @@ module.exports = {
       exclude: [/\/login/, /\/socket\/(.*)/, /\/publics/, /\/authorize/],
     },
   ],
-  yConfig: {
-    //  Disused Variables, exported from yCoreWorker
-    // Global Server Key (Requiered for RS-YIBTP), Not autogenerated, must be included on. (Recommended not modify this constants)
-    server_key:
-      'f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768',
-  },
-
 
   i18n: {
     languages: [

globals/endpoints.js

@@ -9,6 +9,7 @@ module.exports = {
         get_posts: "https://api.ragestudio.net/RSA-COMTY/r/posts?access_token=",
         find_user: "https://api.ragestudio.net/RSA-COMTY/r/find_user?access_token=",
         search_endpoint: "https://api.ragestudio.net/RSA-COMTY/r/search?access_token=",
+        all_sessions: "https://api.ragestudio.net/RSA-COMTY/r/sessions?access_token=",
         get_sessions: "https://api.ragestudio.net/RSA-COMTY/r/session_id?access_token=",
         auth_endpoint: "https://api.ragestudio.net/RSA-COMTY/r/auth",
         new_post: "https://comty.julioworld.club/api/new_post?access_token=",

package.json

@@ -3,7 +3,8 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.2.24",
+  "version": "0.2.25",
+  "stage": "A1",
   "description": "",
   "main": "app/main.js",
   "author": "RageStudio",

src/@ycore/libs/app_functions/pre.js

@@ -1,6 +1,10 @@
+import { transitionToogle } from '../../../pages/login'
 import { SetControls, CloseControls } from '../../../components/Layout/Control'
 import { SwapMode } from '../../../components/Layout/Secondary'
 import * as ycore from 'ycore'
+import * as antd from 'antd'
+import * as Icons from '@ant-design/icons'
+import React from 'react'
 
 export function QueryRuntime() {
   const validBackup = ycore.validate.backup()
@@ -10,11 +14,14 @@ export function QueryRuntime() {
 
 export function SetupApp() {
   // TODO: Default sets
-  ycore.notify.success('Authorised, please reload the app for login!')
+  ycore.notify.success('Authorised, please wait...')
   const resourceLoad = localStorage.getItem('resource_bundle')
   if (!resourceLoad) {
     localStorage.setItem('resource_bundle', 'light_ng')
   }
+  setTimeout(() => {
+    ycore.crouter.native('main')
+  }, 500)
 }
 
 export const CheckThisApp = {
@@ -45,33 +52,14 @@ export const ControlBar = {
   },
 }
 
-export function RefreshONCE() {
+export const LoginPage = {
-  window.location = '/'
+  transitionToogle: () => {
+    transitionToogle()
+  },
 }
 
-export function DetectNoNStableBuild(e1) {
+export function RefreshONCE() {
-  switch (e1) {
+  window.location = '/'
-    case 'TagComponent':
-      if (package_json.DevBuild == true) {
-        return React.createElement(antd.Tag, { color: 'orange' }, ' No Stable')
-      }
-      if (package_json.DevBuild == false) {
-        return React.createElement(antd.Tag, { color: 'blue' }, ' Stable')
-      } else {
-        return 'No Stable'
-      }
-      break
-    default:
-      if (package_json.DevBuild == true) {
-        return 'No Stable'
-      }
-      if (package_json.DevBuild == false) {
-        return 'Stable'
-      } else {
-        return 'No Stable'
-      }
-      break
-  }
 }
 
 export const app_session = {

src/@ycore/libs/comty_ng/comty_get.js

@@ -1,11 +1,21 @@
 import { API_Call, endpoints } from 'ycore'
 
 export const comty_get = {
+  sessions: (callback) => {
+    let formdata = new FormData()
+    formdata.append('type', 'get')
+
+    API_Call(
+      (err, res) => {
+        return callback(err, res)
+      },
+      endpoints.all_sessions,
+      formdata
+    )
+  },
   session_data: () => {},
   general_data: () => {
-    if (!payload) {
+    if (!payload) return false
-      return false
-    }
     const { id } = payload
 
     let formdata = new FormData()

src/@ycore/libs/comty_ng/get_app_session.js

@@ -1,9 +1,9 @@
-import { yConfig, yconsole, endpoints, token_data } from 'ycore'
+import { __server, yconsole, endpoints, token_data } from 'ycore'
 
 export const get_app_session = {
   get_id: callback => {
     let formdata = new FormData()
-    formdata.append('server_key', yConfig.server_key)
+    formdata.append('server_key', __server.getKey())
     formdata.append('type', 'get')
     const requestOptions = {
       method: 'POST',
@@ -24,7 +24,7 @@ export const get_app_session = {
   },
   raw: callback => {
     const formdata = new FormData()
-    formdata.append('server_key', yConfig.server_key)
+    formdata.append('server_key', __server.getKey())
     formdata.append('type', 'get')
     const requestOptions = {
       method: 'POST',

src/@ycore/libs/rs_cloud/api_call.js

@@ -8,7 +8,7 @@ export function API_Call(callback, endpoint, payload, options, __token) {
     ycore.yconsole.log(prefix, 'Calling api without Payload!!!')
   }
   let payloadContainer = payload ? payload : new FormData()
-  payloadContainer.append('server_key', ycore.yConfig.server_key)
+  payloadContainer.append('server_key', ycore.__server.getKey())
 
   let fendpoint = `${endpoint}${ycore.token_data.__token()}`
   let method
@@ -64,6 +64,15 @@ export function API_Call(callback, endpoint, payload, options, __token) {
   jquery
     .ajax(requestOptions)
     .done(response => {
+      try {
+        const a = JSON.parse(response)['api_status']
+        if (a == '404') {
+          ycore.Alive_API.tokenError(response)
+        }
+      } catch (error) {
+        ycore.yconsole.log('[VIOLATION] The status of the request has not been identified!')
+        ycore.Alive_API.violation()
+      }
       ycore.yconsole.log(response)
       return callback(false, response)
     })

src/@ycore/libs/rs_cloud/pre.js

@@ -1,5 +1,6 @@
 import * as ycore from 'ycore'
 export * from './api_call.js'
+import keys from '../../../../config/keys.js'
 
 export const Alive_API = {
   fail: a => {
@@ -8,6 +9,23 @@ export const Alive_API = {
       ycore.notify.error(a)
     }
   },
+  tokenError: a => {
+    ycore.notify.expire(
+      'It seems that your token has expired or no longer exists'
+    )
+    ycore.crouter.native('login')
+  },
+  violation: a => {
+    ycore.notify.expire(
+      'It seems that there has been a problem with your token, we need you to log in again.'
+    )
+    ycore.crouter.native('login')
+  },
+}
+export const __server = {
+  getKey: () => {
+    return keys.server_key
+  },
 }
 export const __rscloud = {
   yulio_id: {

src/@ycore/ycore_worker.js

@@ -21,13 +21,21 @@ export * from '../../config/app.settings.js'
 export * from './libs.js'
 
 export var { router } = require('utils')
-export var yConfig = config.yConfig
 export var endpoints = Endpoints
 
-var package_json = require('../../package.json')
+export const package_json = require('../../package.json')
 
 export const UUAID = `${package_json.name}==${package_json.UUID}`
 
+export const AppInfo = {
+  apid: package_json.name,
+  stage: package_json.stage,
+  name: package_json.title,
+  version: package_json.version,
+  logo: config.FullLogoPath,
+  logo_dark: config.DarkFullLogoPath,
+}
+
 localforage.config({
   name: UUAID,
   version: 1.0,
@@ -35,14 +43,6 @@ localforage.config({
   storeName: package_json.name,
 })
 
-export const AppInfo = {
-  apid: package_json.name,
-  name: package_json.title,
-  version: package_json.version,
-  logo: config.FullLogoPath,
-  logo_dark: config.DarkFullLogoPath,
-}
-
 /**
  * Convert a base64 string in a Blob according to the data and contentType.
  *
@@ -114,21 +114,6 @@ export function uploadFile(file) {
   request.send(formData)
 }
 
-/**
- * (HELPER) Convert the localStorage values (AppSettings) parsed
- *
- * @param e {String} String of SettingID for search
- * @return {string} Boolean value
- */
-export function SettingStoragedValue(e) {
-  try {
-    const fromStorage = JSON.parse(localStorage.getItem('app_settings'))
-    ycore.ReturnValueFromMap({ data: fromStorage, key: e })
-  } catch (error) {
-    return null
-  }
-}
-
 /**
  * Return the value of an object from array
  *
@@ -150,6 +135,25 @@ export function ReturnValueFromMap(payload) {
   }
 }
 
+/**
+ * (HELPER) Convert the localStorage values (AppSettings) parsed
+ *
+ * @param e {String} String of SettingID for search
+ * @return {string} Boolean value
+ */
+export function SettingStoragedValue(e) {
+  try {
+    const fromStorage = JSON.parse(localStorage.getItem('app_settings'))
+    const Ite = fromStorage.map(item => {
+      return item.SettingID === e ? item.value : null
+    })
+    const fr = Ite.filter(Boolean)
+    return fr.toString()
+  } catch (error) {
+    return null
+  }
+}
+
 /**
  * Return the last object from array
  *
@@ -246,7 +250,37 @@ export const crouter = {
  * Framework functionality for show with interface an notification
  *
  */
+const {FieldTimeOutlined} = require('@ant-design/icons')
 export const notify = {
+  expire: (...res) => {
+    antd.notification.error({
+      message: 'Hey ',
+      icon: <FieldTimeOutlined />,
+      description: res,
+      placement: 'bottomLeft',
+    })
+  },
+  info: (...res) => {
+    antd.notification.info({
+      message: 'Well',
+      description: res.toString(),
+      placement: 'bottomLeft',
+    })
+  },
+  exception: (...res) => {
+    antd.notification.error({
+      message: 'WoW!',
+      description: res.toString(),
+      placement: 'bottomLeft',
+    })
+  },
+  warn: (...res) => {
+    antd.notification.warn({
+      message: 'Hey!',
+      description: res.toString(),
+      placement: 'bottomLeft',
+    })
+  },
   success: (...res) => {
     antd.notification.success({
       message: 'Well',

src/components/App_about/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import styles from './index.less'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+
+export default class App_About extends React.Component {
+  DetectNoNStableBuild() {
+    if (ycore.package_json.DevBuild == false) {
+      return <antd.Tag color="blue">Stable</antd.Tag>
+    } else {
+      return <antd.Tag color="orange">No Stable</antd.Tag>
+    }
+  }
+  render() {
+    return (
+      <div className={styles.aboutWrapper}>
+        <img src={ycore.AppInfo.logo} />
+        <antd.Card>
+          <h1 className={styles.appName}> {ycore.AppInfo.name} </h1>
+          {ycore.UUAID}
+          <br />
+          <antd.Tag color="geekblue">v{ycore.AppInfo.version}</antd.Tag>
+          <antd.Tag color="red">{ycore.AppInfo.stage}</antd.Tag>
+          {this.DetectNoNStableBuild()}
+        </antd.Card>
+      </div>
+    )
+  }
+}

src/components/MainFeed/index.js

@@ -77,11 +77,13 @@ class MainFeed extends React.Component {
           this.setState({ invalid: true })
           return
         }
+        try {
           const parsed = JSON.parse(res)['data']
-
+          const isEnd =parsed.length < ycore.AppSettings.limit_post_catch ? true : false
-        const isEnd =
-          parsed.length < ycore.AppSettings.limit_post_catch ? true : false
           this.setState({ isEnd: isEnd, data: parsed, loading: false })
+        } catch (error) {
+          ycore.yconsole.log(error)
+        }
       }, payload)
     } catch (err) {
       ycore.notify.error('err')

src/components/YulioID/formstyle.less

@@ -1,97 +0,0 @@
-@import '~themes/vars.less';
-
-
-.inputform {
-  :global {
-    input {
-      height: 50px;
-      font-size: 16px;
-      border: 2px solid #d1d3d4;
-      width: 100%;
-      padding: 12px;
-      font-family: "Poppins";
-      border-radius: 6px;
-      color: black
-    }
-
-    input:focus {
-      outline: none;
-      border-color: black;
-    }
-  }
-}
-
-.check {
-  animation-delay: 0s;
-}
-
-.checkmark {
-  opacity: 0;
-}
-
-.Oval {
-  opacity: 1;
-  transform-origin: 30px 30px;
-  stroke-dasharray: 200px;
-  transform: rotate(-75deg);
-  animation: 3s spin infinite;
-  stroke-dashoffset: 200;
-  /* 	animation-play-state: paused; */
-}
-
-.animateCheck {
-  animation: 0.5s check_animation linear forwards;
-}
-
-.animateOvaloop {
-  animation: 3s spin infinite;
-}
-
-@keyframes spin {
-  0% {
-    opacity: 1;
-    stroke-dasharray: 360;
-    stroke-dashoffset: 360;
-    transform: rotate(-720deg);
-
-  }
-
-  50% {
-    opacity: 1;
-    stroke-dasharray: 360;
-    stroke-dashoffset: 260;
-    transform: rotate(360deg);
-  }
-
-  100% {
-    opacity: 1;
-    stroke-dasharray: 360;
-    stroke-dashoffset: 360;
-    transform: rotate(720deg);
-  }
-}
-
-@keyframes circle_animation {
-  60% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 1;
-    stroke-dasharray: 400px;
-    transform: rotate(40deg);
-  }
-}
-
-@keyframes check_animation {
-  0% {
-    stroke-dasharray: 126;
-    stroke-dashoffset: 126;
-
-  }
-
-  100% {
-    stroke-dasharray: 45;
-    stroke-dashoffset: 94
-  }
-}

src/components/YulioID/index.js

@@ -4,6 +4,7 @@ import { Form, Icon as LegacyIcon } from '@ant-design/compatible'
 
 import { Button, Input, Drawer } from 'antd'
 import * as ycore from 'ycore'
+import * as Icons from '@ant-design/icons'
 
 import styles from './index.less'
 
@@ -19,6 +20,7 @@ class YulioID extends Component {
       MainLoginVisible: true,
       ShowLoading: false,
       Answered: false,
+      transition: false,
     }
   }
   // Handlers & others
@@ -62,11 +64,13 @@ class YulioID extends Component {
 
   handleResponse = response => {
     if (response == '200') {
+      ycore.LoginPage.transitionToogle()
       this.setState({
         StateIcon: 'login',
         StateMessage: 'Wait a sec...',
         StateException: false,
       })
+      
     }
     if (response == '400') {
       this.setState({
@@ -139,10 +143,6 @@ class YulioID extends Component {
                       <br />
                       <div className={styles.resultbox}>
                         <h6> {StateMessage} </h6>
-                        <Button onClick={() => ycore.RefreshONCE()}>
-                          {' '}
-                          Reload{' '}
-                        </Button>
                         {StateException ? (
                           <div className={styles.retryBTN}>
                             <Button
@@ -221,10 +221,10 @@ class YulioID extends Component {
                   </h2>
                   <div className={styles.moreActions}>
                     <Button type="dashed">
-                      <LegacyIcon type="question-circle" /> Forgotten password{' '}
+                      <Icons.QuestionCircleOutlined /> Forgotten password
                     </Button>
                     <Button type="dashed">
-                      <LegacyIcon type="user-add" /> Create an account{' '}
+                      <Icons.UserAddOutlined /> Create an account
                     </Button>
                   </div>
                 </div>

src/components/index.js

@@ -5,6 +5,7 @@ import MobileWarning from './MobileWarning'
 import CustomIcons from './CustomIcons'
 import Loader from './Loader/Loader.js'
 import ScrollBar from './ScrollBar'
+import App_about from './App_about'
 
 // App Layout Components
 import * as MyLayout from './Layout/index.js'
@@ -26,6 +27,7 @@ import PostCreator from './PostCreator'
 
 // Mix & Export all
 export {
+  App_about,
   MediaPlayer,
   UserBadges,
   MobileWarning,

src/pages/__m/index.js

@@ -92,7 +92,7 @@ export default class __m extends React.Component {
             <h2>
               <Icons.CloudServerOutlined /> Server UID
             </h2>
-            <span> {ycore.yConfig.server_key} </span>
+            <span> {ycore.__server.getKey()} </span>
           </antd.Card>
           <antd.Card>
             <h2>

src/pages/about/index.js

@@ -1,20 +1,9 @@
 import React from 'react'
-import styles from './index.less'
+import { App_about } from 'components'
-import * as ycore from 'ycore'
-import * as antd from 'antd'
 
 class AppAbout extends React.Component {
   render() {
-    return (
+    return <App_about />
-      <div className={styles.aboutWrapper}>
-        <img src={ycore.AppInfo.logo} />
-        <antd.Card>
-          <h1 className={styles.appName}> {ycore.AppInfo.name} </h1>
-          <antd.Tag color="geekblue">v{ycore.AppInfo.version}</antd.Tag>
-          {ycore.DetectNoNStableBuild('TagComponent')}
-        </antd.Card>
-      </div>
-    )
   }
 }
 export default AppAbout

src/pages/login/index.js

@@ -1,14 +1,23 @@
 import React, { Component } from 'react'
-import * as antd from 'antd'
+import { AppInfo } from 'ycore'
-import * as ycore from 'ycore'
 import { YulioID } from 'components'
 import styles from './index.less'
+import classnames from 'classnames'
+
+export function transitionToogle() {
+  window.LoginComponent.setState({  
+    transition: !window.LoginComponent.state.transition
+  })
+  window.LoginComponent.toogleYulioID()
+}
 
 class Login extends Component {
   constructor(props) {
     super(props)
+    window.LoginComponent = this
     this.state = {
       showYulioID: true,
+      transition: false
     }
   }
   toogleYulioID() {
@@ -17,19 +26,55 @@ class Login extends Component {
 
   render() {
     return (
-      <div>
+        <div className={classnames(styles.login_wrapper, {[styles.goOut]: this.state.transition})} >
-        <img
+          <svg
-          src="https://dl.ragestudio.net/background.svg"
             className={styles.backgroud}
+            xmlns="http://www.w3.org/2000/svg"
+            fillRule="evenodd"
+            preserveAspectRatio="xMidYMax slice"
+            strokeLinejoin="round"
+            strokeMiterlimit="1.41421"
+            clipRule="evenodd"
+            viewBox="0 0 1920 1200"
+          >
+            <path
+              className="vibrate-slow-1"
+              fill="url(#_Linear1)"
+              d="M1933-19s-273.175 481.215-543.607 443.874c-270.431-37.341-491.08-251.918-677.168-175.592-161.697 66.321-325.778 320.713-29.035 557.338 376.292 300.059 1119.66 396.359 1119.66 396.359l-1642.31 14.014V-1.247L1933-18.998z"
             />
+            <path
+              fill="url(#_Linear2)"
+              d="M1690 0s-42.182 372.782-341 336c-298.818-36.782-466.852-265.409-693-161-226.148 104.409-350.389 405.447-147 722s193 303 193 303H0V0h1690z"
+            />
+            <defs>
+              <linearGradient
+                id="_Linear1"
+                x2="1"
+                gradientTransform="matrix(1772.46 0 0 1235.99 160.542 598.996)"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0" stopColor="#513db6" />
+                <stop offset="1" stopColor="#562590" />
+              </linearGradient>
+              <linearGradient
+                id="_Linear2"
+                x2="1"
+                gradientTransform="matrix(1690 0 0 1200.08 0 600.042)"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0" stopColor="#8137dd" />
+                <stop offset="1" stopColor="#6143ef" />
+              </linearGradient>
+            </defs>
+          </svg>
+
           <div className={styles.loginLandingWrapper}>
             <div className={styles.brand}>
-            <img src={ycore.AppInfo.logo} />{' '}
+              <img src={AppInfo.logo} />
             </div>
           </div>
           <div className={styles.version}>
-          <h2>{`v${ycore.AppInfo.version}`}</h2>
+            <h2>{`v${AppInfo.version} ${AppInfo.stage}`}</h2>
-          {ycore.DetectNoNStableBuild('TagComponent')}
           </div>
           <YulioID visible={this.state.showYulioID} />
         </div>

src/pages/login/index.less

@@ -1,5 +1,20 @@
 @import '~themes/vars.less';
 
+
+.login_wrapper{
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  &.goOut{
+    clip:rect();
+    animation: go-out 1.5s linear;
+  }
+}
+
 /* Animation */
 
 .parallax>use {
@@ -36,7 +51,18 @@
   }
 }
 
+@keyframes go-out {
+  0% {
+    filter: blur(0px)
+  }
+
+  100% {
+    filter: blur(15px)
+  }
+}
+
 .backgroud {
+  background-color: #2d2d2d;
   position: absolute;
   height: 100%;
   width: 100%;

src/pages/settings/components/about.js

@@ -1,20 +1,9 @@
 import React from 'react'
-import styles from './about.less'
+import { App_about } from 'components'
-import * as ycore from 'ycore'
-import * as antd from 'antd'
 
-class AppAbout extends React.Component {
+export default class AppAbout extends React.Component {
   render() {
-    return (
+    return <App_about />
-      <div className={styles.aboutWrapper}>
-        <img src={ycore.AppInfo.logo} />
-        <antd.Card>
-          <h1 className={styles.appName}> {ycore.AppInfo.name} </h1>
-          <antd.Tag color="geekblue">v{ycore.AppInfo.version}</antd.Tag>
-          {ycore.DetectNoNStableBuild('TagComponent')}
-        </antd.Card>
-      </div>
-    )
   }
 }
-export default AppAbout
+

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import * as ycore from 'ycore'
 import * as Icons from '@ant-design/icons'
-import styles from './notification.less'
+import styles from './index.less'
 
-class NotificationView extends React.Component {
+export default class NotificationView extends React.Component {
   render() {
     return (
       <div className={styles.main}>
@@ -15,4 +15,3 @@ class NotificationView extends React.Component {
   }
 }
 
-export default NotificationView

src/pages/settings/components/security.js

@@ -1,18 +0,0 @@
-import React from 'react'
-import * as ycore from 'ycore'
-import * as Icons from '@ant-design/icons'
-import styles from './security.less'
-
-class SecurityView extends React.Component {
-  render() {
-    return (
-      <div className={styles.main}>
-        <h2>
-          <Icons.LockOutlined /> Your Security & Privacy
-        </h2>
-      </div>
-    )
-  }
-}
-
-export default SecurityView

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import * as ycore from 'ycore'
+import * as Icons from '@ant-design/icons'
+import * as antd from 'antd'
+import styles from './index.less'
+
+import Sessions_Manager from './sessions.js'
+
+const { Menu } = antd
+export default class SecurityView extends React.Component {
+  state = {
+    current: 'privacy',
+  }
+
+  handleClick = e => {
+    this.setState({
+      current: e.key,
+    })
+  }
+
+  renderChildren = () => {
+    const { current } = this.state
+    switch (current) {
+      case 'privacy':
+        return null
+      case 'credentials':
+        return null
+      case 'sessions':
+        return <Sessions_Manager />
+      default:
+        break
+    }
+    return null
+  }
+
+  render() {
+    return (
+      <div className={styles.main}>
+        <h2>
+          <Icons.LockOutlined /> Your Security & Privacy
+          <Menu
+            onClick={this.handleClick}
+            selectedKeys={[this.state.current]}
+            mode="horizontal"
+          >
+            <Menu.Item key="privacy">
+              <Icons.AimOutlined />
+              Privacy
+            </Menu.Item>
+            <Menu.Item key="credentials">
+              <Icons.KeyOutlined />
+              Credentials
+            </Menu.Item>
+            <Menu.Item key="sessions">
+              <Icons.NumberOutlined />
+              Sessions
+            </Menu.Item>
+          </Menu>
+          <div>{this.renderChildren()}</div>
+        </h2>
+      </div>
+    )
+  }
+}
+

src/pages/settings/components/security/sessions.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+
+export default class Sessions_Manager extends React.Component {
+  state = {
+    sessions_data: '',
+  }
+  componentDidMount() {
+    ycore.get_app_session.get_id((err, res) => {
+      this.setState({ sid: res })
+    })
+    ycore.comty_get.sessions((err, res) => {
+      const a = JSON.parse(res)['data']
+      this.setState({ sessions_data: a })
+    })
+  }
+  render() {
+    return (
+      <div>
+        <antd.List
+          dataSource={this.state.sessions_data}
+          renderItem={item => (
+            <antd.List.Item>
+              <antd.Card grid={{ gutter: 16, column: 4 }} hoverable>
+                <h3>Session #{item.id}</h3>
+                {this.state.sid == item.session_id ? 'This Session' : null}
+                <hr />
+                <p>{item.platform}</p>
+                <p>{item.ip_address} </p>
+                <p>{item.time}</p>
+              </antd.Card>
+            </antd.List.Item>
+          )}
+        />
+      </div>
+    )
+  }
+}

src/pages/settings/index.js

@@ -1,16 +1,14 @@
 import React from 'react'
-import { GridContent } from '@ant-design/pro-layout'
+import { Menu } from 'antd'
-import { Menu, Typography } from 'antd'
-import * as antd from 'antd'
-import * as ycore from 'ycore'
 import * as Icons from '@ant-design/icons'
 import styles from './style.less'
 
-import NotificationView from './components/notification.js'
+import NotificationView from './components/notification/index.js'
-import SecurityView from './components/security.js'
+import SecurityView from './components/security/index.js'
+import Earnings from './components/earnings/index.js'
+
 import Base from './components/base.js'
 import AppAbout from './components/about.js'
-import Earnings from './components/earnings.js'
 
 const { Item } = Menu
 const menuMap = {