fix(client): 🐛 do not allow private resumes to be viewable or downloa…

…dable through the link
codedwire · Jul 12, 2023 · 1c2d796 · 1c2d796
1 parent 5ef4bfc
commit 1c2d796
Show file tree

Hide file tree

Showing 121 changed files with 3,195 additions and 2,070 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<img src="/client/public/images/logos/logo.png" alt="Reactive Resume" width="256px" height="256px" />
+<img src="/client/public/logo/dark.png" alt="Reactive Resume" width="256px" height="256px" />
 
 # Reactive Resume
 
@@ -30,6 +30,7 @@ You have complete control over what goes into your resume, how it looks, what co
   - [Donations](#donations)
     - [GitHub Sponsor](#github-sponsor)
     - [PayPal](#paypal)
+  - [GitHub Star History](#github-star-history)
   - [Infrastructure](#infrastructure)
   - [Contributors Wall](#contributors-wall)
   - [License](#license)

diff --git a/client/.eslintrc.json b/client/.eslintrc.json
@@ -12,6 +12,9 @@
     "@next/next/no-img-element": "off",
     "@next/next/no-sync-scripts": "off",
 
+    // React
+    "react/no-unescaped-entities": "off",
+
     // React Hooks
     "react-hooks/exhaustive-deps": "off",
 

diff --git a/client/components/build/Center/ArtboardController.module.scss b/client/components/build/Center/ArtboardController.module.scss
@@ -15,14 +15,14 @@
 .controller {
   @apply z-20 flex items-center justify-center shadow-lg;
   @apply flex rounded-l-full rounded-r-full px-4;
-  @apply bg-neutral-50 dark:bg-neutral-800;
+  @apply bg-zinc-50 dark:bg-zinc-900;
   @apply opacity-70 transition-opacity duration-200 hover:opacity-100;
 
   > button {
     @apply px-2.5 py-2.5;
   }
 
   > hr {
-    @apply mx-3 h-5 w-0.5 bg-neutral-900/40 dark:bg-neutral-50/20;
+    @apply mx-3 h-5 w-0.5 bg-zinc-900/40 dark:bg-zinc-50/20;
   }
 }
diff --git a/client/components/build/Center/ArtboardController.tsx b/client/components/build/Center/ArtboardController.tsx
@@ -12,7 +12,6 @@ import {
   ZoomOut,
 } from '@mui/icons-material';
 import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import clsx from 'clsx';
 import dayjs from 'dayjs';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
@@ -26,6 +25,7 @@ import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
 import { togglePageBreakLine, togglePageOrientation, toggleSidebar } from '@/store/build/buildSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import getResumeUrl from '@/utils/getResumeUrl';
+import { cn } from '@/utils/styles';
 
 import styles from './ArtboardController.module.scss';
 
@@ -60,7 +60,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t<string>('common.toast.success.resume-link-copied'));
+    toast.success(t('common.toast.success.resume-link-copied'));
   };
 
   const handleExportPDF = async () => {
@@ -77,40 +77,40 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
 
   return (
     <div
-      className={clsx({
+      className={cn({
         [styles.container]: true,
         [styles.pushLeft]: left.open,
         [styles.pushRight]: right.open,
       })}
     >
       <div className={styles.controller}>
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.undo')}>
-          <ButtonBase onClick={handleUndo} className={clsx({ 'pointer-events-none opacity-50': past.length < 2 })}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.undo')}>
+          <ButtonBase onClick={handleUndo} className={cn({ 'pointer-events-none opacity-50': past.length < 2 })}>
             <UndoOutlined fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.redo')}>
-          <ButtonBase onClick={handleRedo} className={clsx({ 'pointer-events-none opacity-50': future.length === 0 })}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.redo')}>
+          <ButtonBase onClick={handleRedo} className={cn({ 'pointer-events-none opacity-50': future.length === 0 })}>
             <RedoOutlined fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
         <Divider />
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-in')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in')}>
           <ButtonBase onClick={() => zoomIn(0.25)}>
             <ZoomIn fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-out')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out')}>
           <ButtonBase onClick={() => zoomOut(0.25)}>
             <ZoomOut fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.center-artboard')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard')}>
           <ButtonBase onClick={() => centerView(0.95)}>
             <FilterCenterFocus fontSize="medium" />
           </ButtonBase>
@@ -120,10 +120,10 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
 
         {isDesktop && (
           <>
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation')}>
               <ButtonBase
                 onClick={handleTogglePageOrientation}
-                className={clsx({ 'pointer-events-none opacity-50': pages.length === 1 })}
+                className={cn({ 'pointer-events-none opacity-50': pages.length === 1 })}
               >
                 {orientation === 'vertical' ? (
                   <AlignHorizontalCenter fontSize="medium" />
@@ -133,13 +133,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
               </ButtonBase>
             </Tooltip>
 
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-page-break-line')}>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line')}>
               <ButtonBase onClick={handleTogglePageBreakLine}>
                 <InsertPageBreak fontSize="medium" />
               </ButtonBase>
             </Tooltip>
 
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-sidebars')}>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars')}>
               <ButtonBase onClick={handleToggleSidebar}>
                 <ViewSidebar fontSize="medium" />
               </ButtonBase>
@@ -149,13 +149,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
           </>
         )}
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.copy-link')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link')}>
           <ButtonBase onClick={handleCopyLink}>
             <Link fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.export-pdf')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf')}>
           <ButtonBase onClick={handleExportPDF} disabled={isLoading}>
             <Download fontSize="medium" />
           </ButtonBase>

diff --git a/client/components/build/Center/Center.module.scss b/client/components/build/Center/Center.module.scss
@@ -1,7 +1,7 @@
 .center {
   @apply mx-0 flex flex-grow pt-12 lg:pt-16;
   @apply transition-[margin-left,margin-right] duration-200;
-  @apply bg-neutral-200 dark:bg-neutral-900;
+  @apply bg-zinc-100 dark:bg-zinc-900;
 }
 
 .wrapper {

diff --git a/client/components/build/Center/Center.tsx b/client/components/build/Center/Center.tsx
@@ -1,9 +1,9 @@
-import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
 import { useAppSelector } from '@/store/hooks';
+import { cn } from '@/utils/styles';
 
 import ArtboardController from './ArtboardController';
 import styles from './Center.module.scss';
@@ -19,7 +19,7 @@ const Center = () => {
   if (isEmpty(resume)) return null;
 
   return (
-    <div className={clsx(styles.center)}>
+    <div className={cn(styles.center)}>
       <Header />
 
       <TransformWrapper
@@ -35,7 +35,7 @@ const Center = () => {
           <>
             <TransformComponent wrapperClass={styles.wrapper}>
               <div
-                className={clsx({
+                className={cn({
                   [styles.artboard]: true,
                   'flex-col': orientation === 'vertical',
                 })}

diff --git a/client/components/build/Center/Header.module.scss b/client/components/build/Center/Header.module.scss
@@ -1,10 +1,10 @@
 .header {
   @apply mx-0 flex justify-between shadow;
-  @apply bg-neutral-800 text-neutral-100;
+  @apply bg-zinc-900 text-zinc-100;
   @apply transition-[margin-left,margin-right] duration-200;
 
   button > svg {
-    @apply text-base text-neutral-100;
+    @apply text-base text-zinc-100;
   }
 }
 

diff --git a/client/components/build/Center/Header.tsx b/client/components/build/Center/Header.tsx
@@ -20,7 +20,6 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import clsx from 'clsx';
 import get from 'lodash/get';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
@@ -37,6 +36,7 @@ import { setSidebarState, toggleSidebar } from '@/store/build/buildSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setModalState } from '@/store/modal/modalSlice';
 import getResumeUrl from '@/utils/getResumeUrl';
+import { cn } from '@/utils/styles';
 
 import styles from './Header.module.scss';
 
@@ -102,7 +102,7 @@ const Header = () => {
             },
           },
         },
-      })
+      }),
     );
   };
 
@@ -132,14 +132,14 @@ const Header = () => {
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t<string>('common.toast.success.resume-link-copied'));
+    toast.success(t('common.toast.success.resume-link-copied'));
   };
 
   return (
     <AppBar elevation={0} position="fixed">
       <Toolbar
         variant="regular"
-        className={clsx({
+        className={cn({
           [styles.header]: true,
           [styles.pushLeft]: left.open,
           [styles.pushRight]: right.open,
@@ -165,42 +165,42 @@ const Header = () => {
               <ListItemIcon>
                 <DriveFileRenameOutline className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t<string>('builder.header.menu.rename')}</ListItemText>
+              <ListItemText>{t('builder.header.menu.rename')}</ListItemText>
             </MenuItem>
 
             <MenuItem onClick={handleDuplicate}>
               <ListItemIcon>
                 <CopyAll className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t<string>('builder.header.menu.duplicate')}</ListItemText>
+              <ListItemText>{t('builder.header.menu.duplicate')}</ListItemText>
             </MenuItem>
 
             {resume.public ? (
               <MenuItem onClick={handleShareLink}>
                 <ListItemIcon>
                   <LinkIcon className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
+                <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
               </MenuItem>
             ) : (
-              <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.share-link')}>
+              <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.share-link')}>
                 <div>
                   <MenuItem>
                     <ListItemIcon>
                       <LinkIcon className="scale-90" />
                     </ListItemIcon>
-                    <ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
+                    <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
                   </MenuItem>
                 </div>
               </Tooltip>
             )}
 
-            <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.delete')}>
+            <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.delete')}>
               <MenuItem onClick={handleDelete}>
                 <ListItemIcon>
                   <Delete className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t<string>('builder.header.menu.delete')}</ListItemText>
+                <ListItemText>{t('builder.header.menu.delete')}</ListItemText>
               </MenuItem>
             </Tooltip>
           </Menu>

diff --git a/client/components/build/Center/Page.module.scss b/client/components/build/Center/Page.module.scss
@@ -18,8 +18,8 @@
     content: 'Page Break';
     top: calc(297mm - 19px);
 
-    @apply absolute w-full border-b border-dashed border-neutral-800/75;
-    @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-neutral-800/75;
+    @apply absolute w-full border-b border-dashed border-zinc-900/75;
+    @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-zinc-900/75;
     @apply print:hidden;
 
     :global(.preview-mode) &,

diff --git a/client/components/build/Center/Page.tsx b/client/components/build/Center/Page.tsx
@@ -49,9 +49,7 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
         {TemplatePage && <TemplatePage page={page} />}
       </div>
 
-      {showPageNumbers && (
-        <h4 className={styles.pageNumber}>{`${t<string>('builder.common.glossary.page')} ${page + 1}`}</h4>
-      )}
+      {showPageNumbers && <h4 className={styles.pageNumber}>{`${t('builder.common.glossary.page')} ${page + 1}`}</h4>}
     </div>
   );
 };

diff --git a/client/components/build/LeftSidebar/LeftSidebar.module.scss b/client/components/build/LeftSidebar/LeftSidebar.module.scss
@@ -1,12 +1,12 @@
 .container {
   @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw];
-  @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50;
-  @apply relative flex border-r-2 border-neutral-50/10;
+  @apply bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100;
+  @apply relative flex border-r-2 border-zinc-100/10;
 
   nav {
     @apply absolute inset-y-0 left-0;
     @apply w-14 py-4 md:w-16 md:px-2;
-    @apply bg-neutral-100 shadow dark:bg-neutral-800;
+    @apply bg-zinc-100 shadow dark:bg-zinc-900;
     @apply flex flex-col items-center justify-between;
 
     hr {
@@ -29,7 +29,7 @@
     > section {
       @apply grid gap-4;
       @apply pt-5 pb-7 first:pt-0;
-      @apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10;
+      @apply border-b border-zinc-900/10 last:border-b-0 dark:border-zinc-100/10;
 
       hr {
         @apply my-2;