From a24272db845800bff16bc5c49e30c9e8bd76e3c3 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 23 Feb 2024 12:21:18 -0800
Subject: [PATCH] styling logout modal

---
 net/web/src/session/account/profile/Profile.jsx | 17 ++++++++++++-----
 .../session/account/profile/Profile.styled.js   | 13 +++++++++++++
 .../session/account/profile/useProfile.hook.js  |  5 ++++-
 todo                                            | 13 +++++--------
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/net/web/src/session/account/profile/Profile.jsx b/net/web/src/session/account/profile/Profile.jsx
index 06e5e051..d4ffa3fe 100644
--- a/net/web/src/session/account/profile/Profile.jsx
+++ b/net/web/src/session/account/profile/Profile.jsx
@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react';
-import { Modal, Input, Button } from 'antd';
-import { ProfileWrapper, ProfileDetailsWrapper, ProfileImageWrapper, EditFooter } from './Profile.styled';
+import { Modal, Input, Button, Switch } from 'antd';
+import { LogoutContent, ProfileWrapper, ProfileDetailsWrapper, ProfileImageWrapper, EditFooter } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { Logo } from 'logo/Logo';
 import { AccountAccess } from './accountAccess/AccountAccess';
@@ -12,6 +12,7 @@ export function Profile({ closeProfile }) {
   const [ modal, modalContext ] = Modal.useModal();
   const { state, actions } = useProfile();
   const imageFile = useRef(null);
+  const all = useRef(false);
 
   const selected = (e) => {
     var reader = new FileReader();
@@ -53,12 +54,18 @@ export function Profile({ closeProfile }) {
 
   const logout = () => {
     modal.confirm({
-      title: 'Are you sure you want to logout?',
+      title: <span style={state.menuStyle}>{state.strings.confirmLogout}</span>,
       icon: <LogoutOutlined />,
-      bodyStyle: { padding: 16 },
+      content: <LogoutContent onClick={(e) => e.stopPropagation()}>
+                <span className="logoutMode">{ state.strings.allDevices }</span>
+                <Switch onChange={(e) => all.current = e} size="small" />
+               </LogoutContent>,
+      bodyStyle: { padding: 16, ...state.menuStyle },
+      okText: state.strings.ok,
       onOk() {
-        actions.logout();
+        actions.logout(all.current);
       },
+      cancelText: state.strings.cancel,
       onCancel() {},
     });
   }
diff --git a/net/web/src/session/account/profile/Profile.styled.js b/net/web/src/session/account/profile/Profile.styled.js
index c7102558..be5feae9 100644
--- a/net/web/src/session/account/profile/Profile.styled.js
+++ b/net/web/src/session/account/profile/Profile.styled.js
@@ -217,6 +217,19 @@ export const ProfileWrapper = styled.div`
     }
   }
 `
+
+export const LogoutContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+
+  .logoutMode {
+    padding-right: 8px;
+    color: ${props => props.theme.mainText};
+  }
+`
+
 export const EditFooter = styled.div`
   width: 100%;
   display: flex;
diff --git a/net/web/src/session/account/profile/useProfile.hook.js b/net/web/src/session/account/profile/useProfile.hook.js
index 4c4d2913..12dafe84 100644
--- a/net/web/src/session/account/profile/useProfile.hook.js
+++ b/net/web/src/session/account/profile/useProfile.hook.js
@@ -25,6 +25,8 @@ export function useProfile() {
     crop: { x: 0, y: 0},
     zoom: 1,
     busy: false,
+    strings: {},
+    menuStyle: {},
   });
 
   const IMAGE_DIM = 192;
@@ -45,7 +47,8 @@ export function useProfile() {
   }, [profile.state]);
 
   useEffect(() => {
-    updateState({ displaySet: true, display: settings.state.display });
+    const { display, strings, menuStyle } = settings.state;
+    updateState({ displaySet: true, display, strings, menuStyle });
   }, [settings.state]);
 
   const actions = {
diff --git a/todo b/todo
index ae884ad4..790c3ff4 100644
--- a/todo
+++ b/todo
@@ -1,13 +1,10 @@
 profile:
-  - details layout
-  - detail edit icon style
-  - image edit icon layout
+  - add translations
   - style modals
-  - add app settings
-    - hour format
-    - date format
-    - color theme
-    - language
+    - image edit
+    - details edit
+    - sealed topics
+    - change login
 
 contact:
   - dark style