Deploy Echo Sense full-stack app to Docker Space

React frontend + Flask API on port 7860 with SQLite and embedded ChromaDB.

README.md

@@ -39,13 +39,12 @@ Add these in **Settings → Repository secrets** on Hugging Face:
 
 ## Demo accounts
 
-Register a patient from the app. Create a counselor via API:
+Register a **patient** or **counselor** from the login page:
 
-```bash
-curl -X POST https://hamzavelous-echosense-ai.hf.space/api/auth/register-counselor \
-  -H "Content-Type: application/json" \
-  -d '{"full_name":"Dr. Smith","email":"counselor@echo.local","password":"counselor123"}'
-```
+- **Patient:** Login → *Create patient account* → `/register`
+- **Counselor:** Login → *Register as counselor* → `/register/counselor`
+
+Pre-seeded admin (from container startup): `admin@echo.local` / `admin123`
 
 ## Local development
 

backend/app/modules/auth/routes.py

@@ -102,14 +102,22 @@ def refresh():
 
 
 @auth_bp.post("/register-counselor")
-@limiter.limit("5 per hour")
+@limiter.limit("10 per hour")
 def register_counselor():
-    """Bootstrap endpoint for demo — create counselor accounts."""
     data = request.get_json() or {}
     if not all(data.get(f) for f in ["full_name", "email", "password"]):
-        return jsonify({"error": "Missing fields"}), 400
+        return jsonify({"error": "Missing required fields"}), 400
+
+    phone = (data.get("phone") or "").strip() or None
+    if phone:
+        phone_digits = "".join(c for c in phone if c.isdigit())
+        if len(phone_digits) < 10:
+            return jsonify({"error": "Invalid phone number"}), 400
+        if not phone.startswith("+"):
+            phone = f"+{phone_digits}"
+
     if User.query.filter_by(email=data["email"].lower()).first():
-        return jsonify({"error": "Email exists"}), 409
+        return jsonify({"error": "Email already registered"}), 409
 
     user = User(
         email=data["email"].lower(),
@@ -122,11 +130,22 @@ def register_counselor():
         user_id=user.id,
         counselor_id=generate_counselor_id(),
         full_name=data["full_name"],
-        phone=data.get("phone"),
-        specialization=data.get("specialization", "General Counseling"),
+        phone=phone,
+        specialization=(data.get("specialization") or "General Counseling").strip(),
     )
     db.session.add(counselor)
+    audit_log(user.id, "REGISTER", "counselor", {"counselor_id": counselor.counselor_id})
     db.session.commit()
+
     access = create_access_token(identity=str(user.id), additional_claims={"role": user.role.value})
     refresh = create_refresh_token(identity=str(user.id))
-    return jsonify({"access_token": access, "refresh_token": refresh}), 201
+    return jsonify({
+        "access_token": access,
+        "refresh_token": refresh,
+        "user": {"id": user.id, "email": user.email, "role": user.role.value},
+        "counselor": {
+            "counselor_id": counselor.counselor_id,
+            "full_name": counselor.full_name,
+            "specialization": counselor.specialization,
+        },
+    }), 201

deploy/hf/README.md

@@ -39,13 +39,12 @@ Add these in **Settings → Repository secrets** on Hugging Face:
 
 ## Demo accounts
 
-Register a patient from the app. Create a counselor via API:
+Register a **patient** or **counselor** from the login page:
 
-```bash
-curl -X POST https://hamzavelous-echosense-ai.hf.space/api/auth/register-counselor \
-  -H "Content-Type: application/json" \
-  -d '{"full_name":"Dr. Smith","email":"counselor@echo.local","password":"counselor123"}'
-```
+- **Patient:** Login → *Create patient account* → `/register`
+- **Counselor:** Login → *Register as counselor* → `/register/counselor`
+
+Pre-seeded admin (from container startup): `admin@echo.local` / `admin123`
 
 ## Local development
 

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { useAuth } from '@/context/AuthContext'
 import { homeRouteForRole } from '@/config/navigation'
 import Login from '@/pages/Login'
 import Register from '@/pages/Register'
+import CounselorRegister from '@/pages/CounselorRegister'
 import PatientChat from '@/pages/PatientChat'
 import TherapyPlan from '@/pages/TherapyPlan'
 import CopingTools from '@/pages/CopingTools'
@@ -27,6 +28,7 @@ export default function App() {
     <Routes>
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
+      <Route path="/register/counselor" element={<CounselorRegister />} />
       <Route path="/chat" element={<PrivateRoute roles={['PATIENT']}><PatientChat /></PrivateRoute>} />
       <Route path="/journal" element={<PrivateRoute roles={['PATIENT']}><Journal /></PrivateRoute>} />
       <Route path="/session-request" element={<PrivateRoute roles={['PATIENT']}><SessionRequestPage /></PrivateRoute>} />

frontend/src/context/AuthContext.tsx

@@ -13,6 +13,7 @@ interface AuthCtx {
   loading: boolean
   login: (email: string, password: string) => Promise<unknown>
   register: (form: Record<string, unknown>) => Promise<unknown>
+  registerCounselor: (form: Record<string, unknown>) => Promise<unknown>
   logout: () => void
   setProfile: (p: Record<string, unknown> | null) => void
 }
@@ -57,6 +58,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return data
   }
 
+  const registerCounselor = async (form: Record<string, unknown>) => {
+    const { data } = await api.post('/api/auth/register-counselor', form)
+    localStorage.setItem('access_token', data.access_token)
+    localStorage.setItem('refresh_token', data.refresh_token)
+    localStorage.setItem('user', JSON.stringify(data.user))
+    localStorage.setItem('profile', JSON.stringify(data.counselor))
+    setUser(data.user)
+    setProfile(data.counselor)
+    return data
+  }
+
   const logout = () => {
     localStorage.clear()
     setUser(null)
@@ -64,7 +76,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <AuthContext.Provider value={{ user, profile, loading, login, register, logout, setProfile }}>
+    <AuthContext.Provider value={{ user, profile, loading, login, register, registerCounselor, logout, setProfile }}>
       {children}
     </AuthContext.Provider>
   )

frontend/src/pages/CounselorRegister.tsx

@@ -0,0 +1,131 @@
+import { motion } from 'framer-motion'
+import { Link, useNavigate } from 'react-router-dom'
+import { Heart, Stethoscope } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { Alert } from '@/components/ui/alert'
+import { useState } from 'react'
+import { useAuth } from '@/context/AuthContext'
+import PhoneInput, { formatFullPhone } from '@/components/PhoneInput'
+import { homeRouteForRole } from '@/config/navigation'
+
+const SPECIALIZATIONS = [
+  'General Counseling',
+  'Crisis Intervention',
+  'Anxiety & Depression',
+  'Trauma & PTSD',
+  'Youth Counseling',
+  'Family Therapy',
+  'Other',
+]
+
+export default function CounselorRegister() {
+  const [form, setForm] = useState({
+    full_name: '',
+    email: '',
+    password: '',
+    specialization: SPECIALIZATIONS[0],
+  })
+  const [phoneDialCode, setPhoneDialCode] = useState('+92')
+  const [phoneLocal, setPhoneLocal] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { registerCounselor } = useAuth()
+  const navigate = useNavigate()
+
+  const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
+    setForm({ ...form, [k]: e.target.value })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    const phoneDigits = phoneLocal.replace(/\D/g, '')
+    if (phoneDigits.length > 0 && phoneDigits.length < 7) {
+      setError('Please enter a valid phone number (at least 7 digits), or leave it blank.')
+      return
+    }
+    const phone = phoneDigits.length >= 7 ? formatFullPhone(phoneDialCode, phoneLocal) : undefined
+    setLoading(true)
+    try {
+      const data = await registerCounselor({ ...form, phone }) as { user: { role: string } }
+      navigate(homeRouteForRole(data.user.role))
+    } catch {
+      setError('Registration failed. Email may already be in use.')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-calm-50 via-background to-secondary/30">
+      <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} className="w-full max-w-lg">
+        <div className="text-center mb-6">
+          <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 mb-2">
+            <Stethoscope className="h-6 w-6 text-primary" />
+          </div>
+          <h1 className="text-xl font-semibold text-calm-900">Counselor registration</h1>
+          <p className="text-sm text-muted-foreground">Join Echo Sense as a licensed support professional</p>
+        </div>
+        <Card className="shadow-lg shadow-calm-900/5">
+          <CardHeader>
+            <CardTitle>Create counselor account</CardTitle>
+            <CardDescription>Access triage, patient navigator, and decision workspace tools</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {error && <Alert className="mb-4">{error}</Alert>}
+            <form onSubmit={handleSubmit} className="grid gap-3 sm:grid-cols-2">
+              <div className="space-y-2 sm:col-span-2">
+                <Label>Full name</Label>
+                <Input value={form.full_name} onChange={set('full_name')} required placeholder="Dr. Jane Smith" />
+              </div>
+              <div className="space-y-2 sm:col-span-2">
+                <Label>Email</Label>
+                <Input type="email" value={form.email} onChange={set('email')} required placeholder="counselor@clinic.com" />
+              </div>
+              <div className="space-y-2 sm:col-span-2">
+                <Label>Password</Label>
+                <Input type="password" value={form.password} onChange={set('password')} required minLength={6} />
+              </div>
+              <div className="space-y-2 sm:col-span-2">
+                <Label htmlFor="counselor-phone">Phone (optional)</Label>
+                <PhoneInput
+                  id="counselor-phone"
+                  dialCode={phoneDialCode}
+                  localNumber={phoneLocal}
+                  onDialCodeChange={setPhoneDialCode}
+                  onLocalNumberChange={setPhoneLocal}
+                />
+              </div>
+              <div className="space-y-2 sm:col-span-2">
+                <Label>Specialization</Label>
+                <select
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+                  value={form.specialization}
+                  onChange={set('specialization')}
+                >
+                  {SPECIALIZATIONS.map((s) => (
+                    <option key={s} value={s}>{s}</option>
+                  ))}
+                </select>
+              </div>
+              <Button type="submit" className="sm:col-span-2 mt-2" disabled={loading}>
+                {loading ? 'Creating account...' : 'Register as counselor'}
+              </Button>
+            </form>
+            <p className="text-center text-sm text-muted-foreground mt-4">
+              Already registered?{' '}
+              <Link to="/login" className="text-primary hover:underline">Sign in</Link>
+            </p>
+            <p className="text-center text-sm text-muted-foreground mt-2">
+              Registering as a patient?{' '}
+              <Link to="/register" className="text-primary hover:underline inline-flex items-center gap-1">
+                <Heart className="h-3.5 w-3.5" /> Patient sign up
+              </Link>
+            </p>
+          </CardContent>
+        </Card>
+      </motion.div>
+    </div>
+  )
+}

frontend/src/pages/Login.tsx

@@ -79,10 +79,16 @@ export default function Login() {
                 {loading ? 'Signing in...' : 'Sign in'}
               </Button>
             </form>
-            <p className="text-center text-sm text-muted-foreground mt-6">
-              New patient?{' '}
-              <Link to="/register" className="text-primary font-medium hover:underline">Create account</Link>
-            </p>
+            <div className="text-center text-sm text-muted-foreground mt-6 space-y-2">
+              <p>
+                New patient?{' '}
+                <Link to="/register" className="text-primary font-medium hover:underline">Create patient account</Link>
+              </p>
+              <p>
+                Counselor?{' '}
+                <Link to="/register/counselor" className="text-primary font-medium hover:underline">Register as counselor</Link>
+              </p>
+            </div>
           </CardContent>
         </Card>
       </motion.div>

frontend/src/pages/Register.tsx

@@ -107,6 +107,10 @@ export default function Register() {
             <p className="text-center text-sm text-muted-foreground mt-4">
               Already registered? <Link to="/login" className="text-primary hover:underline">Sign in</Link>
             </p>
+            <p className="text-center text-sm text-muted-foreground mt-2">
+              Registering as a counselor?{' '}
+              <Link to="/register/counselor" className="text-primary hover:underline">Counselor sign up</Link>
+            </p>
           </CardContent>
         </Card>
       </motion.div>