first commit

2026-10-08 02:41:41 +05:30 · 2026-10-08 02:41:41 +05:30 · d416fe4cce
commit d416fe4cce
69 changed files with 8269 additions and 0 deletions
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@ -0,0 +1,111 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuth } from '@/context/AuthContext'
+import type { IdentifierType } from '@/lib/crypto'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+
+const identifierOptions: Array<{ label: string; value: IdentifierType }> = [
+  { label: 'Email', value: 'email' },
+  { label: 'Username', value: 'username' },
+  { label: 'Mobile number', value: 'mobile' },
+]
+
+export function LoginPage() {
+  const navigate = useNavigate()
+  const { signIn } = useAuth()
+  const [identifierType, setIdentifierType] = useState<IdentifierType>('email')
+  const [identifier, setIdentifier] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsSubmitting(true)
+    setError('')
+
+    try {
+      await signIn({ identifierType, identifier, password })
+      navigate('/workspace')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Authentication failed.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center p-6 sm:p-10 lg:p-16">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl">Welcome back</CardTitle>
+          <CardDescription>
+            Sign in to access your encrypted workspace.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="identifier-type">Identifier type</Label>
+              <select
+                id="identifier-type"
+                value={identifierType}
+                onChange={(e) => setIdentifierType(e.target.value as IdentifierType)}
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              >
+                {identifierOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="identifier">
+                {identifierType === 'email' ? 'Email' : identifierType === 'username' ? 'Username' : 'Mobile number'}
+              </Label>
+              <Input
+                id="identifier"
+                value={identifier}
+                onChange={(e) => setIdentifier(e.target.value)}
+                placeholder={identifierType === 'mobile' ? '+15555550123' : 'Enter your identifier'}
+                autoComplete={identifierType === 'email' ? 'email' : 'off'}
+                required
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                autoComplete="current-password"
+                required
+              />
+            </div>
+
+            {error && <p className="text-sm text-destructive">{error}</p>}
+
+            <Button type="submit" disabled={isSubmitting} className="w-full">
+              {isSubmitting ? 'Signing in...' : 'Sign in'}
+            </Button>
+          </form>
+
+          <div className="mt-4 text-center text-sm text-muted-foreground">
+            Don&apos;t have an account?{' '}
+            <Link to="/signup" className="text-primary underline-offset-4 hover:underline">
+              Sign up
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}