linking admin and login screens

net/web/src/Admin/Admin.jsx

@@ -3,6 +3,7 @@ import { Input, Button, Space } from 'antd';
 import { AdminWrapper, LoginWrapper, TokenInput } from './Admin.styled';
 import { useAdmin } from './useAdmin.hook';
 import { Dashboard } from './Dashboard/Dashboard';
+import { UserOutlined } from '@ant-design/icons';          
 
 export function Admin() {
 
@@ -28,6 +29,9 @@ export function Admin() {
   if (!state.access) {
     return (
       <LoginWrapper>
+        <div class="user" onClick={() => actions.onUser()}>
+          <UserOutlined />
+        </div>
         <div className="login">
           <Space>
             <TokenInput placeholder="Admin Token" spellcheck="false" onChange={(e) => actions.setToken(e.target.value)} />

net/web/src/Admin/Admin.styled.js

@@ -40,6 +40,16 @@ export const LoginWrapper = styled.div`
     background-color: #eeeeee;
     border-radius: 4px;
   }
+
+  .user {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 16px;
+    color: #555555;
+    font-size: 20px;
+    cursor: pointer;
+  }
 `;
  
 export const TokenInput = styled(Input.Password)`

net/web/src/Admin/useAdmin.hook.js

@@ -1,4 +1,5 @@
 import { useContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { getNodeStatus } from 'api/getNodeStatus';
 import { setNodeStatus } from 'api/setNodeStatus';
 import { getNodeConfig } from 'api/getNodeConfig';
@@ -12,6 +13,8 @@ export function useAdmin() {
     busy: false,
   });
 
+  const navigate = useNavigate();
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
@@ -56,6 +59,9 @@ export function useAdmin() {
         window.alert(err);
       }
     },
+    onUser: () => {
+      navigate('/login');
+    }
   };
 
   return { state, actions };

net/web/src/Login/Login.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { SettingOutlined, UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useLogin } from './useLogin.hook';
 import { LoginWrapper, LoginInput, LoginPassword, LoginCreate, LoginEnter, LoginSpin } from './Login.styled';
 
@@ -15,6 +15,9 @@ export function Login(props) {
 
   return(
     <LoginWrapper>
+      <div class="settings" onClick={() => actions.onSettings()}>
+        <SettingOutlined />
+      </div>
       <div class="container">
         <div class="header">indicom</div>
         <div class="subheader">

net/web/src/Login/Login.styled.js

@@ -40,6 +40,15 @@ export const LoginWrapper = styled.div`
     width: 100%;
   }
 
+  .settings {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 16px;
+    color: #555555;
+    font-size: 20px;
+    cursor: pointer;
+  }
 `;
 
 export const LoginInput = styled(Input)`

net/web/src/Login/useLogin.hook.js

@@ -27,6 +27,9 @@ export function useLogin() {
       }
       return false
     },
+    onSettings: () => {
+      navigate('/admin');
+    },
     onLogin: async () => {
       if (!state.spinning && state.username != '' && state.password != '') {
         actions.updateState({ spinning: true })