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); +} 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/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%); 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