feat: add obfuscate confirmation modal (#2387)

client/src/components/Profile/MainCard.tsx

@@ -6,8 +6,9 @@ import { GithubAvatar } from 'components/GithubAvatar';
 import { LocationSelect } from 'components/Forms';
 import { Location } from 'common/models/profile';
 import ProfileSettingsModal from './ProfileSettingsModal';
-import { ProfileApi, UpdateProfileInfoDto } from 'api';
+import { UpdateProfileInfoDto } from 'api';
 import { ProfileMainCardData } from 'services/user';
+import ObfuscationModal from './ObfuscateConfirmationModal';
 
 const { Title, Paragraph, Text } = Typography;
 
@@ -18,8 +19,6 @@ type Props = {
   updateProfile: (data: UpdateProfileInfoDto) => Promise<boolean>;
 };
 
-const profileApi = new ProfileApi();
-
 const MainCard = ({ data, isAdmin, isEditingModeEnabled, updateProfile }: Props) => {
   const { githubId, name, location, publicCvUrl } = data;
   const [isProfileSettingsVisible, setIsProfileSettingsVisible] = useState(false);
@@ -28,6 +27,7 @@ const MainCard = ({ data, isAdmin, isEditingModeEnabled, updateProfile }: Props)
   const [displayLocation, setDisplayLocation] = useState(location);
   const [nameInputValue, setNameInputValue] = useState(displayName);
   const [locationSelectValue, setLocationSelectValue] = useState(displayLocation);
+  const [isObfuscateModalVisible, setIsObfuscateModalVisible] = useState(false);
 
   const showProfileSettings = () => {
     setIsProfileSettingsVisible(true);
@@ -83,15 +83,13 @@ const MainCard = ({ data, isAdmin, isEditingModeEnabled, updateProfile }: Props)
     setIsSaveDisabled(!readyToUpdate);
   }, [nameInputValue, locationSelectValue, displayName, displayLocation]);
 
-  const obfuscateProfile = async () => {
-    if (githubId) {
-      await profileApi.obfuscateProfile(githubId);
-    }
-    window.location.reload();
-  };
-
   return (
     <>
+      <ObfuscationModal
+        open={isObfuscateModalVisible}
+        githubId={githubId}
+        setIsModalVisible={setIsObfuscateModalVisible}
+      />
       <Card style={{ position: 'relative' }}>
         {isEditingModeEnabled ? (
           <EditOutlined
@@ -131,7 +129,7 @@ const MainCard = ({ data, isAdmin, isEditingModeEnabled, updateProfile }: Props)
         ) : null}
         {isAdmin ? (
           <Paragraph style={{ textAlign: 'center', marginTop: 20 }}>
-            <Button danger onClick={obfuscateProfile}>
+            <Button danger onClick={() => setIsObfuscateModalVisible(true)}>
               Obfuscate
             </Button>
           </Paragraph>

client/src/components/Profile/ObfuscateConfirmationModal.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { Modal, Input, Typography, Space } from 'antd';
+import { ProfileApi } from 'api';
+
+const { Text, Paragraph } = Typography;
+
+type Props = {
+  githubId: string | null;
+  setIsModalVisible: (value: boolean) => void;
+  open: boolean;
+};
+
+const profileApi = new ProfileApi();
+
+const ObfuscationModal = ({ githubId, setIsModalVisible, open }: Props) => {
+  const [inputValue, setInputValue] = useState('');
+  const [isInputValid, setIsInputValid] = useState(true);
+
+  const handleOk = async () => {
+    if (githubId && inputValue === githubId) {
+      await profileApi.obfuscateProfile(githubId);
+      window.location.reload();
+    } else {
+      setIsInputValid(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setInputValue('');
+    setIsInputValid(true);
+  };
+
+  return (
+    <Modal open={open} title="Confirm GitHub Profile Obfuscation" onOk={handleOk} onCancel={handleCancel}>
+      <Space direction="vertical">
+        <Paragraph>
+          <Text>
+            Please type the GitHub nickname <Text strong>"{githubId}"</Text> to confirm obfuscation.
+          </Text>
+        </Paragraph>
+        <Paragraph type="warning">
+          <Text strong type="danger">
+            Warning:
+          </Text>{' '}
+          Once initiated, the obfuscation process cannot be canceled. Upon completion, all user data will be permanently
+          deleted and this action is irreversible. Please verify the GitHub nickname and proceed with extreme caution.
+        </Paragraph>
+        <Input
+          placeholder="Enter GitHub nickname"
+          value={inputValue}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setInputValue(e.target.value);
+            setIsInputValid(true);
+          }}
+          status={isInputValid ? '' : 'error'}
+        />
+        {!isInputValid && <Text type="danger">Nickname does not match. Please try again.</Text>}
+      </Space>
+    </Modal>
+  );
+};
+
+export default ObfuscationModal;