From f9deae31db46887673db5b213d91077206cbabcd Mon Sep 17 00:00:00 2001 From: Chak <444chak@gmail.com> Date: Wed, 18 Dec 2024 08:52:11 +0100 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8feature:=20Ajout=20de=20la=20propr?= =?UTF-8?q?i=C3=A9t=C3=A9=20overflow-y:=20scroll=20dans=20le=20style=20du?= =?UTF-8?q?=20composant=20Layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-js/src/components/Layout/Layout.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/front-js/src/components/Layout/Layout.scss b/front-js/src/components/Layout/Layout.scss index a756b6e..161c356 100644 --- a/front-js/src/components/Layout/Layout.scss +++ b/front-js/src/components/Layout/Layout.scss @@ -10,6 +10,7 @@ rgba(218, 240, 247, 0.63) 25%, rgba(0, 5, 255, 0.34) 75% ); + overflow-y: scroll; } &-logged { background-image: linear-gradient(0deg, #f0f3e8 26.5%, #c5d3fe 87.5%); From 1adafc66793e5a08aaac7358c15cca4b7d82c344 Mon Sep 17 00:00:00 2001 From: Chak <444chak@gmail.com> Date: Wed, 18 Dec 2024 08:52:17 +0100 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8feature:=20Ajout=20de=20styles=20p?= =?UTF-8?q?ersonnalis=C3=A9s=20pour=20la=20barre=20de=20d=C3=A9filement=20?= =?UTF-8?q?dans=20globals.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-js/src/app/globals.css | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/front-js/src/app/globals.css b/front-js/src/app/globals.css index 10608d2..742dff8 100644 --- a/front-js/src/app/globals.css +++ b/front-js/src/app/globals.css @@ -40,3 +40,35 @@ a { color-scheme: dark; } } */ + +* { + --sb-track-color: #00000000; + --sb-thumb-color: #5f63fe; + --sb-border-thumb-color: #232e337a; + --sb-size: 11px; +} + +*::-webkit-scrollbar { + width: var(--sb-size); +} + +*::-webkit-scrollbar-track { + background: var(--sb-track-color); + border-radius: 11px; +} + +*::-webkit-scrollbar-thumb { + background: var(--sb-thumb-color); + border-radius: 11px; + border: 1px solid var(--sb-border-thumb-color); +} + +@supports not selector(::-webkit-scrollbar) { + * { + scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); + } +} + +::-webkit-scrollbar-corner { + background: var(--sb-track-color); +} From 7ec3e362d64e785ff687b14153d1589342ed1ed4 Mon Sep 17 00:00:00 2001 From: Chak <444chak@gmail.com> Date: Wed, 18 Dec 2024 10:11:28 +0100 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=A8feature:=20Ajout=20du=20composant?= =?UTF-8?q?=20ValidatePsw=20pour=20la=20validation=20des=20mots=20de=20pas?= =?UTF-8?q?se=20et=20mise=20=C3=A0=20jour=20des=20styles=20associ=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-js/src/app/playground/page.tsx | 21 ++++ front-js/src/components/Modal/Modal.scss | 2 +- front-js/src/components/Text/Text.tsx | 10 +- .../components/ValidatePsw/ValidatePsw.scss | 14 +++ .../components/ValidatePsw/ValidatePsw.tsx | 105 ++++++++++++++++++ front-js/src/components/ValidatePsw/index.ts | 1 + 6 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 front-js/src/app/playground/page.tsx create mode 100644 front-js/src/components/ValidatePsw/ValidatePsw.scss create mode 100644 front-js/src/components/ValidatePsw/ValidatePsw.tsx create mode 100644 front-js/src/components/ValidatePsw/index.ts diff --git a/front-js/src/app/playground/page.tsx b/front-js/src/app/playground/page.tsx new file mode 100644 index 0000000..5e8520b --- /dev/null +++ b/front-js/src/app/playground/page.tsx @@ -0,0 +1,21 @@ +"use client"; + +import Layout from "@/components/Layout"; +import Title from "@/components/Title"; +import Space from "@/components/Space"; +import Box from "@/components/Box"; +import ValidatePsw from "@/components/ValidatePsw"; +// +export default function Playground() { + return ( + + + Playground + + + + + + + ); +} diff --git a/front-js/src/components/Modal/Modal.scss b/front-js/src/components/Modal/Modal.scss index 9838631..b4728f4 100644 --- a/front-js/src/components/Modal/Modal.scss +++ b/front-js/src/components/Modal/Modal.scss @@ -1,7 +1,7 @@ .modal { padding: 20px; width: 471px; - border-radius: 20px; + border-radius: 28px; background: rgba(246, 246, 246, 0.8); --shadow-color: 236deg 42% 39%; box-shadow: diff --git a/front-js/src/components/Text/Text.tsx b/front-js/src/components/Text/Text.tsx index ec1f201..9d7730c 100644 --- a/front-js/src/components/Text/Text.tsx +++ b/front-js/src/components/Text/Text.tsx @@ -15,6 +15,9 @@ interface TextProps { bottom?: string; }; align?: "left" | "center" | "right" | "justify"; + className?: string; + icon?: React.ReactNode; + iconPosition?: "start" | "end"; // Add the iconPosition prop here } const Text: React.FC = ({ @@ -24,10 +27,13 @@ const Text: React.FC = ({ weight, margin, align, + className, + icon, + iconPosition = "start", // Destructure the iconPosition prop here with a default value }) => { return ( = ({ textAlign: align, }} > + {iconPosition === "start" && icon && {icon}} {children} + {iconPosition === "end" && icon && {icon}} ); }; diff --git a/front-js/src/components/ValidatePsw/ValidatePsw.scss b/front-js/src/components/ValidatePsw/ValidatePsw.scss new file mode 100644 index 0000000..1d87a01 --- /dev/null +++ b/front-js/src/components/ValidatePsw/ValidatePsw.scss @@ -0,0 +1,14 @@ +.validate-password { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 20px; + margin-bottom: 20px; + border-radius: 8px; + padding: 10px; + border: 1px solid var(--Gris, #4b4c59); + span { + display: flex; + align-items: center; + } +} diff --git a/front-js/src/components/ValidatePsw/ValidatePsw.tsx b/front-js/src/components/ValidatePsw/ValidatePsw.tsx new file mode 100644 index 0000000..902f208 --- /dev/null +++ b/front-js/src/components/ValidatePsw/ValidatePsw.tsx @@ -0,0 +1,105 @@ +import React from "react"; +import "./ValidatePsw.scss"; +import Text from "@/components/Text"; + +interface ValidatePswProps { + password: string; + checkhasNumber?: boolean; + checkhasUpperCase?: boolean; + checkhasLowerCase?: boolean; + checkhasSpecial?: boolean; + lengthRequired?: number; +} + +const ValidatePsw: React.FC = ({ + password, + lengthRequired = 8, + checkhasNumber = true, + checkhasUpperCase = true, + checkhasLowerCase = true, + checkhasSpecial = true, +}) => { + const size = password.length >= lengthRequired; + + const hasNumber = (myString: string) => { + return /\d/.test(myString); + }; + + const hasUpperCase = (myString: string) => { + return /[A-Z]/.test(myString); + }; + + const hasLowerCase = (myString: string) => { + return /[a-z]/.test(myString); + }; + + const hasSpecial = (myString: string) => { + return /[^A-Za-z0-9]/.test(myString); + }; + const validIcon: React.ReactNode = ( + + + + ); + const invalidIcon: React.ReactNode = ( + + + + ); + + return ( +
+ {lengthRequired > 0 && ( + + Le mot de passe doit contenir au moins {lengthRequired} caractères + + )} + {checkhasNumber && ( + + Le mot de passe doit contenir au moins un chiffre + + )} + {checkhasUpperCase && ( + + Le mot de passe doit contenir au moins une lettre majuscule + + )} + {checkhasLowerCase && ( + + Le mot de passe doit contenir au moins une lettre minuscule + + )} + {checkhasSpecial && ( + + Le mot de passe doit contenir au moins un caractère spécial + + )} +
+ ); +}; + +export default ValidatePsw; diff --git a/front-js/src/components/ValidatePsw/index.ts b/front-js/src/components/ValidatePsw/index.ts new file mode 100644 index 0000000..7ebe8f8 --- /dev/null +++ b/front-js/src/components/ValidatePsw/index.ts @@ -0,0 +1 @@ +export { default} from './ValidatePsw'; \ No newline at end of file