Merge 91987eb813 into e71f6cd159

frontend/next.config.js

@@ -12,6 +12,7 @@ const withPWA = require("next-pwa")({
     },
   ],
   reloadOnOnline: false,
+  pathPrefix: '/pengvin-share',
 });
 
 module.exports = withPWA({

frontend/src/components/Logo.tsx

@@ -1,4 +1,5 @@
 const Logo = ({ height, width }: { height: number; width: number }) => {
-  return <img src="/img/logo.png" alt="logo" height={height} width={width} />;
+  const webroot = process.env.WEBROOT || "";
+  return <img src={webroot + "/img/logo.png"} alt="logo" height={height} width={width} />;
 };
 export default Logo;

frontend/src/components/admin/configuration/ConfigurationHeader.tsx

@@ -13,6 +13,8 @@ import { FormattedMessage } from "react-intl";
 import useConfig from "../../../hooks/config.hook";
 import Logo from "../../Logo";
 
+const webroot = process.env.WEBROOT || "";
+
 const ConfigurationHeader = ({
   isMobileNavBarOpened,
   setIsMobileNavBarOpened,
@@ -42,7 +44,7 @@ const ConfigurationHeader = ({
             </Group>
           </Link>
           <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
-            <Button variant="light" component={Link} href="/admin">
+            <Button variant="light" component={Link} href={webroot + "/admin"}>
               <FormattedMessage id="common.button.go-back" />
             </Button>
           </MediaQuery>

frontend/src/components/admin/configuration/ConfigurationNavBar.tsx

@@ -14,6 +14,8 @@ import { Dispatch, SetStateAction } from "react";
 import { TbAt, TbMail, TbShare, TbSocial, TbSquare } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 
+const webroot = process.env.WEBROOT || "";
+
 const categories = [
   { name: "General", icon: <TbSquare /> },
   { name: "Email", icon: <TbMail /> },
@@ -69,7 +71,7 @@ const ConfigurationNavBar = ({
                   : undefined
               }
               key={category.name}
-              href={`/admin/config/${category.name.toLowerCase()}`}
+              href={`${webroot}/admin/config/${category.name.toLowerCase()}`}
             >
               <Group>
                 <ThemeIcon
@@ -92,7 +94,7 @@ const ConfigurationNavBar = ({
         </Stack>
       </Navbar.Section>
       <MediaQuery largerThan="sm" styles={{ display: "none" }}>
-        <Button mt="xl" variant="light" component={Link} href="/admin">
+        <Button mt="xl" variant="light" component={Link} href={webroot + "/admin"}>
           <FormattedMessage id="common.button.go-back" />
         </Button>
       </MediaQuery>

frontend/src/components/auth/SignInForm.tsx

@@ -26,6 +26,8 @@ import authService from "../../services/auth.service";
 import { getOAuthIcon, getOAuthUrl } from "../../utils/oauth.util";
 import toast from "../../utils/toast.util";
 
+const webroot = process.env.WEBROOT || "";
+
 const useStyles = createStyles((theme) => ({
   or: {
     "&:before": {
@@ -145,7 +147,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
           />
           {config.get("smtp.enabled") && (
             <Group position="right" mt="xs">
-              <Anchor component={Link} href="/auth/resetPassword" size="xs">
+              <Anchor component={Link} href={webroot + "/auth/resetPassword"} size="xs">
                 <FormattedMessage id="resetPassword.title" />
               </Anchor>
             </Group>

frontend/src/components/auth/SignUpForm.tsx

@@ -19,6 +19,8 @@ import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
 import toast from "../../utils/toast.util";
 
+const webroot = process.env.WEBROOT || "";
+
 const SignUpForm = () => {
   const config = useConfig();
   const router = useRouter();
@@ -52,9 +54,9 @@ const SignUpForm = () => {
       .then(async () => {
         const user = await refreshUser();
         if (user?.isAdmin) {
-          router.replace("/admin/intro");
+          router.replace(webroot + "/admin/intro");
         } else {
-          router.replace("/upload");
+          router.replace(webroot + "/upload");
         }
       })
       .catch(toast.axiosError);

frontend/src/components/header/ActionAvatar.tsx

@@ -5,6 +5,8 @@ import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
 import { FormattedMessage, useIntl } from "react-intl";
 
+const webroot = process.env.WEBROOT || "";
+
 const ActionAvatar = () => {
   const { user } = useUser();
 
@@ -16,13 +18,13 @@ const ActionAvatar = () => {
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Item component={Link} href="/account" icon={<TbUser size={14} />}>
+        <Menu.Item component={Link} href={webroot + "/account"} icon={<TbUser size={14} />}>
           <FormattedMessage id="navbar.avatar.account" />
         </Menu.Item>
         {user!.isAdmin && (
           <Menu.Item
             component={Link}
-            href="/admin"
+            href={webroot + "/admin"}
             icon={<TbSettings size={14} />}
           >
             <FormattedMessage id="navbar.avatar.admin" />

frontend/src/components/header/Header.tsx

@@ -22,6 +22,7 @@ import ActionAvatar from "./ActionAvatar";
 import NavbarShareMenu from "./NavbarShareMenu";
 
 const HEADER_HEIGHT = 60;
+const webroot = process.env.WEBROOT || "";
 
 type NavLink = {
   link?: string;
@@ -125,7 +126,7 @@ const Header = () => {
 
   const authenticatedLinks: NavLink[] = [
     {
-      link: "/upload",
+      link: webroot + "/upload",
       label: t("navbar.upload"),
     },
     {
@@ -138,27 +139,27 @@ const Header = () => {
 
   let unauthenticatedLinks: NavLink[] = [
     {
-      link: "/auth/signIn",
+      link: webroot + "/auth/signIn",
       label: t("navbar.signin"),
     },
   ];
 
   if (config.get("share.allowUnauthenticatedShares")) {
     unauthenticatedLinks.unshift({
-      link: "/upload",
+      link: webroot + "/upload",
       label: t("navbar.upload"),
     });
   }
 
   if (config.get("general.showHomePage"))
     unauthenticatedLinks.unshift({
-      link: "/",
+      link: webroot + "/",
       label: t("navbar.home"),
     });
 
   if (config.get("share.allowRegistration"))
     unauthenticatedLinks.push({
-      link: "/auth/signUp",
+      link: webroot + "/auth/signUp",
       label: t("navbar.signup"),
     });
 
@@ -191,7 +192,7 @@ const Header = () => {
   return (
     <MantineHeader height={HEADER_HEIGHT} mb={40} className={classes.root}>
       <Container className={classes.header}>
-        <Link href="/" passHref>
+        <Link href={webroot + "/"} passHref>
           <Group>
             <Logo height={35} width={35} />
             <Text weight={600}>{config.get("general.appName")}</Text>

frontend/src/components/header/NavbarShareMenu.tsx

@@ -3,6 +3,8 @@ import Link from "next/link";
 import { TbArrowLoopLeft, TbLink } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 
+const webroot = process.env.WEBROOT || "";
+
 const NavbarShareMneu = () => {
   return (
     <Menu position="bottom-start" withinPortal>
@@ -12,12 +14,12 @@ const NavbarShareMneu = () => {
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Item component={Link} href="/account/shares" icon={<TbLink />}>
+        <Menu.Item component={Link} href={webroot + "/account/shares"} icon={<TbLink />}>
           <FormattedMessage id="navbar.links.shares" />
         </Menu.Item>
         <Menu.Item
           component={Link}
-          href="/account/reverseShares"
+          href={webroot + "/account/reverseShares"}
           icon={<TbArrowLoopLeft />}
         >
           <FormattedMessage id="navbar.links.reverse" />

frontend/src/components/share/FilePreview.tsx

@@ -13,6 +13,8 @@ import { FormattedMessage } from "react-intl";
 import api from "../../services/api.service";
 import Markdown from "markdown-to-jsx";
 
+const webroot = process.env.WEBROOT || "";
+
 const FilePreviewContext = React.createContext<{
   shareId: string;
   fileId: string;
@@ -49,7 +51,7 @@ const FilePreview = ({
         component={Link}
         onClick={() => modals.closeAll()}
         target="_blank"
-        href={`/api/shares/${shareId}/files/${fileId}?download=false`}
+        href={`${webroot}/api/shares/${shareId}/files/${fileId}?download=false`}
       >
         View original file
         {/* Add translation? */}

frontend/src/pages/404.tsx

@@ -10,6 +10,8 @@ import Link from "next/link";
 import Meta from "../components/Meta";
 import { FormattedMessage } from "react-intl";
 
+const webroot = process.env.WEBROOT || "";
+
 const useStyles = createStyles((theme) => ({
   root: {
     paddingTop: 80,
@@ -53,7 +55,7 @@ const ErrorNotFound = () => {
           className={classes.description}
         ></Text>
         <Group position="center">
-          <Button component={Link} href="/" variant="light">
+          <Button component={Link} href={webroot + "/"} variant="light">
             <FormattedMessage id="404.button.home" />
           </Button>
         </Group>

frontend/src/pages/account/shares.tsx

@@ -28,6 +28,8 @@ import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
 
+const webroot = process.env.WEBROOT || "";
+
 const MyShares = () => {
   const modals = useModals();
   const clipboard = useClipboard();
@@ -58,7 +60,7 @@ const MyShares = () => {
               <FormattedMessage id="account.shares.description.empty" />
             </Text>
             <Space h={5} />
-            <Button component={Link} href="/upload" variant="light">
+            <Button component={Link} href={webroot + "/upload"} variant="light">
               <FormattedMessage id="account.shares.button.create" />
             </Button>
           </Stack>

frontend/src/pages/admin/intro.tsx

@@ -11,6 +11,8 @@ import Link from "next/link";
 import Logo from "../../components/Logo";
 import Meta from "../../components/Meta";
 
+const webroot = process.env.WEBROOT || "";
+
 const Intro = () => {
   return (
     <>
@@ -43,10 +45,10 @@ const Intro = () => {
           <Text>Enough talked, have fun with Pingvin Share!</Text>
           <Text mt="lg">How to you want to continue?</Text>
           <Stack>
-            <Button href="/admin/config/general" component={Link}>
+            <Button href={webroot + "/admin/config/general"} component={Link}>
               Customize configuration
             </Button>
-            <Button href="/" component={Link} variant="light">
+            <Button href={webroot + "/"} component={Link} variant="light">
               Explore Pingvin Share
             </Button>
           </Stack>

frontend/src/pages/auth/resetPassword/index.tsx

@@ -21,6 +21,8 @@ import useTranslate from "../../../hooks/useTranslate.hook";
 import authService from "../../../services/auth.service";
 import toast from "../../../utils/toast.util";
 
+const webroot = process.env.WEBROOT || "";
+
 const useStyles = createStyles((theme) => ({
   title: {
     fontSize: 26,
@@ -93,7 +95,7 @@ const ResetPassword = () => {
               color="dimmed"
               size="sm"
               className={classes.control}
-              href={"/auth/signIn"}
+              href={webroot  + "/auth/signIn"}
             >
               <Center inline>
                 <TbArrowLeft size={12} />

frontend/src/pages/auth/signIn.tsx

@@ -7,6 +7,8 @@ import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
 import useTranslate from "../../hooks/useTranslate.hook";
 
+const webroot = process.env.WEBROOT || "";
+
 export function getServerSideProps(context: GetServerSidePropsContext) {
   return {
     props: { redirectPath: context.query.redirect ?? null },
@@ -25,7 +27,7 @@ const SignIn = ({ redirectPath }: { redirectPath?: string }) => {
   useEffect(() => {
     refreshUser().then((user) => {
       if (user) {
-        router.replace(redirectPath ?? "/upload");
+        router.replace(redirectPath ?? webroot + "/upload");
       } else {
         setIsLoading(false);
       }

frontend/src/pages/index.tsx

@@ -17,6 +17,8 @@ import Logo from "../components/Logo";
 import Meta from "../components/Meta";
 import useUser from "../hooks/user.hook";
 
+const webroot = process.env.WEBROOT || "";
+
 const useStyles = createStyles((theme) => ({
   inner: {
     display: "flex",
@@ -78,7 +80,7 @@ export default function Home() {
   useEffect(() => {
     refreshUser().then((user) => {
       if (user) {
-        router.replace("/upload");
+        router.replace(webroot + "/upload");
       }
     });
   }, []);
@@ -142,7 +144,7 @@ export default function Home() {
             <Group mt={30}>
               <Button
                 component={Link}
-                href="/auth/signUp"
+                href={webroot + "/auth/signUp"}
                 radius="xl"
                 size="md"
                 className={classes.control}