Add password requirements and privacy policy (#6)

* Refactor search bar input event handling for improved readability and performance

* Refactor components and enhance authentication page

- Simplified year string logic in Footer component.
- Consolidated destructuring in RecipeCard component for cleaner code.
- Streamlined product filtering logic in SearchBar component.
- Improved authentication page with password requirements and icons for validation.
- Added check and x SVG icons for password requirement indicators.
- Updated global CSS for consistent styling and improved variable usage.

* Refactor authentication form components and styles for improved structure and readability

* Enhance form field styles for user validation feedback

* Refactor password requirements styling for improved layout consistency

* Adjust body height calculation for improved layout consistency

* Rename task label from "Start Dev Server" to "Astro Dev Server" for clarity

* Add conditional class to main element and adjust media query breakpoint

* Fix focus going to running task after "Prettify Current File" task closed

* Add presentation options to "Prettify Current File" task for improved user experience

* Enhance form field validation styles by adding user-valid state and correcting gradient opacity

* Refactor font sizes across components to use CSS variables for consistency and improved readability

* Add styles for markdown component layout and adjust h1 margin

* Remove unused styles from privacy page to clean up code

* Add comment to clarify small screen font size adjustments for readability

Author: Vianpyro

.vscode/tasks.json

@@ -2,7 +2,7 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "label": "Start Dev Server",
+            "label": "Astro Dev Server",
             "type": "shell",
             "command": "npm run dev",
             "runOptions": {
@@ -11,7 +11,6 @@
             "presentation": {
                 "clear": true,
                 "close": true,
-                "focus": true,
                 "panel": "dedicated",
                 "showReuseMessage": false
             }
@@ -32,7 +31,7 @@
             "type": "shell",
             "command": "npx prettier --write ${file}",
             "presentation": {
-                "close": true
+                "showReuseMessage": false
             }
         }
     ]

package-lock.json

@@ -56,7 +56,7 @@ const yearString = currentYear === baseYear ? baseYear.toString() : `${baseYear}
     @media screen and (width<=850px) {
         footer > div {
             flex-direction: column;
-            font-size: 1rem;
+            font-size: var(--font-size-small);
             gap: 0;
         }
     }

src/components/Footer.astro

@@ -0,0 +1,12 @@
+---
+import '../styles/form_field.css'
+
+const { id, type, name, label } = Astro.props
+---
+
+<Fragment>
+    <div class="form-field">
+        <input type={type} id={id} name={name} required />
+        <label for={id}>{label}</label>
+    </div>
+</Fragment>

src/components/FormField.astro

@@ -25,6 +25,7 @@ const { canSearch = false } = Astro.props || {}
 
 <style>
     h1 {
+        font-size: var(--font-size-title);
         text-wrap: nowrap;
     }
 
@@ -77,10 +78,6 @@ const { canSearch = false } = Astro.props || {}
             margin: 0;
         }
 
-        h1 {
-            font-size: 1.75rem;
-        }
-
         svg {
             width: calc(1.5 * var(--spacing-medium));
             height: calc(1.5 * var(--spacing-medium));

src/components/Header.astro

@@ -0,0 +1,36 @@
+---
+const { id, name, label } = Astro.props
+import IconShowPassword from '../assets/icon/eye.svg'
+import IconHidePassword from '../assets/icon/eye-off.svg'
+---
+
+<Fragment>
+    <div class="form-field">
+        <div class="input-with-icon">
+            <input type="password" id={id} name={name} required />
+            <label for={id}>{label}</label>
+            <div class="icons" title="Toggle password visibility">
+                <IconShowPassword class="show-password" />
+                <IconHidePassword class="hide-password" />
+            </div>
+        </div>
+    </div>
+</Fragment>
+
+<style>
+    .hide-password {
+        display: none;
+    }
+
+    .icons {
+        cursor: pointer;
+    }
+
+    .input-with-icon {
+        display: flex;
+    }
+
+    .show-password {
+        color: #888;
+    }
+</style>

src/components/PasswordField.astro

@@ -0,0 +1,22 @@
+---
+import PasswordRequirementsCheck from './PasswordRequirementsCheck.astro'
+---
+
+<div id="password-requirements">
+    <h3>Password requirements</h3>
+    <ul>
+        <PasswordRequirementsCheck description="At least 12 characters long." />
+        <PasswordRequirementsCheck description="Contains at least one uppercase letter (A-Z)." />
+        <PasswordRequirementsCheck description="Contains at least one lowercase letter (a-z)." />
+        <PasswordRequirementsCheck description="Contains at least one digit (0-9)." />
+        <PasswordRequirementsCheck
+            description="Contains at least one special character (non-alphanumeric)."
+        />
+    </ul>
+</div>
+
+<style>
+    ul {
+        list-style: none;
+    }
+</style>

src/components/PasswordRequirements.astro

@@ -0,0 +1,40 @@
+---
+import IconCheck from '../assets/icon/check.svg'
+import IconX from '../assets/icon/x.svg'
+
+const { description } = Astro.props
+---
+
+<Fragment>
+    <li>
+        <IconCheck class="password-requirement-check" />
+        <IconX class="password-requirement-x" />
+        <span>{description}</span>
+    </li>
+</Fragment>
+
+<style>
+    li {
+        display: flex;
+        gap: var(--spacing-small);
+        align-items: center;
+    }
+
+    .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);
+    }
+
+    .password-requirement-check {
+        display: none;
+    }
+</style>

src/components/PasswordRequirementsCheck.astro

@@ -30,7 +30,7 @@ function randint(min: number, max: number) {
 
 <style>
     h1 {
-        font-size: calc(1.5 * var(--spacing-medium));
+        font-size: var(--font-size-title);
     }
 
     .recipe-polaroid {

src/components/RecipeCard.astro

@@ -18,7 +18,7 @@ const { placeholder } = Astro.props
         border: none;
         border-bottom: 2px solid var(--color-primary);
         flex: 1;
-        font-size: 1.5rem;
+        font-size: var(--font-size-body);
         outline: none;
     }