iio/pingvin-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: custom branding (#112)

Browse Source 
* add first concept

* remove setup status

* split config page in multiple components

* add custom branding docs

* add test email button

* fix invalid email from header

* add migration

* mount images to host

* update docs

* remove unused endpoint

* run formatter
This commit is contained in:
Elias Schneider
2023-03-04 23:29:00 +01:00
committed by GitHub
parent f9840505b8
commit fddad3ef70
66 changed files with 908 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/Logo.tsx
View File

@@ -1,34 +1,6 @@
import Image from "next/image";
const Logo = ({ height, width }: { height: number; width: number }) => {
return (
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 943.11 911.62"
height={height}
width={width}
>
<ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e" />
<ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f" />
<path
d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z"
fill="#37474f"
/>
<path
d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z"
fill="#fff"
/>
<polygon
points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68"
fill="#46509e"
/>
<ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
<ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
<path
d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z"
fill="#37474f"
/>
</svg>
);
return <Image src="/img/logo.png" alt="logo" height={height} width={width} />;
};
export default Logo;

6
frontend/src/components/Meta.tsx
View File

@@ -1,4 +1,5 @@
import Head from "next/head";
import useConfig from "../hooks/config.hook";
const Meta = ({
title,
@@ -7,7 +8,9 @@ const Meta = ({
title: string;
description?: string;
}) => {
const metaTitle = `${title} - Pingvin Share`;
const config = useConfig();
const metaTitle = `${title} - ${config.get("general.appName")}`;
return (
<Head>
@@ -19,7 +22,6 @@ const Meta = ({
description ?? "An open-source and self-hosted sharing platform."
}
/>
<meta property="og:image" content="/img/opengraph-default.png" />
<meta name="twitter:title" content={metaTitle} />
<meta name="twitter:description" content={description} />
</Head>

153
frontend/src/components/admin/configuration/AdminConfigTable.tsx
View File

@@ -1,153 +0,0 @@
import {
Box,
Button,
Group,
Paper,
Space,
Stack,
Text,
Title,
} from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import useConfig from "../../../hooks/config.hook";
import configService from "../../../services/config.service";
import {
AdminConfigGroupedByCategory,
UpdateConfig,
} from "../../../types/config.type";
import {
capitalizeFirstLetter,
configVariableToFriendlyName,
} from "../../../utils/string.util";
import toast from "../../../utils/toast.util";
import AdminConfigInput from "./AdminConfigInput";
import TestEmailButton from "./TestEmailButton";
const AdminConfigTable = () => {
const config = useConfig();
const router = useRouter();
const isMobile = useMediaQuery("(max-width: 560px)");
const [updatedConfigVariables, setUpdatedConfigVariables] = useState<
UpdateConfig[]
>([]);
useEffect(() => {
if (config.get("SETUP_STATUS") != "FINISHED") {
config.refresh();
}
}, []);
const updateConfigVariable = (configVariable: UpdateConfig) => {
const index = updatedConfigVariables.findIndex(
(item) => item.key === configVariable.key
);
if (index > -1) {
updatedConfigVariables[index] = configVariable;
} else {
setUpdatedConfigVariables([...updatedConfigVariables, configVariable]);
}
};
const [configVariablesByCategory, setCofigVariablesByCategory] =
useState<AdminConfigGroupedByCategory>({});
const getConfigVariables = async () => {
await configService.listForAdmin().then((configVariables) => {
const configVariablesByCategory = configVariables.reduce(
(categories: any, item) => {
const category = categories[item.category] || [];
category.push(item);
categories[item.category] = category;
return categories;
},
{}
);
setCofigVariablesByCategory(configVariablesByCategory);
});
};
const saveConfigVariables = async () => {
if (config.get("SETUP_STATUS") == "REGISTERED") {
await configService
.updateMany(updatedConfigVariables)
.then(async () => {
await configService.finishSetup();
router.reload();
})
.catch(toast.axiosError);
} else {
await configService
.updateMany(updatedConfigVariables)
.then(() => {
setUpdatedConfigVariables([]);
toast.success("Configurations updated successfully");
})
.catch(toast.axiosError);
}
config.refresh();
};
useEffect(() => {
getConfigVariables();
}, []);
return (
<Box mb="lg">
{Object.entries(configVariablesByCategory).map(
([category, configVariables]) => {
return (
<Paper key={category} withBorder p="lg" mb="xl">
<Title mb="xs" order={3}>
{capitalizeFirstLetter(category)}
</Title>
{configVariables.map((configVariable) => (
<>
<Group position="apart">
<Stack
style={{ maxWidth: isMobile ? "100%" : "40%" }}
spacing={0}
>
<Title order={6}>
{configVariableToFriendlyName(configVariable.key)}
</Title>
<Text color="dimmed" size="sm" mb="xs">
{configVariable.description}
</Text>
</Stack>
<Stack></Stack>
<Box style={{ width: isMobile ? "100%" : "50%" }}>
<AdminConfigInput
key={configVariable.key}
updateConfigVariable={updateConfigVariable}
configVariable={configVariable}
/>
</Box>
</Group>
<Space h="lg" />
</>
))}
{category == "smtp" && (
<Group position="right">
<TestEmailButton
configVariablesChanged={updatedConfigVariables.length != 0}
saveConfigVariables={saveConfigVariables}
/>
</Group>
)}
</Paper>
);
}
)}
<Group position="right">
<Button onClick={saveConfigVariables}>Save</Button>
</Group>
</Box>
);
};
export default AdminConfigTable;

54
frontend/src/components/admin/configuration/ConfigurationHeader.tsx Normal file
View File

@@ -0,0 +1,54 @@
import {
Burger,
Button,
Group,
Header,
MediaQuery,
Text,
useMantineTheme,
} from "@mantine/core";
import Link from "next/link";
import { Dispatch, SetStateAction } from "react";
import useConfig from "../../../hooks/config.hook";
import Logo from "../../Logo";
const ConfigurationHeader = ({
isMobileNavBarOpened,
setIsMobileNavBarOpened,
}: {
isMobileNavBarOpened: boolean;
setIsMobileNavBarOpened: Dispatch<SetStateAction<boolean>>;
}) => {
const config = useConfig();
const theme = useMantineTheme();
return (
<Header height={60} p="md">
<div style={{ display: "flex", alignItems: "center", height: "100%" }}>
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
<Burger
opened={isMobileNavBarOpened}
onClick={() => setIsMobileNavBarOpened((o) => !o)}
size="sm"
color={theme.colors.gray[6]}
mr="xl"
/>
</MediaQuery>
<Group position="apart" w="100%">
<Link href="/" passHref>
<Group>
<Logo height={35} width={35} />
<Text weight={600}>{config.get("general.appName")}</Text>
</Group>
</Link>
<MediaQuery smallerThan="sm" styles={{ display: "none" }}>
<Button variant="light" component={Link} href="/admin">
Go back
</Button>
</MediaQuery>
</Group>
</div>
</Header>
);
};
export default ConfigurationHeader;

97
frontend/src/components/admin/configuration/ConfigurationNavBar.tsx Normal file
View File

@@ -0,0 +1,97 @@
import {
Box,
Button,
createStyles,
Group,
MediaQuery,
Navbar,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import Link from "next/link";
import { Dispatch, SetStateAction } from "react";
import { TbAt, TbMail, TbShare, TbSquare } from "react-icons/tb";
const categories = [
{ name: "General", icon: <TbSquare /> },
{ name: "Email", icon: <TbMail /> },
{ name: "Share", icon: <TbShare /> },
{ name: "SMTP", icon: <TbAt /> },
];
const useStyles = createStyles((theme) => ({
activeLink: {
backgroundColor: theme.fn.variant({
variant: "light",
color: theme.primaryColor,
}).background,
color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
.color,
borderRadius: theme.radius.sm,
fontWeight: 600,
},
}));
const ConfigurationNavBar = ({
categoryId,
isMobileNavBarOpened,
setIsMobileNavBarOpened,
}: {
categoryId: string;
isMobileNavBarOpened: boolean;
setIsMobileNavBarOpened: Dispatch<SetStateAction<boolean>>;
}) => {
const { classes } = useStyles();
return (
<Navbar
p="md"
hiddenBreakpoint="sm"
hidden={!isMobileNavBarOpened}
width={{ sm: 200, lg: 300 }}
>
<Navbar.Section>
<Text size="xs" color="dimmed" mb="sm">
Configuration
</Text>
<Stack spacing="xs">
{categories.map((category) => (
<Box
p="xs"
component={Link}
onClick={() => setIsMobileNavBarOpened(false)}
className={
categoryId == category.name.toLowerCase()
? classes.activeLink
: undefined
}
key={category.name}
href={`/admin/config/${category.name.toLowerCase()}`}
>
<Group>
<ThemeIcon
variant={
categoryId == category.name.toLowerCase()
? "filled"
: "light"
}
>
{category.icon}
</ThemeIcon>
<Text size="sm">{category.name}</Text>
</Group>
</Box>
))}
</Stack>
</Navbar.Section>
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
<Button mt="xl" variant="light" component={Link} href="/admin">
Go back
</Button>
</MediaQuery>
</Navbar>
);
};
export default ConfigurationNavBar;

13
frontend/src/components/admin/users/showCreateUserModal.tsx
View File

@@ -79,12 +79,13 @@ const Body = ({
})}
/>
)}
{form.values.setPasswordManually || !smtpEnabled && (
<PasswordInput
label="Password"
{...form.getInputProps("password")}
/>
)}
{form.values.setPasswordManually ||
(!smtpEnabled && (
<PasswordInput
label="Password"
{...form.getInputProps("password")}
/>
))}
<Switch
styles={{
body: {

4
frontend/src/components/auth/SignInForm.tsx
View File

@@ -95,7 +95,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
<Title order={2} align="center" weight={900}>
Welcome back
</Title>
{config.get("ALLOW_REGISTRATION") && (
{config.get("share.allowRegistration") && (
<Text color="dimmed" size="sm" align="center" mt={5}>
You don't have an account yet?{" "}
<Anchor component={Link} href={"signUp"} size="sm">
@@ -131,7 +131,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
{...form.getInputProps("totp")}
/>
)}
{config.get("SMTP_ENABLED") && (
{config.get("smtp.enabled") && (
<Group position="right" mt="xs">
<Anchor component={Link} href="/auth/resetPassword" size="xs">
Forgot password?

10
frontend/src/components/auth/SignUpForm.tsx
View File

@@ -41,8 +41,12 @@ const SignUpForm = () => {
await authService
.signUp(email, username, password)
.then(async () => {
await refreshUser();
router.replace("/upload");
const user = await refreshUser();
if (user?.isAdmin) {
router.replace("/admin/intro");
} else {
router.replace("/upload");
}
})
.catch(toast.axiosError);
};
@@ -52,7 +56,7 @@ const SignUpForm = () => {
<Title order={2} align="center" weight={900}>
Sign up
</Title>
{config.get("ALLOW_REGISTRATION") && (
{config.get("share.allowRegistration") && (
<Text color="dimmed" size="sm" align="center" mt={5}>
You have an account already?{" "}
<Anchor component={Link} href={"signIn"} size="sm">

0
frontend/src/components/navBar/ActionAvatar.tsx → frontend/src/components/header/ActionAvatar.tsx
View File

18
frontend/src/components/navBar/NavBar.tsx → frontend/src/components/header/Header.tsx
View File

@@ -4,7 +4,7 @@ import {
Container,
createStyles,
Group,
Header,
Header as MantineHeader,
Paper,
Stack,
Text,
@@ -108,7 +108,7 @@ const useStyles = createStyles((theme) => ({
},
}));
const NavBar = () => {
const Header = () => {
const { user } = useUser();
const router = useRouter();
const config = useConfig();
@@ -141,20 +141,20 @@ const NavBar = () => {
},
];
if (config.get("ALLOW_UNAUTHENTICATED_SHARES")) {
if (config.get("share.allowUnauthenticatedShares")) {
unauthenticatedLinks.unshift({
link: "/upload",
label: "Upload",
});
}
if (config.get("SHOW_HOME_PAGE"))
if (config.get("general.showHomePage"))
unauthenticatedLinks.unshift({
link: "/",
label: "Home",
});
if (config.get("ALLOW_REGISTRATION"))
if (config.get("share.allowRegistration"))
unauthenticatedLinks.push({
link: "/auth/signUp",
label: "Sign up",
@@ -187,12 +187,12 @@ const NavBar = () => {
</>
);
return (
<Header height={HEADER_HEIGHT} mb={40} className={classes.root}>
<MantineHeader height={HEADER_HEIGHT} mb={40} className={classes.root}>
<Container className={classes.header}>
<Link href="/" passHref>
<Group>
<Logo height={35} width={35} />
<Text weight={600}>Pingvin Share</Text>
<Text weight={600}>{config.get("general.appName")}</Text>
</Group>
</Link>
<Group spacing={5} className={classes.links}>
@@ -212,8 +212,8 @@ const NavBar = () => {
)}
</Transition>
</Container>
</Header>
</MantineHeader>
);
};
export default NavBar;
export default Header;

0
frontend/src/components/navBar/NavbarShareMenu.tsx → frontend/src/components/header/NavbarShareMenu.tsx
View File

6
frontend/src/components/share/FileList.tsx
View File

@@ -33,9 +33,9 @@ const FileList = ({
const modals = useModals();
const copyFileLink = (file: FileMetaData) => {
const link = `${config.get("APP_URL")}/api/shares/${share.id}/files/${
file.id
}`;
const link = `${config.get("general.appUrl")}/api/shares/${
share.id
}/files/${file.id}`;
if (window.isSecureContext) {
clipboard.copy(link);