saving node config

net/web/src/Admin/Admin.jsx

@@ -44,7 +44,7 @@ export function Admin() {
 
   return (
     <AdminWrapper>
-      <Dashboard />
+      <Dashboard password={state.token} config={state.config} />
     </AdminWrapper>
   )
 }

net/web/src/Admin/Dashboard/Dashboard.jsx

@@ -1,4 +1,45 @@
-export function Dashboard() {
+import { DashboardWrapper, SettingsButton, AddButton, SettingsLayout } from './Dashboard.styled';
-  return (<div>DASHBOARD</div>);
+import { Button, Modal, Input, InputNumber, Space } from 'antd';
+import { SettingOutlined, UserAddOutlined } from '@ant-design/icons';
+import { useDashboard } from './useDashboard.hook';
+
+export function Dashboard({ password, config }) {
+
+  const { state, actions } = useDashboard(password, config);
+
+  return (
+    <DashboardWrapper>
+
+      <div class="container">
+        <div class="header">
+          <div class="label">Accounts</div>
+          <div class="settings">
+            <SettingsButton type="text" size="small" icon={<SettingOutlined />}
+                onClick={() => actions.setShowSettings(true)}></SettingsButton>
+          </div>
+          <div class="add">
+            <AddButton type="text" size="large" icon={<UserAddOutlined />}></AddButton>
+          </div>
+        </div>
+      </div>
+
+      <Modal title="Settings" visible={state.showSettings} centered
+          okText="Save" onOk={() => actions.onSaveSettings()} onCancel={() => actions.setShowSettings(false)}>
+       <SettingsLayout direction="vertical">
+          <div class="host">
+            <div>Federated Host:&nbsp;</div>
+            <Input placeholder="domain:port/app" onChange={(e) => actions.setHost(e.target.value)}
+                value={state.host} />
+          </div>
+          <div class="storage">
+            <div>Account Storage (GB):&nbsp;</div>
+            <InputNumber defaultValue={8} onChange={(e) => actions.setStorage(e)}
+                placeholder="0 for unrestricted" value={state.storage} />
+          </div>
+        </SettingsLayout>
+      </Modal>
+    
+    </DashboardWrapper>
+  );
 }
 

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

@@ -0,0 +1,74 @@
+import { Button, Space } from 'antd';
+import styled from 'styled-components';
+
+export const DashboardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  
+  .container {
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    border-radius: 4px;
+    max-width: 500px;
+    width: 50%;
+  }
+
+  .header {
+    color: #444444;
+    display: flex;
+    flex-direction: row;
+    font-size: 20px;
+    border-bottom: 1px solid #444444;
+  }
+
+  .label {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: flex;
+    align-items: center;
+  }
+
+  .settings {
+    display: flex;
+    align-items: center;
+  }
+
+  .add {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-grow: 1;
+  }
+`;
+
+export const AddButton = styled(Button)`
+  color: #1890ff;
+`;
+
+export const SettingsButton = styled(Button)`
+  color: #1890ff;
+`;
+
+export const SettingsLayout = styled(Space)`
+  width: 100%;
+
+  .host {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .storage {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+`;

net/web/src/Admin/Dashboard/useDashboard.hook.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { setNodeConfig } from 'api/setNodeConfig';
+
+export function useDashboard(password, config) {
+
+  const [state, setState] = useState({
+    host: "",
+    storage: null,
+    showSettings: false,
+    busy: false,
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    let storage = config.accountStorage / 1073741824;
+    if (storage > 1) {
+      storage = Math.ceil(storage);
+    }
+    updateState({ host: config.domain, storage: storage });
+  }, []);
+
+  const actions = {
+    setHost: (value) => {
+      updateState({ host: value });
+    },
+    setStorage: (value) => {
+      updateState({ storage: value });
+    },
+    setShowSettings: (value) => {
+      updateState({ showSettings: value });
+    },
+    onSaveSettings: async () => {
+      if (!state.busy) {
+        updateState({ busy: true });
+        try {
+          await setNodeConfig(password,
+            { ...state.config, domain: state.host, accountStorage: state.storage * 1073741824 });
+          updateState({ showSettings: false });
+        }
+        catch(err) {
+          console.log(err);
+          window.alert(err);
+        }
+        updateState({ busy: false });
+      }
+    },
+  };
+
+  return { state, actions };
+}
+

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

@@ -8,7 +8,7 @@ export const LoginWrapper = styled.div`
   justify-content: center;
   width: 100%;
   height: 100%;
-\  
+  
   .container {
     background-color: #ffffff;
     display: flex;

net/web/src/api/setNodeConfig.js

@@ -0,0 +1,11 @@
+import { checkResponse, fetchWithTimeout } from './fetchUtil';
+var base64 = require('base-64');
+
+export async function setNodeConfig(password, config) {
+  let body = JSON.stringify(config);
+  let headers = new Headers()
+  headers.append('Authorization', 'Basic ' + base64.encode("admin:" + password));
+  let settings = await fetchWithTimeout(`/admin/config`, { method: 'PUT', headers, body });
+  checkResponse(settings);
+}
+