From aaa351635f3b6e20ebbc892e79c90ad6d6f44265 Mon Sep 17 00:00:00 2001
From: Misha Bragin <bangvalo@gmail.com>
Date: Tue, 21 Feb 2023 08:47:14 +0100
Subject: [PATCH] Add peer expiration setting confirmation modal (#137)

Add a confirmation dialog to notify a user of possible
consequences of the peer login expiration enabling/disabling.
---
 src/views/Settings.tsx | 47 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
index 7141317..f5aa75c 100644
--- a/src/views/Settings.tsx
+++ b/src/views/Settings.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
-import {Button, Card, Col, Form, message, Radio, Row, Space, Typography,} from "antd";
+import {Button, Card, Col, Form, List, message, Modal, Radio, Row, Space, Typography,} from "antd";
 import {useGetAccessTokenSilently} from "../utils/token";
 import {useGetGroupTagHelpers} from "../utils/groups";
 import {Container} from "../components/Container";
@@ -10,7 +10,8 @@ import ExpiresInInput, {expiresInToSeconds, secondsToExpiresIn} from "./ExpiresI
 import {checkExpiresIn} from "../utils/common";
 import {actions as accountActions} from "../store/account";
 import {Account, FormAccount} from "../store/account/types";
-import {values} from "lodash";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+const {confirm} = Modal;
 
 const {Title, Paragraph} = Typography;
 
@@ -29,6 +30,7 @@ export const Settings = () => {
     const updatedAccount = useSelector((state: RootState) => state.account.updatedAccount);
     const users = useSelector((state: RootState) => state.user.data);
     const [formAccount, setFormAccount] = useState({} as FormAccount);
+    const [accountToAction, setAccountToAction] = useState({} as FormAccount);
     const [formPeerExpirationEnabled, setFormPeerExpirationEnabled] = useState(true);
 
 
@@ -69,6 +71,13 @@ export const Settings = () => {
             });
             dispatch(accountActions.setUpdateAccount({...updatedAccount, success: false}));
             dispatch(accountActions.resetUpdateAccount(null))
+            let fAccount = {
+                id: updatedAccount.data.id,
+                settings: updatedAccount.data.settings,
+                peer_login_expiration_formatted: secondsToExpiresIn(updatedAccount.data.settings.peer_login_expiration, ["hour", "day"]),
+                peer_login_expiration_enabled: updatedAccount.data.settings.peer_login_expiration_enabled
+            } as FormAccount
+            setFormAccount(fAccount)
         } else if (updatedAccount.error) {
             let errorMsg = "Failed to update account settings"
             switch (updatedAccount.error.statusCode) {
@@ -91,11 +100,7 @@ export const Settings = () => {
     const handleFormSubmit = () => {
         form.validateFields()
             .then((values) => {
-                let accountToSave = createAccountToSave(values)
-                dispatch(accountActions.updateAccount.request({
-                    getAccessTokenSilently: getAccessTokenSilently,
-                    payload: accountToSave
-                }))
+                confirmSave(values)
             })
             .catch((errorInfo) => {
                 let msg = "please check the fields and try again"
@@ -119,6 +124,34 @@ export const Settings = () => {
         } as Account
     }
 
+    const confirmSave = (newValues: FormAccount) => {
+        if (newValues.peer_login_expiration_enabled != formAccount.peer_login_expiration_enabled) {
+            let content = newValues.peer_login_expiration_enabled ? "Enabling peer expiration will cause some peers added with the SSO login to disconnect, and re-authentication will be required. Do you want to enable peer login expiration?" : "Disabling peer expiration will cause peers added with the SSO login never to expire. For security reasons, keeping peers expiring periodically is usually better. Do you want to disable peer login expiration?"
+            confirm({
+                icon: <ExclamationCircleOutlined/>,
+                title: "Before you update your account settings.",
+                width: 600,
+                content: content,
+                okType: 'danger',
+                onOk() {
+                    saveAccount(newValues)
+                },
+                onCancel() {
+                },
+            });
+        } else {
+            saveAccount(newValues)
+        }
+    }
+
+    const saveAccount = (newValues: FormAccount) => {
+        let accountToSave = createAccountToSave(newValues)
+        dispatch(accountActions.updateAccount.request({
+            getAccessTokenSilently: getAccessTokenSilently,
+            payload: accountToSave
+        }))
+    }
+
     return (
         <>
             <Container style={{paddingTop: "40px"}}>