Reproduce actual website part 3 (#4)

Author: Vianpyro

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "printWidth": 80,
+    "printWidth": 100,
     "tabWidth": 4,
     "trailingComma": "es5",
     "useTabs": false,

package-lock.json

@@ -8,10 +8,7 @@ import { SITE_NAME } from '../config.js'
 
 const baseYear = 2024
 const currentYear = new Date().getFullYear()
-const yearString =
-    currentYear === baseYear
-        ? baseYear.toString()
-        : `${baseYear}-${currentYear}`
+const yearString = currentYear === baseYear ? baseYear.toString() : `${baseYear}-${currentYear}`
 ---
 
 <footer>
@@ -21,11 +18,7 @@ const yearString =
     </div>
     <ul>
         <li title="GitHub">
-            <a
-                href="https://github.com/TheSmartCooking"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <a href="https://github.com/TheSmartCooking" target="_blank" rel="noopener noreferrer">
                 <IconGitHub />
             </a>
         </li>

src/assets/icon/check.svg

@@ -1,14 +1,7 @@
 ---
 import '../styles/global.css'
 
-const {
-    author_name,
-    cook_time,
-    number_of_reviews,
-    picture_id,
-    recipe_status,
-    title,
-} = Astro.props
+const { author_name, cook_time, number_of_reviews, picture_id, recipe_status, title } = Astro.props
 
 function randint(min: number, max: number) {
     return Math.floor(Math.random() * (max - min + 1) + min)
@@ -17,10 +10,7 @@ function randint(min: number, max: number) {
 
 <Fragment>
     <div class="recipe-polaroid">
-        <div
-            class="card-body"
-            style=`background-image: url("recipe/${picture_id}.png");`
-        >
+        <div class="card-body" style=`background-image: url("recipe/${picture_id}.png");`>
             <div class="card-top">
                 <span class="card-text cook-time">⏱️ {cook_time}</span>
                 <span class="card-text recipe-status">{recipe_status}</span>

src/assets/icon/x.svg

@@ -36,32 +36,21 @@ const { placeholder } = Astro.props
 </style>
 
 <script type="module" is:inline>
+    const input = document.querySelector('.search-bar input')
     let debounceTimeout
 
     function handleSearch(input) {
         const query = input.value.trim().toLowerCase()
         const products = document.querySelectorAll('.recipe-polaroid')
 
         products.forEach((product) => {
-            const name =
-                product.querySelector('h1')?.textContent.toLowerCase() || ''
-            product.style.display =
-                query && name.includes(query) ? 'flex' : query ? 'none' : 'flex'
+            const name = product.querySelector('h1')?.textContent.toLowerCase() || ''
+            product.style.display = query && name.includes(query) ? 'flex' : query ? 'none' : 'flex'
         })
     }
 
-    function initSearchBar() {
-        const input = document.querySelector('.search-bar input')
-
-        input.addEventListener('input', () => {
-            clearTimeout(debounceTimeout)
-            debounceTimeout = setTimeout(() => handleSearch(input), 500)
-        })
-    }
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initSearchBar)
-    } else {
-        initSearchBar()
-    }
+    input.addEventListener('input', () => {
+        clearTimeout(debounceTimeout)
+        debounceTimeout = setTimeout(() => handleSearch(input), 500)
+    })
 </script>

src/components/Footer.astro

@@ -1,8 +1,10 @@
 ---
 import '../styles/global.css'
 import Main from '../layouts/Main.astro'
-import IconShowPassword from '../assets/icon/eye.svg'
+import IconCheck from '../assets/icon/check.svg'
 import IconHidePassword from '../assets/icon/eye-off.svg'
+import IconShowPassword from '../assets/icon/eye.svg'
+import IconX from '../assets/icon/x.svg'
 ---
 
 <Main title="Authentication">
@@ -11,23 +13,13 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
             <h2>Login</h2>
             <form action="#">
                 <div class="form-field">
-                    <input
-                        type="email"
-                        id="login-email"
-                        name="login-email"
-                        required
-                    />
+                    <input type="email" id="login-email" name="login-email" required />
                     <label for="login-email">E-mail</label>
                 </div>
 
                 <div class="form-field">
                     <div class="input-with-icon">
-                        <input
-                            type="password"
-                            id="login-password"
-                            name="login-password"
-                            required
-                        />
+                        <input type="password" id="login-password" name="login-password" required />
                         <label for="login-password">Password</label>
                         <div class="icons" title="Toggle password visibility">
                             <IconShowPassword class="show-password" />
@@ -47,22 +39,12 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
             <h2>Register</h2>
             <form action="#">
                 <div class="form-field">
-                    <input
-                        type="text"
-                        id="register-username"
-                        name="register-username"
-                        required
-                    />
+                    <input type="text" id="register-username" name="register-username" required />
                     <label for="register-username">Username</label>
                 </div>
 
                 <div class="form-field">
-                    <input
-                        type="email"
-                        id="register-email"
-                        name="register-email"
-                        required
-                    />
+                    <input type="email" id="register-email" name="register-email" required />
                     <label for="register-email">E-mail</label>
                 </div>
 
@@ -86,18 +68,52 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
                     <div class="input-with-icon">
                         <input
                             type="password"
-                            id="register-password-password"
-                            name="register-password-password"
+                            id="register-password-confirm"
+                            name="register-password-confirm"
                             required
                         />
-                        <label for="register-password-password">Password</label>
+                        <label for="register-password-confirm">Password confirmation</label>
                         <div class="icons" title="Toggle password visibility">
                             <IconShowPassword class="show-password" />
                             <IconHidePassword class="hide-password" />
                         </div>
                     </div>
                 </div>
 
+                <div id="password-requirements">
+                    <h3>Password requirements</h3>
+                    <ul>
+                        <li>
+                            <IconCheck class="password-requirement-check" />
+                            <IconX class="password-requirement-x" />
+                            <span>At least 12 characters long.</span>
+                        </li>
+                        <li>
+                            <IconCheck class="password-requirement-check" />
+                            <IconX class="password-requirement-x" />
+                            <span> Contains at least one uppercase letter (A-Z). </span>
+                        </li>
+                        <li>
+                            <IconCheck class="password-requirement-check" />
+                            <IconX class="password-requirement-x" />
+                            <span> Contains at least one lowercase letter (a-z). </span>
+                        </li>
+                        <li>
+                            <IconCheck class="password-requirement-check" />
+                            <IconX class="password-requirement-x" />
+                            <span>Contains at least one digit (0-9).</span>
+                        </li>
+                        <li>
+                            <IconCheck class="password-requirement-check" />
+                            <IconX class="password-requirement-x" />
+                            <span>
+                                Contains at least one special character (any non-alphanumeric
+                                character).
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+
                 <button type="submit">Register</button>
             </form>
 
@@ -139,6 +155,16 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
         width: clamp(320px, 100%, 500px);
     }
 
+    ul {
+        list-style: none;
+    }
+
+    ul > li {
+        display: flex;
+        gap: var(--spacing-small);
+        align-items: center;
+    }
+
     .flip-link {
         font-weight: bold;
     }
@@ -181,7 +207,8 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
         border-bottom-color: var(--color-secondary);
     }
 
-    .hide-password {
+    .hide-password,
+    .password-requirement-check {
         display: none;
     }
 
@@ -197,6 +224,20 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
         display: flex;
     }
 
+    .password-requirement-check,
+    .password-requirement-x {
+        width: 1.75rem;
+        min-width: 1.75rem;
+    }
+
+    .password-requirement-check {
+        color: var(--color-success);
+    }
+
+    .password-requirement-x {
+        color: var(--color-error);
+    }
+
     #authentication {
         align-items: center;
         display: flex;
@@ -223,6 +264,7 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
     const registerSection = document.getElementById('register')
     const loginLink = document.getElementById('register-link')
     const registerLink = document.getElementById('login-link')
+    const passwordInput = document.getElementById('register-password')
 
     // Maintain label position on filled inputs
     document.querySelectorAll('.form-field input').forEach((input) => {
@@ -259,9 +301,7 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
         const hideIcons = section.querySelectorAll('.hide-password')
 
         const toggle = () => {
-            const isHidden = [...passwordInputs].some(
-                (input) => input.type === 'password'
-            )
+            const isHidden = [...passwordInputs].some((input) => input.type === 'password')
             passwordInputs.forEach((input) => {
                 input.type = isHidden ? 'text' : 'password'
             })
@@ -275,4 +315,24 @@ import IconHidePassword from '../assets/icon/eye-off.svg'
 
         iconContainer.addEventListener('click', toggle)
     })
+
+    passwordInput.addEventListener('input', () => {
+        const password = passwordInput.value
+        const requirements = [
+            { regex: /.{12,}/, index: 0 },
+            { regex: /[A-Z]/, index: 1 },
+            { regex: /[a-z]/, index: 2 },
+            { regex: /\d/, index: 3 },
+            { regex: /[^a-zA-Z0-9]/, index: 4 },
+        ]
+
+        requirements.forEach(({ regex, index }) => {
+            const isValid = regex.test(password)
+            const checkIcon = document.querySelectorAll('.password-requirement-check')[index]
+            const xIcon = document.querySelectorAll('.password-requirement-x')[index]
+
+            checkIcon.style.display = isValid ? 'inline' : 'none'
+            xIcon.style.display = isValid ? 'none' : 'inline'
+        })
+    })
 </script>

src/components/RecipeCard.astro

@@ -8,7 +8,7 @@
     --color-primary: light-dark(#66af71, #2b422f);
     --color-secondary: light-dark(#527f59, #3f8549);
     --color-error: red;
-    --color-success: green;
+    --color-success: var(--color-secondary);
 
     /*
     Define spacing sizes for margins, paddings, and gaps.
@@ -34,9 +34,7 @@
     --polaroid-height: 107mm;
     --polaroid-width: 88mm;
     --polaroid-photo-size: calc(var(--polaroid-width) - 9mm);
-    --polaroid-margin-top: calc(
-        (var(--polaroid-width) - var(--polaroid-photo-size)) / 2
-    );
+    --polaroid-margin-top: calc((var(--polaroid-width) - var(--polaroid-photo-size)) / 2);
 }
 
 * {