From bb64f6c33fc5c5e11f2c777785c96a74b57dfabc Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Tue, 17 Jan 2023 09:13:53 +0100
Subject: [PATCH] fix: Add meta tags to new pages

---
 frontend/src/pages/account/index.tsx | 361 ++++++++++++++-------------
 frontend/src/pages/admin/config.tsx  |   2 +
 frontend/src/pages/admin/index.tsx   |   2 +
 frontend/src/pages/admin/setup.tsx   |   2 +
 frontend/src/pages/admin/users.tsx   |   2 +
 frontend/src/pages/user/account.tsx  |   6 -
 6 files changed, 192 insertions(+), 183 deletions(-)
 delete mode 100644 frontend/src/pages/user/account.tsx

diff --git a/frontend/src/pages/account/index.tsx b/frontend/src/pages/account/index.tsx
index 1248c31..0180b23 100644
--- a/frontend/src/pages/account/index.tsx
+++ b/frontend/src/pages/account/index.tsx
@@ -18,6 +18,7 @@ import { Tb2Fa } from "react-icons/tb";
 import * as yup from "yup";
 import showEnableTotpModal from "../../components/account/showEnableTotpModal";
 import ThemeSwitcher from "../../components/account/ThemeSwitcher";
+import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
 import userService from "../../services/user.service";
@@ -90,186 +91,192 @@ const Account = () => {
   }
 
   return (
-    <Container size="sm">
-      <Title order={3} mb="xs">
-        My account
-      </Title>
-      <Paper withBorder p="xl">
-        <Title order={5} mb="xs">
-          Account Info
+    <>
+      <Meta title="My account" />
+      <Container size="sm">
+        <Title order={3} mb="xs">
+          My account
         </Title>
-        <form
-          onSubmit={accountForm.onSubmit((values) =>
-            userService
-              .updateCurrentUser({
-                username: values.username,
-                email: values.email,
-              })
-              .then(() => toast.success("User updated successfully"))
-              .catch(toast.axiosError)
-          )}
-        >
-          <Stack>
-            <TextInput
-              label="Username"
-              {...accountForm.getInputProps("username")}
-            />
-            <TextInput label="Email" {...accountForm.getInputProps("email")} />
-            <Group position="right">
-              <Button type="submit">Save</Button>
-            </Group>
-          </Stack>
-        </form>
-      </Paper>
-      <Paper withBorder p="xl" mt="lg">
-        <Title order={5} mb="xs">
-          Password
-        </Title>
-        <form
-          onSubmit={passwordForm.onSubmit((values) =>
-            authService
-              .updatePassword(values.oldPassword, values.password)
-              .then(() => {
-                toast.success("Password updated successfully");
-                passwordForm.reset();
-              })
-              .catch(toast.axiosError)
-          )}
-        >
-          <Stack>
-            <PasswordInput
-              label="Old password"
-              {...passwordForm.getInputProps("oldPassword")}
-            />
-            <PasswordInput
-              label="New password"
-              {...passwordForm.getInputProps("password")}
-            />
-            <Group position="right">
-              <Button type="submit">Save</Button>
-            </Group>
-          </Stack>
-        </form>
-      </Paper>
-
-      <Paper withBorder p="xl" mt="lg">
-        <Title order={5} mb="xs">
-          Security
-        </Title>
-
-        <Tabs defaultValue="totp">
-          <Tabs.List>
-            <Tabs.Tab value="totp" icon={<Tb2Fa size={14} />}>
-              TOTP
-            </Tabs.Tab>
-          </Tabs.List>
-
-          <Tabs.Panel value="totp" pt="xs">
-            {user.totpVerified ? (
-              <>
-                <form
-                  onSubmit={disableTotpForm.onSubmit((values) => {
-                    authService
-                      .disableTOTP(values.code, values.password)
-                      .then(() => {
-                        toast.success("Successfully disabled TOTP");
-                        values.password = "";
-                        values.code = "";
-                        refreshUser();
-                      })
-                      .catch(toast.axiosError);
-                  })}
-                >
-                  <Stack>
-                    <PasswordInput
-                      description="Enter your current password to disable TOTP"
-                      label="Password"
-                      {...disableTotpForm.getInputProps("password")}
-                    />
-
-                    <TextInput
-                      variant="filled"
-                      label="Code"
-                      placeholder="******"
-                      {...disableTotpForm.getInputProps("code")}
-                    />
-
-                    <Group position="right">
-                      <Button color="red" type="submit">
-                        Disable
-                      </Button>
-                    </Group>
-                  </Stack>
-                </form>
-              </>
-            ) : (
-              <>
-                <form
-                  onSubmit={enableTotpForm.onSubmit((values) => {
-                    authService
-                      .enableTOTP(values.password)
-                      .then((result) => {
-                        showEnableTotpModal(modals, refreshUser, {
-                          qrCode: result.qrCode,
-                          secret: result.totpSecret,
-                          password: values.password,
-                        });
-                        values.password = "";
-                      })
-                      .catch(toast.axiosError);
-                  })}
-                >
-                  <Stack>
-                    <PasswordInput
-                      label="Password"
-                      description="Enter your current password to start enabling TOTP"
-                      {...enableTotpForm.getInputProps("password")}
-                    />
-                    <Group position="right">
-                      <Button type="submit">Start</Button>
-                    </Group>
-                  </Stack>
-                </form>
-              </>
+        <Paper withBorder p="xl">
+          <Title order={5} mb="xs">
+            Account Info
+          </Title>
+          <form
+            onSubmit={accountForm.onSubmit((values) =>
+              userService
+                .updateCurrentUser({
+                  username: values.username,
+                  email: values.email,
+                })
+                .then(() => toast.success("User updated successfully"))
+                .catch(toast.axiosError)
             )}
-          </Tabs.Panel>
-        </Tabs>
-      </Paper>
-      <Paper withBorder p="xl" mt="lg">
-        <Title order={5} mb="xs">
-          Color scheme
-        </Title>
-        <ThemeSwitcher />
-      </Paper>
-      <Center mt={80} mb="lg">
-        <Stack>
-          <Button
-            variant="light"
-            color="red"
-            onClick={() =>
-              modals.openConfirmModal({
-                title: "Account deletion",
-                children: (
-                  <Text size="sm">
-                    Do you really want to delete your account including all your
-                    active shares?
-                  </Text>
-                ),
-
-                labels: { confirm: "Delete", cancel: "Cancel" },
-                confirmProps: { color: "red" },
-                onConfirm: async () => {
-                  await userService.removeCurrentUser();
-                  window.location.reload();
-                },
-              })
-            }
           >
-            Delete Account
-          </Button>
-        </Stack>
-      </Center>
-    </Container>
+            <Stack>
+              <TextInput
+                label="Username"
+                {...accountForm.getInputProps("username")}
+              />
+              <TextInput
+                label="Email"
+                {...accountForm.getInputProps("email")}
+              />
+              <Group position="right">
+                <Button type="submit">Save</Button>
+              </Group>
+            </Stack>
+          </form>
+        </Paper>
+        <Paper withBorder p="xl" mt="lg">
+          <Title order={5} mb="xs">
+            Password
+          </Title>
+          <form
+            onSubmit={passwordForm.onSubmit((values) =>
+              authService
+                .updatePassword(values.oldPassword, values.password)
+                .then(() => {
+                  toast.success("Password updated successfully");
+                  passwordForm.reset();
+                })
+                .catch(toast.axiosError)
+            )}
+          >
+            <Stack>
+              <PasswordInput
+                label="Old password"
+                {...passwordForm.getInputProps("oldPassword")}
+              />
+              <PasswordInput
+                label="New password"
+                {...passwordForm.getInputProps("password")}
+              />
+              <Group position="right">
+                <Button type="submit">Save</Button>
+              </Group>
+            </Stack>
+          </form>
+        </Paper>
+
+        <Paper withBorder p="xl" mt="lg">
+          <Title order={5} mb="xs">
+            Security
+          </Title>
+
+          <Tabs defaultValue="totp">
+            <Tabs.List>
+              <Tabs.Tab value="totp" icon={<Tb2Fa size={14} />}>
+                TOTP
+              </Tabs.Tab>
+            </Tabs.List>
+
+            <Tabs.Panel value="totp" pt="xs">
+              {user.totpVerified ? (
+                <>
+                  <form
+                    onSubmit={disableTotpForm.onSubmit((values) => {
+                      authService
+                        .disableTOTP(values.code, values.password)
+                        .then(() => {
+                          toast.success("Successfully disabled TOTP");
+                          values.password = "";
+                          values.code = "";
+                          refreshUser();
+                        })
+                        .catch(toast.axiosError);
+                    })}
+                  >
+                    <Stack>
+                      <PasswordInput
+                        description="Enter your current password to disable TOTP"
+                        label="Password"
+                        {...disableTotpForm.getInputProps("password")}
+                      />
+
+                      <TextInput
+                        variant="filled"
+                        label="Code"
+                        placeholder="******"
+                        {...disableTotpForm.getInputProps("code")}
+                      />
+
+                      <Group position="right">
+                        <Button color="red" type="submit">
+                          Disable
+                        </Button>
+                      </Group>
+                    </Stack>
+                  </form>
+                </>
+              ) : (
+                <>
+                  <form
+                    onSubmit={enableTotpForm.onSubmit((values) => {
+                      authService
+                        .enableTOTP(values.password)
+                        .then((result) => {
+                          showEnableTotpModal(modals, refreshUser, {
+                            qrCode: result.qrCode,
+                            secret: result.totpSecret,
+                            password: values.password,
+                          });
+                          values.password = "";
+                        })
+                        .catch(toast.axiosError);
+                    })}
+                  >
+                    <Stack>
+                      <PasswordInput
+                        label="Password"
+                        description="Enter your current password to start enabling TOTP"
+                        {...enableTotpForm.getInputProps("password")}
+                      />
+                      <Group position="right">
+                        <Button type="submit">Start</Button>
+                      </Group>
+                    </Stack>
+                  </form>
+                </>
+              )}
+            </Tabs.Panel>
+          </Tabs>
+        </Paper>
+        <Paper withBorder p="xl" mt="lg">
+          <Title order={5} mb="xs">
+            Color scheme
+          </Title>
+          <ThemeSwitcher />
+        </Paper>
+        <Center mt={80} mb="lg">
+          <Stack>
+            <Button
+              variant="light"
+              color="red"
+              onClick={() =>
+                modals.openConfirmModal({
+                  title: "Account deletion",
+                  children: (
+                    <Text size="sm">
+                      Do you really want to delete your account including all
+                      your active shares?
+                    </Text>
+                  ),
+
+                  labels: { confirm: "Delete", cancel: "Cancel" },
+                  confirmProps: { color: "red" },
+                  onConfirm: async () => {
+                    await userService.removeCurrentUser();
+                    window.location.reload();
+                  },
+                })
+              }
+            >
+              Delete Account
+            </Button>
+          </Stack>
+        </Center>
+      </Container>
+    </>
   );
 };
 
diff --git a/frontend/src/pages/admin/config.tsx b/frontend/src/pages/admin/config.tsx
index 4d79450..e92613b 100644
--- a/frontend/src/pages/admin/config.tsx
+++ b/frontend/src/pages/admin/config.tsx
@@ -1,9 +1,11 @@
 import { Space, Title } from "@mantine/core";
 import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
+import Meta from "../../components/Meta";
 
 const AdminConfig = () => {
   return (
     <>
+      <Meta title="Configuration" />
       <Title mb={30} order={3}>
         Configuration
       </Title>
diff --git a/frontend/src/pages/admin/index.tsx b/frontend/src/pages/admin/index.tsx
index 70b0d0b..ce828ed 100644
--- a/frontend/src/pages/admin/index.tsx
+++ b/frontend/src/pages/admin/index.tsx
@@ -11,6 +11,7 @@ import {
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
+import Meta from "../../components/Meta";
 import configService from "../../services/config.service";
 
 const useStyles = createStyles((theme) => ({
@@ -62,6 +63,7 @@ const Admin = () => {
 
   return (
     <>
+      <Meta title="Administration" />
       <Title mb={30} order={3}>
         Administration
       </Title>
diff --git a/frontend/src/pages/admin/setup.tsx b/frontend/src/pages/admin/setup.tsx
index ae7dbe0..ee6c22a 100644
--- a/frontend/src/pages/admin/setup.tsx
+++ b/frontend/src/pages/admin/setup.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
 
 import Logo from "../../components/Logo";
+import Meta from "../../components/Meta";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
 
@@ -21,6 +22,7 @@ const Setup = () => {
 
   return (
     <>
+      <Meta title="Setup" />
       <Stack align="center">
         <Logo height={80} width={80} />
         <Title order={2}>Welcome to Pingvin Share</Title>
diff --git a/frontend/src/pages/admin/users.tsx b/frontend/src/pages/admin/users.tsx
index 2ab3a9a..eb307be 100644
--- a/frontend/src/pages/admin/users.tsx
+++ b/frontend/src/pages/admin/users.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { TbPlus } from "react-icons/tb";
 import ManageUserTable from "../../components/admin/ManageUserTable";
 import showCreateUserModal from "../../components/admin/showCreateUserModal";
+import Meta from "../../components/Meta";
 import userService from "../../services/user.service";
 import User from "../../types/user.type";
 import toast from "../../utils/toast.util";
@@ -47,6 +48,7 @@ const Users = () => {
 
   return (
     <>
+      <Meta title="User management" />
       <Group position="apart" align="baseline" mb={20}>
         <Title mb={30} order={3}>
           User management
diff --git a/frontend/src/pages/user/account.tsx b/frontend/src/pages/user/account.tsx
deleted file mode 100644
index db2ea5b..0000000
--- a/frontend/src/pages/user/account.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// TODO: Add user account
-const Account = () => {
-  return <div></div>;
-};
-
-export default Account;