feat: add password reset api and form, add settings page

README.md

@@ -1,6 +1,6 @@
 # web
 
-![Last Update](https://img.shields.io/badge/last_update-16_Feb_2024-blue)
+![Last Update](https://img.shields.io/badge/last_update-24_Feb_2024-blue)
 [![License: CC0-1.0](https://img.shields.io/badge/License-CC0_1.0-lightgrey.svg)](http://creativecommons.org/publicdomain/zero/1.0/)
 [![Build Status](https://git.pontusmail.org/librecloud/web/actions/workflows/docker.yaml/badge.svg)](https://git.pontusmail.org/librecloud/web/actions/?workflow=docker.yaml)
 [![Build Status](https://git.pontusmail.org/librecloud/web/actions/workflows/ci.yaml/badge.svg)](https://git.pontusmail.org/librecloud/web/actions/?workflow=ci.yaml)

app/account/dashboard/settings/page.tsx

@@ -2,6 +2,10 @@
 
 import { motion } from "framer-motion"
 import { SideMenu } from "@/components/pages/dashboard/SideMenu"
+//import { Switch } from "@/components/ui/switch"
+//import { Label } from "@/components/ui/label"
+//import { Card } from "@/components/ui/card"
+import { ChangePassword } from "@/components/cards/dashboard/Settings/ChangePassword"
 
 const fadeIn = {
   initial: { opacity: 0, y: 20 },
@@ -17,7 +21,50 @@ export default function Settings() {
         <div className="container mx-auto px-4 py-6 w-full">
           <motion.div {...fadeIn}>
             <h1 className="text-3xl font-bold mb-6 text-foreground">Settings</h1>
-            <p>Coming soon</p>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <ChangePassword />
+              {/* DISABLED FOR NOW
+              <Card className="p-6">
+                <h2 className="text-xl font-semibold mb-4">UI Settings</h2>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="hide-ai">Hide Generative AI</Label>
+                    <Switch id="hide-ai" />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="hide-upgrades">Hide all upgrades/roles</Label>
+                    <Switch id="hide-upgrades" />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="hide-crypto">Hide crypto exchange</Label>
+                    <Switch id="hide-crypto" />
+                  </div>
+                </div>
+              </Card>
+
+              <Card className="p-6">
+                <h2 className="text-xl font-semibold mb-4">Notifications</h2>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="hide-ai">Enable Notification System</Label>
+                    <Switch id="hide-ai" />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="hide-upgrades">Browser Notifications (coming soon)</Label>
+                    <Switch id="hide-upgrades" disabled />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="hide-crypto">Hide crypto exchange</Label>
+                    <Switch id="hide-crypto" />
+                  </div>
+                </div>
+              </Card>
+              */}
+            </div>
           </motion.div>
         </div>
       </main>

app/api/mail/password/route.ts

@@ -0,0 +1,45 @@
+import { auth } from "@/auth"
+import { NextResponse } from "next/server"
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth()
+    const body = await request.json()
+    const { password } = body
+
+    if (!session || !session.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    } else if (!password || typeof password !== "string") {
+      return NextResponse.json({ error: "Invalid password" }, { status: 400 })
+    }
+
+    const { email } = session.user
+
+    const response = await fetch(`${process.env.MAIL_CONNECT_API_URL}/accounts/update/password`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email: email, password: password }),
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({ error: "Failed to Update" }, { status: response.status })
+    }
+
+    const resData = await response.json()
+
+    if (resData.success) {
+      return NextResponse.json({ success: true })
+    } else if (resData.success === false) {
+      return NextResponse.json({ error: "Failed to Update" }, { status: 400 })
+    } else {
+      if (resData.error) { console.log("Error:", resData.error) } // sorry, i like this style
+      return NextResponse.json({ error: "Failed to Update" }, { status: 500 })
+    }
+  } catch (error) {
+    console.error("mail-connect API error:", error)
+    return NextResponse.json({ error: "Server error" }, { status: 500 })
+  }
+}
+

components/cards/dashboard/Settings/ChangePassword.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
+
+export function ChangePassword() {
+  const [newPassword, setNewPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const handlePasswordChange = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+    try {
+      const response = await fetch("/api/mail/password", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ password: newPassword }),
+      });
+      const resData = await response.json();
+
+      if (response.ok && resData.success) {
+        setMessage("Password Updated");
+        setLoading(false);
+      } else if (resData.error) {
+        setMessage(resData.error);
+        setLoading(false);
+      } else {
+        setMessage("[1] Failed to Update");
+        setLoading(false);
+      }
+    } catch (error) {
+      console.log(error)
+      setMessage("[2] Failed to Update");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Change Email Password</CardTitle>
+        <CardDescription>Please note, this will <b>NOT</b> change your Authentik password. You can change that <Link href="">here</Link>.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handlePasswordChange} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="new-password">New Password</Label>
+            <Input
+              id="new-password"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+            />
+          </div>
+          <Button type="submit" disabled={loading}>
+            {loading ? "Changing..." : "Change Password"}
+          </Button>
+          {message && <p className="text-sm text-center">{message}</p>}
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default ChangePassword;