Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/admin.users.tsx

@@ -189,7 +189,7 @@ function UsersPage() {
                   <TableHead>Email</TableHead>
                   <TableHead>Role</TableHead>
                   <TableHead className="w-[140px]">Hourly rate</TableHead>
-                  <TableHead className="w-[80px]"></TableHead>
+                  <TableHead className="w-[120px] text-right">Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -315,6 +315,69 @@ function RateInput({
 }
 
 
+function SetPasswordDialog({ userId, email }: { userId: string; email: string }) {
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    const { error } = await supabase.functions.invoke("admin-set-password", {
+      body: { user_id: userId, password },
+    });
+    setSubmitting(false);
+    if (error) {
+      toast.error("Could not change password", { description: error.message });
+      return;
+    }
+    toast.success("Password updated", {
+      description: "Share the new password securely with the user.",
+    });
+    setPassword("");
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="icon" title="Change password">
+          <KeyRound className="h-4 w-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="font-serif">Change password</DialogTitle>
+          <DialogDescription>
+            Set a new password for {email}. Share it with them through a secure channel.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="new-password">New password</Label>
+            <Input
+              id="new-password"
+              type="text"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              minLength={10}
+              required
+              autoFocus
+            />
+            <p className="text-xs text-muted-foreground">Min 10 characters.</p>
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={submitting}>
+              {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Update password
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function InviteDialog({ onCreated }: { onCreated: () => void }) {
   const [email, setEmail] = useState("");
   const [fullName, setFullName] = useState("");