diff --git a/public/login-bg-final.webp b/public/login-bg-final.webp new file mode 100644 index 0000000..037a2a2 Binary files /dev/null and b/public/login-bg-final.webp differ diff --git a/public/login-bg.jpg b/public/login-bg.jpg new file mode 100644 index 0000000..c8adf06 Binary files /dev/null and b/public/login-bg.jpg differ diff --git a/public/logo-light.png b/public/logo-light.png new file mode 100644 index 0000000..466711e Binary files /dev/null and b/public/logo-light.png differ diff --git a/public/logo-light.svg b/public/logo-light.svg new file mode 100644 index 0000000..11c7d6f --- /dev/null +++ b/public/logo-light.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index f50a0bb..3d3619d 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useId } from "react"; +import { ReactNode } from "react"; import { createPortal } from "react-dom"; import { GrClose } from "react-icons/gr"; @@ -23,9 +23,8 @@ export default function Modal({ noHeader = false, padding = "1em 1.5em", }: ModalProps) { - const modalId = useId(); const handleWrapperClick = (event) => - event.target.classList?.[0] === styles["modal-wrapper"] && close(); + event.target.classList?.[0] === styles["modal-wrapper"] && close && close(); return createPortal( {children} diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx index bd5585e..00076e8 100644 --- a/src/pages/signin.tsx +++ b/src/pages/signin.tsx @@ -1,7 +1,10 @@ import { Provider } from "next-auth/providers"; import { getProviders, signIn } from "next-auth/react"; import { NextSeo } from "next-seo"; +import Image from "next/image"; +import { FcGoogle } from "react-icons/fc"; +import ButtonLink from "components/ButtonLink"; import MessageManager from "components/MessageManager/MessageManager"; import PageTransition from "components/PageTransition"; @@ -9,28 +12,39 @@ import PATHS from "constants/paths"; import getUser from "lib/user/getUser"; import { getSession } from "utils/session"; -import styles from "styles/form.module.scss"; +import styles from "styles/login.module.scss"; interface SignInProps { providers: Provider[]; } export default function SignIn({ providers }: SignInProps) { return ( - - -

Se connecter

- -
- {Object.values(providers).map(({ name, id }) => ( - - ))} -
- +
+ + +
+ MyLinks's logo +
+
+

Authentification

+ + {Object.values(providers).map(({ name, id }) => ( + signIn(id, { callbackUrl: PATHS.HOME })} + className={styles["login-button"]} + key={id} + > + Continuer avec {name} + + ))} +
+ +
); } @@ -47,6 +61,6 @@ export async function getServerSideProps({ req, res }) { const providers = await getProviders(); return { - props: { providers }, + props: { session, providers }, }; } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 37d1960..2735b6d 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -10,6 +10,7 @@ $light-grey: #f0eef6; $grey: #bbb; $black: #333; +$black-blur: rgba(0, 0, 0, 0.3); $light-red: #ffbabab9; $red: #d8000c; diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 08a870e..d90b23d 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -66,12 +66,12 @@ li { /* width */ ::-webkit-scrollbar { - width: 7px; + height: 0.45em; + width: 0.45em; } /* Track */ ::-webkit-scrollbar-track { - background: $light-grey; border-radius: 2px; } diff --git a/src/styles/login.module.scss b/src/styles/login.module.scss index 1639fe1..394ab44 100644 --- a/src/styles/login.module.scss +++ b/src/styles/login.module.scss @@ -1,44 +1,76 @@ @import "keyframes.scss"; @import "colors.scss"; -.wrapper { +.login-page { height: 100%; - width: 480px; + width: 100%; + background: url("http://localhost:3000/login-bg-final.webp"); + background-size: cover; + background-position: bottom; display: flex; - gap: 20px; + align-items: center; justify-content: center; flex-direction: column; - animation: fadein 250ms both; + transition: all 0.15s; +} - & .providers { - height: fit-content; - width: 100%; - display: flex; +.login-container { + width: auto; + 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; + flex-direction: row; + transition: all 0.15s; +} + +.image-wrapper { + display: flex; + flex: 1; + align-items: center; + justify-items: center; +} + +.form-wrapper { + display: flex; + gap: 1em; + flex: 1; + align-items: center; + justify-content: center; + flex-direction: column; + + & h1 { + color: $white; + } +} + +.login-button { + width: 100%; + color: $dark-blue; + background-color: $white; + padding: 0.5em; + border-radius: 3px; + display: flex; + gap: 0.25em; + align-items: center; + justify-content: center; +} + +@media (max-width: calc(768px + 4em)) { + .login-page { + padding: 1em; + justify-content: flex-start; + } + + .login-container { + width: auto; + white-space: break-spaces; align-items: center; - justify-content: center; flex-direction: column; - - & button { - width: 100%; - } - } - - & .error { - height: fit-content; - width: 100%; - text-align: center; - font-style: italic; - font-size: 0.9em; - color: $red; - background-color: $light-red; - padding: 10px; - border-radius: 3px; - animation: fadein 250ms both; - } -} - -@media (max-width: 680px) { - .login { - width: 100%; } }