kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-09-30 16:40:11 +02:00
Code

fix: Add meta tags to new pages

Browse Source
This commit is contained in:
Elias Schneider 2023-01-17 09:13:53 +01:00
parent 61c48d57b8
commit bb64f6c33f
No known key found for this signature in database
GPG Key ID: 07E623B294202B6C
6 changed files with 192 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

361
frontend/src/pages/account/index.tsx
View File

@ -18,6 +18,7 @@ import { Tb2Fa } from "react-icons/tb";
import * as yup from "yup"; import * as yup from "yup";
import showEnableTotpModal from "../../components/account/showEnableTotpModal"; import showEnableTotpModal from "../../components/account/showEnableTotpModal";
import ThemeSwitcher from "../../components/account/ThemeSwitcher"; import ThemeSwitcher from "../../components/account/ThemeSwitcher";
import Meta from "../../components/Meta";
import useUser from "../../hooks/user.hook"; import useUser from "../../hooks/user.hook";
import authService from "../../services/auth.service"; import authService from "../../services/auth.service";
import userService from "../../services/user.service"; import userService from "../../services/user.service";
@ -90,186 +91,192 @@ const Account = () => {
} }
return ( return (
<Container size="sm"> <>
<Title order={3} mb="xs"> <Meta title="My account" />
My account <Container size="sm">
</Title> <Title order={3} mb="xs">
<Paper withBorder p="xl"> My account
<Title order={5} mb="xs">
Account Info
</Title> </Title>
<form <Paper withBorder p="xl">
onSubmit={accountForm.onSubmit((values) => <Title order={5} mb="xs">
userService Account Info
.updateCurrentUser({ </Title>
username: values.username, <form
email: values.email, onSubmit={accountForm.onSubmit((values) =>
}) userService
.then(() => toast.success("User updated successfully")) .updateCurrentUser({
.catch(toast.axiosError) username: values.username,
)} email: values.email,
> })
<Stack> .then(() => toast.success("User updated successfully"))
<TextInput .catch(toast.axiosError)
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 <Stack>
</Button> <TextInput
</Stack> label="Username"
</Center> {...accountForm.getInputProps("username")}
</Container> />
<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>
</>
); );
}; };

2
frontend/src/pages/admin/config.tsx
View File

@ -1,9 +1,11 @@
import { Space, Title } from "@mantine/core"; import { Space, Title } from "@mantine/core";
import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable"; import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
import Meta from "../../components/Meta";
const AdminConfig = () => { const AdminConfig = () => {
return ( return (
<> <>
<Meta title="Configuration" />
<Title mb={30} order={3}> <Title mb={30} order={3}>
Configuration Configuration
</Title> </Title>

2
frontend/src/pages/admin/index.tsx
View File

@ -11,6 +11,7 @@ import {
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { TbRefresh, TbSettings, TbUsers } from "react-icons/tb"; import { TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
import Meta from "../../components/Meta";
import configService from "../../services/config.service"; import configService from "../../services/config.service";
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
@ -62,6 +63,7 @@ const Admin = () => {
return ( return (
<> <>
<Meta title="Administration" />
<Title mb={30} order={3}> <Title mb={30} order={3}>
Administration Administration
</Title> </Title>

2
frontend/src/pages/admin/setup.tsx
View File

@ -3,6 +3,7 @@ import { useRouter } from "next/router";
import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable"; import AdminConfigTable from "../../components/admin/configuration/AdminConfigTable";
import Logo from "../../components/Logo"; import Logo from "../../components/Logo";
import Meta from "../../components/Meta";
import useConfig from "../../hooks/config.hook"; import useConfig from "../../hooks/config.hook";
import useUser from "../../hooks/user.hook"; import useUser from "../../hooks/user.hook";
@ -21,6 +22,7 @@ const Setup = () => {
return ( return (
<> <>
<Meta title="Setup" />
<Stack align="center"> <Stack align="center">
<Logo height={80} width={80} /> <Logo height={80} width={80} />
<Title order={2}>Welcome to Pingvin Share</Title> <Title order={2}>Welcome to Pingvin Share</Title>

2
frontend/src/pages/admin/users.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { TbPlus } from "react-icons/tb"; import { TbPlus } from "react-icons/tb";
import ManageUserTable from "../../components/admin/ManageUserTable"; import ManageUserTable from "../../components/admin/ManageUserTable";
import showCreateUserModal from "../../components/admin/showCreateUserModal"; import showCreateUserModal from "../../components/admin/showCreateUserModal";
import Meta from "../../components/Meta";
import userService from "../../services/user.service"; import userService from "../../services/user.service";
import User from "../../types/user.type"; import User from "../../types/user.type";
import toast from "../../utils/toast.util"; import toast from "../../utils/toast.util";
@ -47,6 +48,7 @@ const Users = () => {
return ( return (
<> <>
<Meta title="User management" />
<Group position="apart" align="baseline" mb={20}> <Group position="apart" align="baseline" mb={20}>
<Title mb={30} order={3}> <Title mb={30} order={3}>
User management User management

6
frontend/src/pages/user/account.tsx
View File

@ -1,6 +0,0 @@
// TODO: Add user account
const Account = () => {
return <div></div>;
};
export default Account;