feat: rework login page

public/locales/en/common.json

@@ -41,5 +41,8 @@
   "profile": "Profile",
   "select-your-lang": "Change the language",
   "name": "Name",
-  "email": "Email"
+  "email": "Email",
+  "footer": {
+    "made_by": "Made with ❤\uFE0F by"
+  }
 }

public/locales/en/home.json

@@ -1,8 +1,5 @@
 {
   "select-category": "Please select a category",
   "or-create-one": "or create one",
-  "no-link": "No link for <b>{{name}}</b>",
+  "no-link": "No link for <b>{{name}}</b>"
-  "footer": {
-    "made_by": "Made with ❤\uFE0F by"
-  }
 }

public/locales/en/login.json

@@ -1,5 +1,6 @@
 {
   "title": "Authentication",
   "informative-text": "Authentication required to use MyLinks",
-  "continue-with": "Continue with {{provider}}"
+  "continue-with": "Continue with {{provider}}",
+  "slogan": "Manage your links in the best possible way"
 }

public/locales/fr/common.json

@@ -41,5 +41,8 @@
   "profile": "Profil",
   "select-your-lang": "Modifier la langue",
   "name": "Nom",
-  "email": "Email"
+  "email": "Email",
+  "footer": {
+    "made_by": "Fait avec ❤\uFE0F par"
+  }
 }

public/locales/fr/home.json

@@ -1,8 +1,5 @@
 {
   "select-category": "Veuillez sélectionner une categories",
   "or-create-one": "ou en créer une",
-  "no-link": "Aucun lien pour <b>{{name}}</b>",
+  "no-link": "Aucun lien pour <b>{{name}}</b>"
-  "footer": {
-    "made_by": "Fait avec ❤\uFE0F par"
-  }
 }

public/locales/fr/login.json

@@ -1,5 +1,6 @@
 {
   "title": "Authentification",
-  "informative-text": "Authentification requise pour utiliser ce service",
+  "informative-text": "Authentification requise pour utiliser MyLinks",
-  "continue-with": "Continuer avec {{provider}}"
+  "continue-with": "Continuer avec {{provider}}",
+  "slogan": "Gérez vos liens de la meilleure des façons"
 }

src/components/Footer/Footer.tsx

@@ -1,10 +1,10 @@
 import PATHS from 'constants/paths';
-import LinkTag from 'next/link';
 import { useTranslation } from 'next-i18next';
-import styles from './links.module.scss';
+import LinkTag from 'next/link';
+import styles from './footer.module.scss';
 
-export default function LinksFooter() {
+export default function Footer() {
-  const { t } = useTranslation('home');
+  const { t } = useTranslation('common');
 
   return (
     <footer className={styles['footer']}>
@@ -14,7 +14,7 @@ export default function LinksFooter() {
         <LinkTag href={PATHS.TERMS}>{t('common:terms')}</LinkTag>
       </div>
       <div className='bottom'>
-        {t('home:footer.made_by')}{' '}
+        {t('common:footer.made_by')}{' '}
         <LinkTag
           href={PATHS.AUTHOR}
           target='_blank'

src/components/Footer/footer.module.scss

@@ -0,0 +1,8 @@
+@import 'styles/colors.scss';
+
+.footer {
+  font-size: 0.9em;
+  color: $grey;
+  text-align: center;
+  padding: 0.75em 0 0.25em;
+}

src/components/Links/Links.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Footer from 'components/Footer/Footer';
 import MobileCategoriesModal from 'components/MobileCategoriesModal';
 import CreateItem from 'components/QuickActions/CreateItem';
 import EditItem from 'components/QuickActions/EditItem';
@@ -11,7 +12,6 @@ import LinkTag from 'next/link';
 import { BiSearchAlt } from 'react-icons/bi';
 import quickActionStyles from '../QuickActions/quickactions.module.scss';
 import LinkItem from './LinkItem';
-import LinksFooter from './LinksFooter';
 import styles from './links.module.scss';
 
 interface LinksProps {
@@ -93,7 +93,7 @@ export default function Links({ isMobile }: Readonly<LinksProps>) {
           </LinkTag>
         </div>
       )}
-      <LinksFooter />
+      <Footer />
     </div>
   );
 }

src/components/Links/links.module.scss

@@ -188,10 +188,3 @@
     animation: rotate 1s both reverse infinite linear;
   }
 }
-
-.footer {
-  font-size: 0.8em;
-  color: $grey;
-  text-align: center;
-  padding: 0.75em 0 0.25em;
-}

src/components/Modal/modal.module.scss

@@ -16,6 +16,7 @@
 
 .modal-container {
   background: $light-grey;
+  min-height: 250px;
   min-width: 500px;
   margin-top: 6em;
   border-radius: 3px;

src/pages/login.tsx

@@ -1,4 +1,5 @@
-import ButtonLink from 'components/ButtonLink';
+import clsx from 'clsx';
+import Footer from 'components/Footer/Footer';
 import LangSelector from 'components/LangSelector';
 import MessageManager from 'components/MessageManager/MessageManager';
 import PageTransition from 'components/PageTransition';
@@ -28,28 +29,28 @@ export default function SignIn({ providers }: Readonly<SignInProps>) {
         hideLangageSelector
       >
         <NextSeo title={t('login:title')} />
-        <div className={styles['image-wrapper']}>
+        <Image
-          <Image
+          src={'/logo-light.png'}
-            src={'/logo-light.png'}
+          width={300}
-            width={300}
+          height={100}
-            height={100}
+          alt="MyLinks's logo"
-            alt="MyLinks's logo"
+        />
-          />
+        <p className={styles['slogan']}>{t('login:slogan')}</p>
-        </div>
         <div className={styles['form-wrapper']}>
           <h1>{t('login:title')}</h1>
           <MessageManager info={t('login:informative-text')} />
           {Object.values(providers).map(({ name, id }) => (
-            <ButtonLink
+            <button
-              onClick={() => signIn(id, { callbackUrl: PATHS.HOME })}
+              onClick={() => signIn(id)}
-              className={styles['login-button']}
+              className={clsx(styles['login-button'], 'btn')}
               key={id}
             >
-              <FcGoogle size={'1.5em'} />{' '}
+              <FcGoogle size='1.5em' />{' '}
               {t('login:continue-with', { provider: name })}
-            </ButtonLink>
+            </button>
           ))}
         </div>
+        <Footer />
       </PageTransition>
       <div className='lang-selector'>
         <LangSelector />
@@ -69,7 +70,7 @@ export async function getServerSideProps({ req, res, locale }) {
     };
   }
 
-  const providers = await getProviders();
+  const providers = (await getProviders()) ?? [];
   return {
     props: {
       session,

src/styles/globals.scss

@@ -82,14 +82,15 @@ h6 {
   }
 }
 
-button:not(.reset) {
+button:not(.reset),
+a.btn:not(.reset) {
   cursor: pointer;
   width: 100%;
-
   text-transform: uppercase;
+  font-size: 14px;
   color: $white;
   background: $blue;
-  padding: 10px;
+  padding: 0.75em;
   border: 1px solid $blue;
   border-radius: 3px;
   transition: 0.15s;

src/styles/login.module.scss

@@ -2,38 +2,55 @@
 @import 'colors.scss';
 
 .login-page {
+  position: relative;
   height: 100%;
-  width: 100%;
+  width: 500px;
-  background-size: cover;
+  margin-top: 50px;
-  background: url('/login-bg-final.webp') bottom;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-direction: column;
 }
 
 .login-container {
-  width: auto;
+  width: 100%;
   max-width: 100%;
   white-space: nowrap;
-  background-color: $black-blur;
-  backdrop-filter: blur(0.35em);
-  padding: 2.5em;
-  border-radius: 5px;
-  border: 1px solid $white;
   display: flex;
-  gap: 2.5em;
+  align-items: center;
-  flex-direction: row;
+  gap: 1.5em;
+  flex-direction: column;
 }
 
-.image-wrapper {
+.slogan {
-  display: flex;
+  position: relative;
-  flex: 1;
+  width: fit-content;
-  align-items: center;
+  white-space: pre-wrap;
-  justify-items: center;
+  text-align: center;
+  font-style: italic;
+  color: rgba($color: $black, $alpha: 0.75);
+
+  &::before {
+    position: absolute;
+    left: -0.65em;
+    content: '“';
+    font-family: sans-serif;
+    font-size: 2.25em;
+  }
+  &::after {
+    position: absolute;
+    right: -0.5em;
+    content: '”';
+    font-family: sans-serif;
+    font-size: 2.25em;
+  }
 }
 
 .form-wrapper {
+  width: 100%;
+  background-color: $white;
+  padding: 2em;
+  border-radius: 3px;
+  border: 1px solid $lightest-grey;
   display: flex;
   gap: 1em;
   flex: 1;
@@ -42,31 +59,38 @@
   flex-direction: column;
 
   & h1 {
-    color: $white;
+    color: $black;
+  }
+
+  & p {
+    font-size: 0.9em;
+    font-style: italic;
+    white-space: pre-wrap;
+    color: $grey;
+    display: flex;
+    gap: 0.25em;
   }
 }
 
 .login-button {
   width: 100%;
-  color: $dark-blue;
-  background-color: $white;
-  padding: 0.5em;
-  border-radius: 3px;
   display: flex;
-  gap: 0.25em;
+  gap: 0.5em;
   align-items: center;
   justify-content: center;
+
+  & > svg {
+    background-color: $white;
+    padding: 3px;
+    border-radius: 50%;
+  }
 }
 
 @media (max-width: calc(768px + 4em)) {
   .login-page {
-    padding: 1em;
+    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .login-container {
-    width: auto;
     white-space: break-spaces;
+    padding: 1em;
     align-items: center;
     flex-direction: column;
   }

src/utils/prisma.ts

@@ -1,5 +1,13 @@
 import { PrismaClient } from '@prisma/client';
 
-const prisma = new PrismaClient();
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+const prisma =
+  globalForPrisma.prisma ||
+  new PrismaClient({
+    log: ['error', 'info', 'warn'],
+  });
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
 
 export default prisma;