WIP

web-app/client/package.json

@@ -50,6 +50,7 @@
     "react-spring": "^9.5.2",
     "react-toastify": "^9.1.1",
     "recharts": "^2.12.5",
+    "svg-arc": "^1.0.2",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "yup": "^0.32.11"

web-app/client/src/graphql/operations/mutations/updateUser.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_USER = gql`
+  mutation updateUser($props: UpdatingUserProps!) {
+    updateUser(props: $props) {
+      message
+    }
+  }
+`;

web-app/client/src/graphql/operations/queries/getOwnDatasets.ts

@@ -0,0 +1,35 @@
+import { gql } from '@apollo/client';
+
+export const GET_OWN_DATASETS = gql`
+  query getOwnDatasets(
+    $filter: DatasetsFilter
+    $sort: DatasetsSort
+    $pagination: Pagination
+  ) {
+    user {
+      datasets(filter: $filter, sort: $sort, pagination: $pagination) {
+        total
+        data {
+          fileID
+          fileName
+          hasHeader
+          delimiter
+          supportedPrimitives
+          rowsCount
+          fileSize
+          fileFormat {
+            inputFormat
+            tidColumnIndex
+            itemColumnIndex
+            hasTid
+          }
+          countOfColumns
+          isBuiltIn
+          createdAt
+          originalFileName
+          numberOfUses
+        }
+      }
+    }
+  }
+`;

web-app/client/src/graphql/operations/queries/getUser.ts

@@ -8,9 +8,12 @@ export const GET_USER = gql`
       email
       permissions
       accountStatus
+      country
+      companyOrAffiliation
+      occupation
       reservedDiskSpace
       remainingDiskSpace
-      tasks(withDeleted: false) {
+      tasks {
         total
         data {
           taskID

web-app/client/src/routes/UserCabinet/tabs/AccountSettings/AccountSettings.module.scss

@@ -0,0 +1,18 @@
+@import "styles/common";
+
+.accountSettingsTab {
+  max-width: 464px;
+
+  .title {
+    margin: 0 0 32px;
+  }
+
+  .additionalActions {
+    display: flex;
+    gap: 16px;
+
+    button {
+      width: 100%;
+    }
+  }
+}

web-app/client/src/routes/UserCabinet/tabs/AccountSettings/AccountSettings.tsx

@@ -0,0 +1,43 @@
+import { FC, useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { GET_USER } from '@graphql/operations/queries/getUser';
+import { getUser } from '@graphql/operations/queries/__generated__/getUser';
+import ProfileForm from './components/ProfileForm';
+import Button from '@components/Button';
+import ChangePasswordModal from './components/ChangePasswordModal';
+import styles from './AccountSettings.module.scss';
+
+const AccountSettings: FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { data } = useQuery<getUser>(GET_USER, {
+    variables: {
+      userID: undefined,
+    },
+  });
+
+  const user = data?.user;
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div className={styles.accountSettingsTab}>
+      <h5 className={styles.title}>Account Settings</h5>
+      <ProfileForm user={user} />
+      <div className={styles.additionalActions}>
+        <Button variant="secondary" onClick={() => setIsModalOpen(true)}>
+          Change Password
+        </Button>
+        <Button variant="secondary-danger" disabled>
+          Delete Account
+        </Button>
+      </div>
+      {isModalOpen && (
+        <ChangePasswordModal onClose={() => setIsModalOpen(false)} />
+      )}
+    </div>
+  );
+};
+
+export default AccountSettings;

web-app/client/src/routes/UserCabinet/tabs/AccountSettings/components/ChangePasswordModal/ChangePasswordModal.module.scss

@@ -0,0 +1,21 @@
+@import "styles/common";
+
+.changePasswordModal {
+  .title {
+    text-align: center;
+    margin: 0 0 32px;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin: 0 0 32px;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+  }
+}

web-app/client/src/routes/UserCabinet/tabs/AccountSettings/components/ChangePasswordModal/ChangePasswordModal.tsx

@@ -0,0 +1,92 @@
+import { Text } from '@components/Inputs';
+import ModalContainer, { ModalProps } from '@components/ModalContainer';
+import { FC, useId } from 'react';
+import { useForm } from 'react-hook-form';
+import isStrongPassword from 'validator/lib/isStrongPassword';
+import styles from './ChangePasswordModal.module.scss';
+import Button from '@components/Button';
+import { useMutation } from '@apollo/client';
+import { CHANGE_PASSWORD } from '@graphql/operations/mutations/changePassword';
+import {
+  changePassword,
+  changePasswordVariables,
+} from '@graphql/operations/mutations/__generated__/changePassword';
+
+type Inputs = {
+  oldPassword: string;
+  newPassword: string;
+  repeatPassword: string;
+};
+
+const ChangePasswordModal: FC<ModalProps> = ({ onClose }) => {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<Inputs>();
+  const formId = useId();
+  const [changePassword] = useMutation<changePassword, changePasswordVariables>(
+    CHANGE_PASSWORD,
+  );
+
+  const onSubmit = handleSubmit(async (values) => {
+    try {
+      await changePassword({
+        variables: {
+          currentPwdHash: values.oldPassword,
+          newPwdHash: values.newPassword,
+        },
+      });
+      location.reload();
+    } catch (e) {}
+  });
+
+  return (
+    <ModalContainer onClose={onClose} className={styles.changePasswordModal}>
+      <h4 className={styles.title}>Change password</h4>
+      <form onSubmit={onSubmit} id={formId}>
+        <Text
+          label="Old password"
+          type="password"
+          placeholder="admin1234"
+          {...register('oldPassword', {
+            required: 'Required',
+          })}
+          error={errors.oldPassword?.message}
+        />
+        <Text
+          label="New password"
+          type="password"
+          placeholder="admin1234"
+          {...register('newPassword', {
+            required: 'Required',
+            // validate: (value) => isStrongPassword(value) || 'Weak password',
+          })}
+          error={errors.newPassword?.message}
+        />
+        <Text
+          label="Repeat password"
+          type="password"
+          placeholder="admin1234"
+          {...register('repeatPassword', {
+            required: 'Required',
+            validate: {
+              //   isStrong: (value) => isStrongPassword(value) || 'Weak password',
+              isSame: (value, { newPassword }) =>
+                value === newPassword || 'Passwords do not match',
+            },
+          })}
+          error={errors.repeatPassword?.message}
+        />
+      </form>
+      <div className={styles.actions}>
+        <Button variant="secondary">Cancel</Button>
+        <Button type="submit" form={formId}>
+          Update password
+        </Button>
+      </div>
+    </ModalContainer>
+  );
+};
+
+export default ChangePasswordModal;

web-app/client/src/routes/UserCabinet/tabs/AccountSettings/components/ChangePasswordModal/index.ts

@@ -0,0 +1 @@
+export { default } from './ChangePasswordModal';

web-app/client/src/routes/UserCabinet/tabs/AccountSettings/components/ProfileForm/ProfileForm.module.scss

@@ -0,0 +1,8 @@
+@import "styles/common";
+
+.profileForm {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 0 0 16px;
+}