email verfication after account creation, password component, added password special characters

frontend/src/components/AuthModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useAuth } from "../contexts/AuthContext";
 import PasswordStrengthMeter from "./PasswordStrengthMeter";
+import PasswordInput from "./PasswordInput";
 
 interface AuthModalProps {
   show: boolean;
@@ -154,19 +155,18 @@ const AuthModal: React.FC<AuthModalProps> = ({
                   />
                 </div>
 
-                <div className="mb-3">
-                  <label className="form-label">Password</label>
-                  <input
-                    type="password"
-                    className="form-control"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                  />
-                  {mode === "signup" && (
+                <PasswordInput
+                  id="password"
+                  label="Password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+                {mode === "signup" && (
+                  <div style={{ marginTop: '-0.75rem', marginBottom: '1rem' }}>
                     <PasswordStrengthMeter password={password} />
-                  )}
-                </div>
+                  </div>
+                )}
 
                 <button
                   type="submit"