From 36fc20f2263da75fcc53f2d79d61adb7f73d33d6 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Fri, 3 Jun 2022 11:49:01 -0700
Subject: [PATCH] linking admin and login screens

---
 net/web/src/Admin/Admin.jsx        |  6 +++++-
 net/web/src/Admin/Admin.styled.js  | 10 ++++++++++
 net/web/src/Admin/useAdmin.hook.js |  6 ++++++
 net/web/src/Login/Login.jsx        |  5 ++++-
 net/web/src/Login/Login.styled.js  |  9 +++++++++
 net/web/src/Login/useLogin.hook.js |  3 +++
 6 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/net/web/src/Admin/Admin.jsx b/net/web/src/Admin/Admin.jsx
index 11ac293e..885f944b 100644
--- a/net/web/src/Admin/Admin.jsx
+++ b/net/web/src/Admin/Admin.jsx
@@ -3,7 +3,8 @@ 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() {
 
   const { state, actions } = useAdmin()
@@ -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)} />
diff --git a/net/web/src/Admin/Admin.styled.js b/net/web/src/Admin/Admin.styled.js
index 47fc356f..6504900c 100644
--- a/net/web/src/Admin/Admin.styled.js
+++ b/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)`
diff --git a/net/web/src/Admin/useAdmin.hook.js b/net/web/src/Admin/useAdmin.hook.js
index d6d543f4..c1cfa005 100644
--- a/net/web/src/Admin/useAdmin.hook.js
+++ b/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 };
diff --git a/net/web/src/Login/Login.jsx b/net/web/src/Login/Login.jsx
index 50043c9e..1ca35f3c 100644
--- a/net/web/src/Login/Login.jsx
+++ b/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">
diff --git a/net/web/src/Login/Login.styled.js b/net/web/src/Login/Login.styled.js
index 9dc1841e..4750fdcc 100644
--- a/net/web/src/Login/Login.styled.js
+++ b/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)`
diff --git a/net/web/src/Login/useLogin.hook.js b/net/web/src/Login/useLogin.hook.js
index e7a87769..1da66997 100644
--- a/net/web/src/Login/useLogin.hook.js
+++ b/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 })