Email SMTP Fix

src/components/ChangePasswordDialog.js

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { toast } from 'sonner';
+import { Lock } from 'lucide-react';
+
+const ChangePasswordDialog = ({ open, onOpenChange }) => {
+  const { changePassword } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (formData.newPassword.length < 6) {
+      toast.error('New password must be at least 6 characters');
+      return;
+    }
+
+    if (formData.newPassword !== formData.confirmPassword) {
+      toast.error('New passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await changePassword(formData.currentPassword, formData.newPassword);
+      toast.success('Password changed successfully!');
+
+      // Reset form
+      setFormData({
+        currentPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      });
+
+      // Close dialog
+      onOpenChange(false);
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to change password';
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md bg-white">
+        <DialogHeader>
+          <div className="flex items-center gap-2 mb-2">
+            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[#FFF3E0]">
+              <Lock className="h-5 w-5 text-[#E07A5F]" />
+            </div>
+            <DialogTitle className="text-2xl font-semibold text-[#3D405B]">
+              Change Password
+            </DialogTitle>
+          </div>
+          <DialogDescription className="text-[#6B708D]">
+            Update your password to keep your account secure.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          <div>
+            <Label htmlFor="currentPassword">Current Password</Label>
+            <Input
+              id="currentPassword"
+              name="currentPassword"
+              type="password"
+              required
+              value={formData.currentPassword}
+              onChange={handleInputChange}
+              placeholder="Enter current password"
+              className="h-12 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="newPassword">New Password</Label>
+            <Input
+              id="newPassword"
+              name="newPassword"
+              type="password"
+              required
+              value={formData.newPassword}
+              onChange={handleInputChange}
+              placeholder="Enter new password (min. 6 characters)"
+              className="h-12 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="confirmPassword">Confirm New Password</Label>
+            <Input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              required
+              value={formData.confirmPassword}
+              onChange={handleInputChange}
+              placeholder="Re-enter new password"
+              className="h-12 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            />
+          </div>
+
+          <DialogFooter className="mt-6">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              className="rounded-full px-6"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading}
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6 disabled:opacity-50"
+            >
+              {loading ? 'Changing...' : 'Change Password'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ChangePasswordDialog;

src/components/MemberRoute.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { toast } from 'sonner';
+
+const MemberRoute = ({ children }) => {
+  const { user, loading } = useAuth();
+  const [hasShownToast, setHasShownToast] = React.useState(false);
+
+  useEffect(() => {
+    // Show toast only once when user is not active
+    if (!loading && user && user.status !== 'active' && !hasShownToast) {
+      toast.error('Active membership required. Please complete your payment to access this feature.', {
+        duration: 5000
+      });
+      setHasShownToast(true);
+    }
+  }, [user, loading, hasShownToast]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[#FDFCF8]">
+        <p className="text-[#6B708D]">Loading...</p>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+
+  // Allow admins to bypass payment requirement
+  if (user.role === 'admin') {
+    return children;
+  }
+
+  // Check if user is an active member
+  if (user.status !== 'active') {
+    return <Navigate to="/plans" />;
+  }
+
+  return children;
+};
+
+export default MemberRoute;

src/components/registration/RegistrationStep4.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Label } from '../ui/label';
 import { Input } from '../ui/input';
+import { PasswordInput } from '../ui/password-input';
 
 const RegistrationStep4 = ({ formData, handleInputChange }) => {
   return (
@@ -34,10 +35,9 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
 
         <div>
           <Label htmlFor="password">Password *</Label>
-          <Input
+          <PasswordInput
             id="password"
             name="password"
-            type="password"
             required
             minLength={6}
             value={formData.password}
@@ -53,10 +53,9 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
 
         <div>
           <Label htmlFor="confirmPassword">Repeat Password *</Label>
-          <Input
+          <PasswordInput
             id="confirmPassword"
             name="confirmPassword"
-            type="password"
             required
             value={formData.confirmPassword}
             onChange={handleInputChange}

src/components/ui/password-input.jsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { Eye, EyeOff } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
+  const [showPassword, setShowPassword] = React.useState(false)
+
+  return (
+    <div className="relative">
+      <input
+        type={showPassword ? "text" : "password"}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pr-10 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+      <button
+        type="button"
+        onClick={() => setShowPassword(!showPassword)}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-[#6B708D] hover:text-[#3D405B] transition-colors focus:outline-none"
+        tabIndex={-1}
+      >
+        {showPassword ? (
+          <EyeOff className="h-5 w-5" />
+        ) : (
+          <Eye className="h-5 w-5" />
+        )}
+      </button>
+    </div>
+  )
+})
+PasswordInput.displayName = "PasswordInput"
+
+export { PasswordInput }