rendering accounts in admin dashboard

net/web/src/Admin/Admin.jsx

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

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

@@ -1,4 +1,34 @@
-export function AccountItem() {
+import { Avatar } from 'avatar/Avatar';
-  return <div>ACCOUNT</div>
+import { AccountItemWrapper, DeleteButton, EnableButton, DisableButton, ResetButton } from './AccountItem.styled';
+import { useAccountItem } from './useAccountItem.hook';
+import { UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
+
+export function AccountItem({ token, item }) {
+
+  const { state, actions } = useAccountItem(token, item);
+
+  const Enable = () => {
+    if (state.disabled) {
+      return <EnableButton type="text" size="large" icon={<CloseCircleOutlined />}></EnableButton>
+    }
+    return <DisableButton type="text" size="large" icon={<CheckCircleOutlined />}></DisableButton>
+  }
+
+  return (
+    <AccountItemWrapper>
+      <div class="avatar">
+        <Avatar imageUrl={state.imageUrl} />
+      </div>
+      <div class="id">
+        <div class="handle">{ state.handle }</div>
+        <div class="guid">{ state.guid }</div>
+      </div>
+      <div class="control">
+        <ResetButton type="text" size="large" icon={<UnlockOutlined />}></ResetButton>
+        <Enable />
+        <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}></DeleteButton>
+      </div>
+    </AccountItemWrapper>
+  );
 }
 

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

@@ -0,0 +1,66 @@
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const AccountItemWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  overflow: hidden;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid #eeeeee;
+
+  &:hover {
+    background-color: #eeeeee;
+  }
+
+  .avatar {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .id {
+    padding-left: 16px;
+    padding-right: 8px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .handle {
+      font-size: 0.8em;
+      font-weight: bold;
+    }
+
+    .guid {
+      font-size: 0.8em;
+      font-weight: bold;
+    }
+
+    .control {
+      flex-grow: 1;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+`;
+
+export const EnableButton = styled(Button)`
+  color: orange;
+`;
+
+export const DisableButton = styled(Button)`
+  color: orange;
+`;
+
+export const ResetButton = styled(Button)`
+  color: #1890ff;
+`;
+
+export const DeleteButton = styled(Button)`
+  color: red;
+`

net/web/src/Admin/Dashboard/AccountItem/useAccountItem.hook.js

@@ -0,0 +1,28 @@
+import { useContext, useState, useEffect } from 'react';
+import { getAccountImageUrl } from 'api/getAccountImageUrl';
+
+export function useAccountItem(token, item) {
+  
+  const [state, setState] = useState({
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    updateState({
+      disabled: false,
+      accountId: item?.accountId,
+      name: item?.name,
+      guid: item?.guid,
+      handle: item?.handle,
+      imageUrl: item?.imageSet ? getAccountImageUrl(token, item?.accountId) : null,
+    });
+  }, []); 
+
+  const actions = {
+  };
+
+  return { state, actions };
+}

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

@@ -4,9 +4,9 @@ import { SettingOutlined, UserAddOutlined, ReloadOutlined } from '@ant-design/ic
 import { useDashboard } from './useDashboard.hook';
 import { AccountItem } from './AccountItem/AccountItem';
 
-export function Dashboard({ password, config }) {
+export function Dashboard({ token, config }) {
 
-  const { state, actions } = useDashboard(password, config);
+  const { state, actions } = useDashboard(token, config);
 
   return (
     <DashboardWrapper>
@@ -33,7 +33,7 @@ export function Dashboard({ password, config }) {
             itemLayout="horizontal"
             dataSource={state.accounts}
             loading={state.loading}
-            renderItem={item => (<AccountItem item={item} />)}
+            renderItem={item => (<AccountItem token={token} item={item} />)}
           />
         </div>
       </div>

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

@@ -15,7 +15,8 @@ export const DashboardWrapper = styled.div`
     flex-direction: column;
     padding: 16px;
     border-radius: 4px;
-    max-width: 500px;
+    min-width: 800px;
+    max-width: 900px;
     width: 50%;
     max-height: 80%;
 
@@ -28,6 +29,7 @@ export const DashboardWrapper = styled.div`
     }
 
     .body {
+      padding-top: 8px;
       min-height: 0;
       overflow: auto;
     }

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

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { setNodeConfig } from 'api/setNodeConfig';
 import { getNodeAccounts } from 'api/getNodeAccounts';
 
-export function useDashboard(password, config) {
+export function useDashboard(token, config) {
 
   const [state, setState] = useState({
     host: "",
@@ -31,7 +31,7 @@ export function useDashboard(password, config) {
       if (!state.busy) {
         updateState({ busy: true });
         try {
-          await setNodeConfig(password,
+          await setNodeConfig(token,
             { ...state.config, domain: state.host, accountStorage: state.storage * 1073741824 });
           updateState({ showSettings: false });
         }
@@ -46,7 +46,16 @@ export function useDashboard(password, config) {
       if (!state.loading) {
         updateState({ loading: true });
         try {
-          let accounts = await getNodeAccounts(password);
+          let accounts = await getNodeAccounts(token);
+          accounts.sort((a, b) => {
+            if (a.handle < b.handle) {
+              return -1;
+            }
+            if (a.handle > b.handle) {
+              return 1;
+            }
+            return 0;
+          });
           updateState({ accounts });
         }
         catch(err) {

net/web/src/api/getAccountImageUrl.js

@@ -0,0 +1,4 @@
+export function getAccountImageUrl(token, accountId) {
+  return `/admin/accounts/${accountId}/image?token=${token}`
+}
+