From e852c419bc9f75954e01820921fc744edefd2320 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Wed, 24 Aug 2022 22:36:41 -0700
Subject: [PATCH] making admin dashboard more mobile friendly

---
 net/web/src/admin/dashboard/Dashboard.jsx     |  9 +++++----
 .../src/admin/dashboard/Dashboard.styled.js   | 19 +++++++++++++++++--
 .../dashboard/accountItem/AccountItem.jsx     |  9 +++++----
 .../accountItem/AccountItem.styled.js         | 17 +++++++++++++++--
 net/web/src/admin/prompt/Prompt.jsx           | 12 +++++++++++-
 net/web/src/admin/prompt/usePrompt.hook.js    |  2 +-
 6 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/net/web/src/admin/dashboard/Dashboard.jsx b/net/web/src/admin/dashboard/Dashboard.jsx
index a03eeab3..8dac58f0 100644
--- a/net/web/src/admin/dashboard/Dashboard.jsx
+++ b/net/web/src/admin/dashboard/Dashboard.jsx
@@ -79,10 +79,11 @@ export function Dashboard({ token, config, logout }) {
           footer={[ <Button type="primary" onClick={() => actions.setShowCreate(false)}>OK</Button> ]}
           onCancel={() => actions.setShowCreate(false)}>
         <CreateLayout>
-          <div>{createLink()}</div>
-          <Button icon={<CopyOutlined />} size="small"
-            onClick={() => onClipboard(createLink())}
-          />
+          <div class="url">
+            <div class="link">{createLink()}</div>
+            <Button icon={<CopyOutlined />} size="small"
+              onClick={() => onClipboard(createLink())} />
+          </div>
         </CreateLayout>
       </Modal>    
     </DashboardWrapper>
diff --git a/net/web/src/admin/dashboard/Dashboard.styled.js b/net/web/src/admin/dashboard/Dashboard.styled.js
index 7f4a890a..5ebb95ad 100644
--- a/net/web/src/admin/dashboard/Dashboard.styled.js
+++ b/net/web/src/admin/dashboard/Dashboard.styled.js
@@ -47,6 +47,8 @@ export const DashboardWrapper = styled.div`
     .settings {
       display: flex;
       align-items: center;
+      justify-content: center;
+      width: 40px;
     }
 
     .add {
@@ -84,6 +86,19 @@ export const SettingsLayout = styled(Space)`
   }
 `;
 
-export const CreateLayout = styled(Space)`
-  white-space: nowrap;
+export const CreateLayout = styled.div`
+  .url {
+    display: flex;
+    flex-direction: row;
+    max-width: 100%;
+   
+    .link {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-grow: 1;
+      min-width: 0;
+      padding-right: 8px;
+    }
+  }
 `
diff --git a/net/web/src/admin/dashboard/accountItem/AccountItem.jsx b/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
index 6191151c..e0f8a370 100644
--- a/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
+++ b/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
@@ -57,10 +57,11 @@ export function AccountItem({ token, item, remove }) {
           footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}
           onCancel={() => actions.setShowAccess(false)}>
         <AccessLayout>
-          <div>{accessLink()}</div>
-          <Button icon={<CopyOutlined />} size="small"
-            onClick={() => onClipboard(accessLink())}
-          />
+          <div class="url">
+            <div class="link">{accessLink()}</div>
+            <Button icon={<CopyOutlined />} size="small"
+              onClick={() => onClipboard(accessLink())}/>
+          </div>
         </AccessLayout>
       </Modal>  
     </AccountItemWrapper>
diff --git a/net/web/src/admin/dashboard/accountItem/AccountItem.styled.js b/net/web/src/admin/dashboard/accountItem/AccountItem.styled.js
index 99613266..d1f2f56f 100644
--- a/net/web/src/admin/dashboard/accountItem/AccountItem.styled.js
+++ b/net/web/src/admin/dashboard/accountItem/AccountItem.styled.js
@@ -82,6 +82,19 @@ export const DeleteButton = styled(Button)`
   color: red;
 `
 
-export const AccessLayout = styled(Space)`
-  white-space: nowrap;
+export const AccessLayout = styled.div`
+  .url {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+   
+    .link {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-grow: 1;
+      min-width: 0;
+      padding-right: 8px;
+    }
+  }
 `
diff --git a/net/web/src/admin/prompt/Prompt.jsx b/net/web/src/admin/prompt/Prompt.jsx
index b0f72992..ddc34fe6 100644
--- a/net/web/src/admin/prompt/Prompt.jsx
+++ b/net/web/src/admin/prompt/Prompt.jsx
@@ -26,6 +26,16 @@ export  function Prompt({ login }) {
     }
   }
 
+  const placeholder = () => {
+    if (state.unclaimed === true) {
+      return 'Set Access Token';
+    }
+    if (state.unclaimed === false) {
+      return 'Access Token';
+    }
+    return '';
+  }
+
   return (
     <PromptWrapper>
       <div class="app-title">
@@ -39,7 +49,7 @@ export  function Prompt({ login }) {
         <Form name="basic" wrapperCol={{ span: 24, }}>
 
           <Form.Item name="password">
-            <Input.Password placeholder="Admin Password" spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)}
+            <Input.Password placeholder={placeholder()} spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)}
                 autocomplete="current-password" onKeyDown={(e) => keyDown(e)} prefix={<LockOutlined />} size="large" />
           </Form.Item>
 
diff --git a/net/web/src/admin/prompt/usePrompt.hook.js b/net/web/src/admin/prompt/usePrompt.hook.js
index a860edb9..84bde99e 100644
--- a/net/web/src/admin/prompt/usePrompt.hook.js
+++ b/net/web/src/admin/prompt/usePrompt.hook.js
@@ -24,7 +24,7 @@ export function usePrompt() {
   const checkStatus = async () => {
     try {
       let status = await getNodeStatus();
-      updateState({ uncliamed: status });
+      updateState({ unclaimed: status });
     }
     catch(err) {
       console.log("failed to check node status");