feat: manage account buttons

src/renderer/src/declaration.d.ts

@@ -29,6 +29,7 @@ import type {
   UserAchievement,
   ComparedAchievements,
   CatalogueSearchPayload,
+  ManageAccountPage,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";
 import type disk from "diskusage";
@@ -187,6 +188,7 @@ declare global {
     /* Misc */
     openExternal: (src: string) => Promise<void>;
     openCheckout: () => Promise<void>;
+    openManageAccount: (page: ManageAccountPage) => Promise<void>;
     getVersion: () => Promise<string>;
     isStaging: () => Promise<boolean>;
     ping: () => string;

src/renderer/src/pages/settings/settings-account.tsx

@@ -0,0 +1,217 @@
+import { Button, SelectField } from "@renderer/components";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import * as styles from "./settings-account.css";
+import { useDate, useToast, useUserDetails } from "@renderer/hooks";
+import { useCallback, useContext, useEffect, useState } from "react";
+import {
+  CloudIcon,
+  KeyIcon,
+  MailIcon,
+  XCircleFillIcon,
+} from "@primer/octicons-react";
+import { settingsContext } from "@renderer/context";
+
+interface FormValues {
+  profileVisibility: "PUBLIC" | "FRIENDS" | "PRIVATE";
+}
+
+export function SettingsAccount() {
+  const { t } = useTranslation("settings");
+
+  const [isUnblocking, setIsUnblocking] = useState(false);
+
+  const { showSuccessToast } = useToast();
+
+  const { blockedUsers, fetchBlockedUsers } = useContext(settingsContext);
+
+  const { formatDate } = useDate();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    setValue,
+    handleSubmit,
+  } = useForm<FormValues>();
+
+  const { patchUser, userDetails } = useUserDetails();
+
+  const { unblockUser } = useUserDetails();
+
+  useEffect(() => {
+    if (userDetails?.profileVisibility) {
+      setValue("profileVisibility", userDetails.profileVisibility);
+    }
+  }, [userDetails, setValue]);
+
+  const visibilityOptions = [
+    { value: "PUBLIC", label: t("public") },
+    { value: "FRIENDS", label: t("friends_only") },
+    { value: "PRIVATE", label: t("private") },
+  ];
+
+  const onSubmit = async (values: FormValues) => {
+    await patchUser(values);
+    showSuccessToast(t("changes_saved"));
+  };
+
+  const handleUnblockClick = useCallback(
+    (id: string) => {
+      setIsUnblocking(true);
+
+      unblockUser(id)
+        .then(() => {
+          fetchBlockedUsers();
+          showSuccessToast(t("user_unblocked"));
+        })
+        .finally(() => {
+          setIsUnblocking(false);
+        });
+    },
+    [unblockUser, fetchBlockedUsers, t, showSuccessToast]
+  );
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="profileVisibility"
+        render={({ field }) => {
+          const handleChange = (
+            event: React.ChangeEvent<HTMLSelectElement>
+          ) => {
+            field.onChange(event);
+            handleSubmit(onSubmit)();
+          };
+
+          return (
+            <>
+              <SelectField
+                label={t("profile_visibility")}
+                value={field.value}
+                onChange={handleChange}
+                options={visibilityOptions.map((visiblity) => ({
+                  key: visiblity.value,
+                  value: visiblity.value,
+                  label: visiblity.label,
+                }))}
+                disabled={isSubmitting}
+              />
+
+              <small>{t("profile_visibility_description")}</small>
+            </>
+          );
+        }}
+      />
+
+      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
+        {t("manage_account")}
+      </h3>
+
+      {userDetails?.email ? (
+        <div>
+          <h4>{t("current_email")}</h4>
+          <p>{userDetails.email}</p>
+        </div>
+      ) : (
+        <p>{t("no_associated_email")}</p>
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "start",
+          alignItems: "center",
+          gap: `${SPACING_UNIT}px`,
+          marginTop: 8,
+        }}
+      >
+        <Button
+          theme="outline"
+          onClick={() => window.electron.openManageAccount("update-email")}
+        >
+          {t("update_email")}
+          <MailIcon />
+        </Button>
+
+        <Button
+          theme="outline"
+          onClick={() => window.electron.openManageAccount("update-password")}
+        >
+          {t("update_password")}
+          <KeyIcon />
+        </Button>
+      </div>
+
+      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
+        {t("subscription")}
+      </h3>
+      {userDetails?.subscription?.expiresAt ? (
+        <p>
+          {t("subscription_active_until", {
+            date: formatDate(userDetails?.subscription?.expiresAt),
+          })}
+        </p>
+      ) : (
+        <p>{t("subscription_not_active")}</p>
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "start",
+          alignItems: "center",
+          gap: `${SPACING_UNIT}px`,
+          marginTop: 8,
+        }}
+      >
+        <Button theme="outline" onClick={() => window.electron.openCheckout()}>
+          {t("manage_subscription")}
+          <CloudIcon />
+        </Button>
+      </div>
+
+      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
+        {t("blocked_users")}
+      </h3>
+
+      <ul className={styles.blockedUsersList}>
+        {blockedUsers.length > 0 ? (
+          blockedUsers.map((user) => {
+            return (
+              <li key={user.id} className={styles.blockedUser}>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: `${SPACING_UNIT}px`,
+                    alignItems: "center",
+                  }}
+                >
+                  <img
+                    src={user.profileImageUrl!}
+                    alt={user.displayName}
+                    className={styles.blockedUserAvatar}
+                  />
+                  <span>{user.displayName}</span>
+                </div>
+
+                <button
+                  type="button"
+                  className={styles.unblockButton}
+                  onClick={() => handleUnblockClick(user.id)}
+                  disabled={isUnblocking}
+                >
+                  <XCircleFillIcon />
+                </button>
+              </li>
+            );
+          })
+        ) : (
+          <small>{t("no_users_blocked")}</small>
+        )}
+      </ul>
+    </form>
+  );
+}

src/renderer/src/pages/settings/settings-privacy.tsx

@@ -1,139 +0,0 @@
-import { SelectField } from "@renderer/components";
-import { SPACING_UNIT } from "@renderer/theme.css";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-
-import * as styles from "./settings-privacy.css";
-import { useToast, useUserDetails } from "@renderer/hooks";
-import { useCallback, useContext, useEffect, useState } from "react";
-import { XCircleFillIcon } from "@primer/octicons-react";
-import { settingsContext } from "@renderer/context";
-
-interface FormValues {
-  profileVisibility: "PUBLIC" | "FRIENDS" | "PRIVATE";
-}
-
-export function SettingsPrivacy() {
-  const { t } = useTranslation("settings");
-
-  const [isUnblocking, setIsUnblocking] = useState(false);
-
-  const { showSuccessToast } = useToast();
-
-  const { blockedUsers, fetchBlockedUsers } = useContext(settingsContext);
-
-  const {
-    control,
-    formState: { isSubmitting },
-    setValue,
-    handleSubmit,
-  } = useForm<FormValues>();
-
-  const { patchUser, userDetails } = useUserDetails();
-
-  const { unblockUser } = useUserDetails();
-
-  useEffect(() => {
-    if (userDetails?.profileVisibility) {
-      setValue("profileVisibility", userDetails.profileVisibility);
-    }
-  }, [userDetails, setValue]);
-
-  const visibilityOptions = [
-    { value: "PUBLIC", label: t("public") },
-    { value: "FRIENDS", label: t("friends_only") },
-    { value: "PRIVATE", label: t("private") },
-  ];
-
-  const onSubmit = async (values: FormValues) => {
-    await patchUser(values);
-    showSuccessToast(t("changes_saved"));
-  };
-
-  const handleUnblockClick = useCallback(
-    (id: string) => {
-      setIsUnblocking(true);
-
-      unblockUser(id)
-        .then(() => {
-          fetchBlockedUsers();
-          showSuccessToast(t("user_unblocked"));
-        })
-        .finally(() => {
-          setIsUnblocking(false);
-        });
-    },
-    [unblockUser, fetchBlockedUsers, t, showSuccessToast]
-  );
-
-  return (
-    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        control={control}
-        name="profileVisibility"
-        render={({ field }) => {
-          const handleChange = (
-            event: React.ChangeEvent<HTMLSelectElement>
-          ) => {
-            field.onChange(event);
-            handleSubmit(onSubmit)();
-          };
-
-          return (
-            <>
-              <SelectField
-                label={t("profile_visibility")}
-                value={field.value}
-                onChange={handleChange}
-                options={visibilityOptions.map((visiblity) => ({
-                  key: visiblity.value,
-                  value: visiblity.value,
-                  label: visiblity.label,
-                }))}
-                disabled={isSubmitting}
-              />
-
-              <small>{t("profile_visibility_description")}</small>
-            </>
-          );
-        }}
-      />
-
-      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
-        {t("blocked_users")}
-      </h3>
-
-      <ul className={styles.blockedUsersList}>
-        {blockedUsers.map((user) => {
-          return (
-            <li key={user.id} className={styles.blockedUser}>
-              <div
-                style={{
-                  display: "flex",
-                  gap: `${SPACING_UNIT}px`,
-                  alignItems: "center",
-                }}
-              >
-                <img
-                  src={user.profileImageUrl!}
-                  alt={user.displayName}
-                  className={styles.blockedUserAvatar}
-                />
-                <span>{user.displayName}</span>
-              </div>
-
-              <button
-                type="button"
-                className={styles.unblockButton}
-                onClick={() => handleUnblockClick(user.id)}
-                disabled={isUnblocking}
-              >
-                <XCircleFillIcon />
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </form>
-  );
-}

src/renderer/src/pages/settings/settings.tsx

@@ -11,7 +11,7 @@ import {
   SettingsContextConsumer,
   SettingsContextProvider,
 } from "@renderer/context";
-import { SettingsPrivacy } from "./settings-privacy";
+import { SettingsAccount } from "./settings-account";
 import { useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 
@@ -28,7 +28,7 @@ export default function Settings() {
       "Real-Debrid",
     ];
 
-    if (userDetails) return [...categories, t("privacy")];
+    if (userDetails) return [...categories, t("account")];
     return categories;
   }, [userDetails, t]);
 
@@ -53,7 +53,7 @@ export default function Settings() {
               return <SettingsRealDebrid />;
             }
 
-            return <SettingsPrivacy />;
+            return <SettingsAccount />;
           };
 
           return (