populating settings screen

app/client/web/src/access/Access.module.css

@@ -24,7 +24,6 @@
     height: 48px;
     display: flex;
     align-items: center;
-    color: var(--mantine-color-red-6);
   }
 }
 

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

@@ -12,6 +12,7 @@ export const en = {
   enableNotifications: 'Push Notifications',
   accessCode: 'Access Code',
   forgotPassword: 'Forgot Password',
+  manageTopics: 'Manage Sealing Key',
 
   new: 'New',
   newMessage: 'New Message',
@@ -225,6 +226,7 @@ export const fr = {
   enableNotifications: 'Notifications Push',
   accessCode: "Code d'Accès",
   forgotPassword: 'Mot de Passe Oublié',
+  manageTopics: 'Gérer la clé de sécurité',
 
   new: 'Nouveau',
   newMessage: 'Nouveau Message',
@@ -441,6 +443,7 @@ export const sp = {
   enableNotifications: 'Notificaciones Push',
   accessCode: 'Código de Acceso',
   forgotPassword: 'Contraseña Olvidada',
+  manageTopics: 'Administrar clave de seguridad',
 
   new: 'Nuevo',
   newMessage: 'Nuevo mensaje',
@@ -655,6 +658,7 @@ export const pt = {
   enableNotifications: 'Notificações Push',
   accessCode: 'Código de Acesso',
   forgotPassword: 'Senha Esquecida',
+  manageTopics: 'Gerenciar Chave de Selagem',
 
   new: 'Novo',
   newMessage: 'Nova mensagem',
@@ -869,6 +873,7 @@ export const de = {
   enableNotifications: 'Mitteilungen',
   accessCode: 'Zugangscode',
   forgotPassword: 'Passwort Vergessen',
+  manageTopics: 'Sicherheitsschlüssel verwalten',
 
   new: 'Neu',
   newMessage: 'Neue Nachricht',
@@ -1084,6 +1089,7 @@ export const ru = {
   enableNotifications: 'Уведомления',
   accessCode: 'Код доступа',
   forgotPassword: 'Пароль забыт',
+  manageTopics: 'Управление ключом запечатывания',
 
   new: 'Новый',
   newMessage: 'Новое сообщение',

app/client/web/src/session/Session.module.css

@@ -27,6 +27,8 @@
 
   .screen {
     width: 100%;
+    padding-left: 10%;
+    padding-right: 10%;
     height: calc(100% - 48px);
     background-color: #444444;
   } 

app/client/web/src/session/Session.tsx

@@ -25,7 +25,6 @@ export function Session() {
       { display.state.layout === 'small' && (
         <>
           <div className={classes.screen}>
-            <Button onClick={app.actions.accountLogout}>Session Logout</Button>
             { tab === 'settings' && (
               <Settings />
             )}

app/client/web/src/settings/Settings.module.css

@@ -2,10 +2,11 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  padding: 8px;
+  gap: 2px;
 
   .header {
-    font-size: 24px;
+    font-size: 22px;
     text-align: center;
     text-wrap: nowrap;
     text-overflow: ellipsis;
@@ -14,8 +15,10 @@
 
   .image {
     position: relative;
-    width: 80%;
+    width: 90%;
     max-width: 250px;
+    margin-top: 8px;
+    margin-bottom: 24px;
   }
 
   .edit {
@@ -25,4 +28,79 @@
     display: flex;
     justify-content: center;
   }
+
+  .section {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .sectionEdit {
+      flex-shrink: 0;
+      color: var(--mantine-color-dbgreen-1);
+      padding-left: 8px;
+      height: 0px;
+      position: relative;
+      top: -12px;
+    }
+  }
+
+  .divider {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    border: 1px solid var(--mantine-color-text-9);
+    width: 100%;
+  }
+
+  .nameSet {
+    width: 100%;
+    padding-left: 8px;
+    font-size: 24px;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .nameUnset {
+    width: 100%;
+    padding-left: 8px;
+    font-size: 24px;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-style: italic;
+    color: var(--mantine-color-text-9);
+  }
+
+  .entry {
+    width: 100%;
+    padding-left: 8px;
+    display: flex;
+
+    .entryIcon {
+      width: 32px;
+    }
+
+    .entrySet {
+    }
+
+    .entryUnset {
+      font-style: italic;
+      color: var(--mantine-color-text-9);
+    }
+
+    .entryValue {
+      display: flex;
+      cursor: pointer;
+
+      .entryLabel {
+        padding-right: 16px;
+        color: var(--mantine-color-dbgreen-1);
+      }
+
+      .entryControl {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
 }

app/client/web/src/settings/Settings.tsx

@@ -1,6 +1,7 @@
 import { useSettings } from './useSettings.hook';
-import { Text, Image, Button } from '@mantine/core';
+import { Switch, Text, Image, Button, UnstyledButton } from '@mantine/core';
 import classes from './Settings.module.css';
+import { IconCloudLock, IconBell, IconEye, IconBook, IconMapPin } from '@tabler/icons-react'
 
 export function Settings() {
   const { state, actions } = useSettings();
@@ -16,6 +17,65 @@ export function Settings() {
           <Button size="compact-md" variant="light">{ state.strings.edit }</Button>
         </div>
       </div>
+      <div className={classes.section}>
+        <div className={classes.divider} />
+        <UnstyledButton className={classes.sectionEdit}>{ state.strings.edit }</UnstyledButton>
+      </div>
+      { !state.profile.name && (
+        <Text className={classes.nameUnset}>{state.strings.name}</Text>
+      )}
+      { state.profile.name && (
+        <Text className={classes.nameSet}>{state.profile.name}</Text>
+      )}
+      <div className={classes.entry}>
+        <div className={classes.entryIcon}>
+          <IconMapPin />
+        </div>
+        { !state.profile.location && (
+          <Text className={classes.entryUnset}>{state.strings.location}</Text>
+        )}
+        { state.profile.location && (
+          <Text className={classes.entrySet}>{state.profile.location}</Text>
+        )}
+      </div>
+      <div className={classes.entry}>
+        <div className={classes.entryIcon}>
+          <IconBook />
+        </div>
+        { !state.profile.description && (
+          <Text className={classes.entryUnset}>{state.strings.description}</Text>
+        )}
+        { state.profile.description && (
+          <Text className={classes.entrySet}>{state.profile.description}</Text>
+        )}
+      </div>
+      <div className={classes.divider} />
+      <div className={classes.entry}>
+        <div className={classes.entryIcon}>
+          <IconEye />
+        </div>
+        <div className={classes.entryValue}>
+          <Text className={classes.entryLabel}>{ state.strings.registry }</Text>
+          <Switch className={classes.entryControl} />
+        </div>
+      </div>
+      <div className={classes.entry}>
+        <div className={classes.entryIcon}>
+          <IconCloudLock />
+        </div>
+        <div className={classes.entryValue}>
+          <Text className={classes.entryLabel}>{ state.strings.manageTopics }</Text>
+        </div>
+      </div>
+      <div className={classes.entry}>
+        <div className={classes.entryIcon}>
+          <IconBell />
+        </div>
+        <div className={classes.entryValue}>
+          <Text className={classes.entryLabel}>{ state.strings.enableNotifications }</Text>
+          <Switch className={classes.entryControl} />
+        </div>
+      </div>
     </div>
   );
 }