From a2c114d93f1dc44215b9fb3de3d0768129dede7f Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 29 Nov 2023 18:49:04 +0100
Subject: [PATCH] add page titles

---
 src/assets/locales/en.json         | 10 +++++++++-
 src/pages/About.tsx                |  2 ++
 src/pages/Dmca.tsx                 |  3 ++-
 src/pages/Login.tsx                |  2 ++
 src/pages/Register.tsx             |  2 ++
 src/pages/Settings.tsx             |  2 ++
 src/pages/parts/util/PageTitle.tsx | 20 ++++++++++++++++++++
 7 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/parts/util/PageTitle.tsx

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index ddb56bbb..6ffd4ac5 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -56,7 +56,15 @@
     "goHome": "Back to home"
   },
   "global": {
-    "name": "movie-web"
+    "name": "movie-web",
+    "pages": {
+      "pagetitle": "{{title}} - movie-web",
+      "dmca": "DMCA",
+      "settings": "Settings",
+      "about": "About",
+      "login": "Login",
+      "register": "Register"
+    }
   },
   "media": {
     "types": {
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index c57ed706..fc916c4c 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Ol } from "@/components/utils/Ol";
 import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 
@@ -19,6 +20,7 @@ export function AboutPage() {
   const { t } = useTranslation();
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.about" />
       <ThinContainer>
         <Heading1>{t("faq.title")}</Heading1>
         <Ol
diff --git a/src/pages/Dmca.tsx b/src/pages/Dmca.tsx
index 883af44f..4aff3985 100644
--- a/src/pages/Dmca.tsx
+++ b/src/pages/Dmca.tsx
@@ -1,9 +1,9 @@
-/* eslint-disable react/no-unescaped-entities */
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Heading1, Paragraph } from "@/components/utils/Text";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 
@@ -13,6 +13,7 @@ export function DmcaPage() {
 
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.dmca" />
       <ThinContainer>
         <Heading1>{t("screens.dmca.title")}</Heading1>
         <Paragraph>{t("screens.dmca.text")}</Paragraph>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index fbf23c50..4c60a669 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -2,12 +2,14 @@ import { useHistory } from "react-router-dom";
 
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
 import { LoginFormPart } from "@/pages/parts/auth/LoginFormPart";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 export function LoginPage() {
   const history = useHistory();
 
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.login" />
       <LoginFormPart
         onLogin={() => {
           history.push("/");
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index ce528fb5..ca85a2bf 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -11,6 +11,7 @@ import {
 import { PassphraseGeneratePart } from "@/pages/parts/auth/PassphraseGeneratePart";
 import { TrustBackendPart } from "@/pages/parts/auth/TrustBackendPart";
 import { VerifyPassphrase } from "@/pages/parts/auth/VerifyPassphrasePart";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 function CaptchaProvider(props: {
   siteKey: string | null;
@@ -34,6 +35,7 @@ export function RegisterPage() {
   return (
     <CaptchaProvider siteKey={siteKey}>
       <SubPageLayout>
+        <PageTitle subpage k="global.pages.register" />
         {step === 0 ? (
           <TrustBackendPart
             onNext={(meta: MetaResponse) => {
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 20dae0d3..baea3c96 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -28,6 +28,7 @@ import { DeviceListPart } from "@/pages/parts/settings/DeviceListPart";
 import { RegisterCalloutPart } from "@/pages/parts/settings/RegisterCalloutPart";
 import { SidebarPart } from "@/pages/parts/settings/SidebarPart";
 import { ThemePart } from "@/pages/parts/settings/ThemePart";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { AccountWithToken, useAuthStore } from "@/stores/auth";
 import { useLanguageStore } from "@/stores/language";
 import { useSubtitleStore } from "@/stores/subtitles";
@@ -191,6 +192,7 @@ export function SettingsPage() {
   ]);
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.settings" />
       <SettingsLayout>
         <div id="settings-account">
           <Heading1 border className="!mb-0">
diff --git a/src/pages/parts/util/PageTitle.tsx b/src/pages/parts/util/PageTitle.tsx
new file mode 100644
index 00000000..c8225b45
--- /dev/null
+++ b/src/pages/parts/util/PageTitle.tsx
@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+
+export interface PageTitleProps {
+  k: string;
+  subpage?: boolean;
+}
+
+export function PageTitle(props: PageTitleProps) {
+  const { t } = useTranslation();
+
+  const title = t(props.k);
+  const subPageTitle = t("global.pages.pagetitle", { title });
+
+  return (
+    <Helmet>
+      <title>{props.subpage ? subPageTitle : title}</title>
+    </Helmet>
+  );
+}