Add mail verification and use .env insteads of environment in compose

src/pages/Register.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
-import { Mail, Lock, User, ArrowRight, Loader2 } from 'lucide-react';
+import { Mail, Lock, User, ArrowRight, Loader2, CheckCircle } from 'lucide-react';
 import BrandLogo from '../components/BrandLogo';
 import toast from 'react-hot-toast';
 
@@ -12,6 +12,7 @@ export default function Register() {
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [loading, setLoading] = useState(false);
+  const [needsVerification, setNeedsVerification] = useState(false);
   const { register } = useAuth();
   const { t } = useLanguage();
   const navigate = useNavigate();
@@ -31,9 +32,14 @@ export default function Register() {
 
     setLoading(true);
     try {
-      await register(name, email, password);
-      toast.success(t('auth.registerSuccess'));
-      navigate('/dashboard');
+      const result = await register(name, email, password);
+      if (result?.needsVerification) {
+        setNeedsVerification(true);
+        toast.success(t('auth.verificationSent'));
+      } else {
+        toast.success(t('auth.registerSuccess'));
+        navigate('/dashboard');
+      }
     } catch (err) {
       toast.error(err.response?.data?.error || t('auth.registerFailed'));
     } finally {
@@ -60,6 +66,18 @@ export default function Register() {
             <BrandLogo size="lg" />
           </div>
 
+          {needsVerification ? (
+            <div className="text-center space-y-4">
+              <CheckCircle size={48} className="mx-auto text-green-400" />
+              <h2 className="text-2xl font-bold text-th-text">{t('auth.checkYourEmail')}</h2>
+              <p className="text-th-text-s">{t('auth.verificationSentDesc')}</p>
+              <p className="text-sm text-th-text-s font-medium">{email}</p>
+              <Link to="/login" className="btn-primary inline-flex items-center gap-2 mt-4">
+                {t('auth.login')}
+              </Link>
+            </div>
+          ) : (
+            <>
           <div className="mb-8">
             <h2 className="text-2xl font-bold text-th-text mb-2">{t('auth.createAccount')}</h2>
             <p className="text-th-text-s">
@@ -156,6 +174,8 @@ export default function Register() {
           <Link to="/" className="block mt-4 text-center text-sm text-th-text-s hover:text-th-text transition-colors">
             {t('auth.backToHome')}
           </Link>
+            </>
+          )}
         </div>
       </div>
     </div>