rendering members in admin

app/client/mobile/src/constants/Strings.ts

@@ -171,8 +171,8 @@ export const en = {
   areSure: 'Are you sure you want to delete the account?',
 
   addingTitle: 'Adding Account',
-  addingLink: 'Use the following link can be used to create an account',
-  addingToken: 'Use the following token can be used to create an account from the login screen',
+  addingLink: 'Use the following link to create an account',
+  addingToken: 'Use the following token to create an account from the login screen',
   accessingTitle: 'Accessing Account',
   accessingLink: 'Use the following link to access the specified account',
   accessingToken: 'Use the following token to access the specified account from the login screen',

app/client/web/src/accounts/Accounts.module.css

@@ -1,12 +1,33 @@
 .accounts {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
 
+  .member {
+    height: 40px;
+    padding-bottom: 8px;
+    padding-top: 8px;
+    padding-left: 16px;
+    padding-right: 16px;
+    border-bottom: 1px solid var(--mantine-color-text-8);
+    font-size: 14px;
+  }
+
+  .action {
+    margin-left: 8px;
+    margin-right: 8px;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
   .content {
     width: 100%;
-    max-width: 650px;
+    max-width: 800px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 
     .header {
       height: 48px;
@@ -15,6 +36,9 @@
       flex-direction: row;
       justify-content: center;
       align-items: center;
+      padding-left: 16px;
+      padding-right: 16px;
+      border-bottom: 2px solid var(--mantine-color-text-8);
 
       .leftTitle {
         flex-grow: 1;
@@ -29,15 +53,22 @@
       }
 
       .title {
-        padding-left: 16px;
-        padding-right: 16px;
         font-size: 20px;
+        padding-left: 8px;
+        padding-right: 8px;
       }
       .area {
         flex-grow: 1;
       }
     }
 
+    .members {
+      flex-grow: 1;
+      min-height: 0;
+      overflow: auto;
+      padding-top: 8px;
+    }
+
     .line {
       width: 100%;
     }

app/client/web/src/accounts/Accounts.tsx

@@ -1,19 +1,53 @@
 import classes from './Accounts.module.css'
 import { useAccounts } from './useAccounts.hook'
 import { Modal, Divider, Text, ActionIcon } from '@mantine/core'
+import { IconUserPlus, IconReload, IconSettings, IconLockOpen2, IconUserCancel, IconTrash } from '@tabler/icons-react'
+import { Card } from '../card/Card'
 
 export function Accounts({ openSetup }: { openSetup: ()=>void }) {
   const { state, actions } = useAccounts();
 
+  const members = state.members.map((member, idx) => {
+    const options = [
+      <ActionIcon key="acess" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}><IconLockOpen2 /></ActionIcon>,
+      <ActionIcon key="block" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}><IconUserCancel /></ActionIcon>,
+      <ActionIcon key="remove" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}><IconTrash /></ActionIcon>,
+    ];
+
+    return (
+      <Card key={idx} className={classes.member} imageUrl={member.imageUrl} name={member.handle} handle={member.guid}  select={()=>{}} actions={options} />
+    )
+  });
+
   return (
     <div className={classes.accounts}>
       <div className={classes.content}>
         <div className={classes.header}>
+          { state.layout !== 'large' && (
+            <ActionIcon className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}> 
+              <IconReload />
+            </ActionIcon>
+          )}
           <div className={state.layout === 'large' ? classes.leftTitle : classes.centerTitle}>
             <Text className={classes.title}>{ state.strings.accounts }</Text>
           </div>
+          { state.layout === 'large' && (
+            <ActionIcon className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}> 
+              <IconReload />
+            </ActionIcon>
+          )}
+          <ActionIcon className={classes.action} variant="light" onClick={()=>{}}> 
+            <IconUserPlus />
+          </ActionIcon>
+          { state.layout === 'large' && (
+            <ActionIcon className={classes.action} variant="light" onClick={openSetup}> 
+              <IconSettings />
+            </ActionIcon>
+          )}
+        </div>
+        <div className={classes.members}>
+          { members }
         </div>
-        <Divider className={classes.line} />
       </div>
     </div>
   );

app/client/web/src/card/Card.module.css

@@ -31,6 +31,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    min-width: 0;
     padding-left: 8px;
     padding-right: 8px;
   }

app/client/web/src/constants/Strings.ts

@@ -169,8 +169,8 @@ export const en = {
   areSure: 'Are you sure you want to delete the account?',
 
   addingTitle: 'Adding Account',
-  addingLink: 'Use the following link can be used to create an account',
-  addingToken: 'Use the following token can be used to create an account from the login screen',
+  addingLink: 'Use the following link to create an account',
+  addingToken: 'Use the following token to create an account from the login screen',
   accessingTitle: 'Accessing Account',
   accessingLink: 'Use the following link to access the specified account',
   accessingToken: 'Use the following token to access the specified account from the login screen',

app/client/web/src/setup/Setup.module.css

@@ -15,6 +15,8 @@
       flex-direction: row;
       justify-content: center;
       align-items: center;
+      padding-left: 16px;
+      padding-right: 16px;
 
       .centerTitle {
         flex-grow: 1;

app/client/web/src/setup/Setup.tsx

@@ -1,6 +1,6 @@
 import classes from './Setup.module.css'
 import { useSetup } from './useSetup.hook'
-import { Modal, Divider, Text, ActionIcon } from '@mantine/core'
+import { Loader, Modal, Divider, Text, ActionIcon } from '@mantine/core'
 
 export function Setup() {
   const { state, actions } = useSetup();
@@ -9,9 +9,15 @@ export function Setup() {
     <div className={classes.accounts}>
       <div className={classes.content}>
         <div className={classes.header}>
+          { state.loading && (
+            <Loader size={18} />
+          )}
           <div className={classes.centerTitle}>
             <Text className={classes.title}>{ state.strings.setup }</Text>
           </div>
+          { state.updating && (
+            <Loader size={18} />
+          )}
         </div>
         <Divider className={classes.line} />
       </div>