devist 0.10.0

Project bootstrap CLI for AI-assisted development. Spin up new projects from templates, manage backends, and keep your codebase comprehensible.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/AuthContext";
import { useState } from "react";
import { Link } from "react-router-dom";

type Mode = "signin" | "signup";

export default function Login() {
  const { signIn, signUp } = useAuth();
  const [mode, setMode] = useState<Mode>("signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [status, setStatus] = useState<"idle" | "submitting" | "needs-confirm" | "error">(
    "idle",
  );
  const [errorMsg, setErrorMsg] = useState("");

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!email.trim() || !password) return;
    setStatus("submitting");
    setErrorMsg("");
    if (mode === "signin") {
      const { error } = await signIn(email.trim(), password);
      if (error) {
        setStatus("error");
        setErrorMsg(error.message);
      }
      // success → AuthContext picks up session → RedirectIfAuthed bounces to /dashboard
    } else {
      const { error, needsConfirmation } = await signUp(email.trim(), password);
      if (error) {
        setStatus("error");
        setErrorMsg(error.message);
      } else if (needsConfirmation) {
        setStatus("needs-confirm");
      }
      // success without confirmation → session is set automatically
    }
  }

  function toggleMode() {
    setMode(mode === "signin" ? "signup" : "signin");
    setStatus("idle");
    setErrorMsg("");
  }

  const submitting = status === "submitting";

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-6">
      <div className="w-full max-w-sm space-y-6">
        <div className="space-y-1">
          <Link to="/" className="text-xs text-muted-foreground hover:text-foreground">
            ← back to home
          </Link>
          <h1 className="text-2xl font-bold">
            {mode === "signin" ? "Sign in" : "Create account"}
          </h1>
          <p className="text-sm text-muted-foreground">
            {mode === "signin"
              ? "Welcome back to devist."
              : "Sign up to start observing your projects."}
          </p>
        </div>

        <form onSubmit={onSubmit} className="space-y-3">
          <input
            type="email"
            required
            placeholder="you@example.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={submitting}
            autoComplete="email"
            className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          />
          <input
            type="password"
            required
            minLength={6}
            placeholder="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            disabled={submitting}
            autoComplete={mode === "signin" ? "current-password" : "new-password"}
            className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          />
          <Button type="submit" className="w-full" disabled={submitting}>
            {submitting
              ? mode === "signin"
                ? "Signing in…"
                : "Creating account…"
              : mode === "signin"
                ? "Sign in"
                : "Create account"}
          </Button>
        </form>

        {status === "needs-confirm" && (
          <p className="text-sm text-green-600">
            Confirmation email sent. Click the link to finish creating your account.
          </p>
        )}
        {status === "error" && (
          <p className="text-sm text-red-600">{errorMsg}</p>
        )}

        <div className="text-sm text-center text-muted-foreground">
          {mode === "signin" ? (
            <>
              No account?{" "}
              <button
                type="button"
                onClick={toggleMode}
                className="underline underline-offset-2 hover:text-foreground"
              >
                Create one
              </button>
            </>
          ) : (
            <>
              Have an account?{" "}
              <button
                type="button"
                onClick={toggleMode}
                className="underline underline-offset-2 hover:text-foreground"
              >
                Sign in
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}