librecloud/web
3
2
Fork 0
Code Issues Pull Requests Packages Projects 3 Releases Wiki Activity

ui: various qol/design improvements

Browse Source
This commit is contained in:
Aidan 2025-03-11 11:31:53 -04:00
parent 2659539af0
commit e77770e16b
5 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/account/layout.tsx
View File

@ -6,7 +6,7 @@ export default function AccountLayout({
children: React.ReactNode
}) {
return (
<div className="min-h-screen bg-gray-900">{children}</div>
<div className="min-h-screen bg-background">{children}</div>
)
}

18
app/account/login/page.tsx
View File

@ -1,9 +1,10 @@
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { auth, signIn } from "@/auth"
import { redirect } from "next/navigation";
import { SiAuthentik } from "react-icons/si"
import { UserPlus } from "lucide-react"
export default async function Login() {
const session = await auth()
@ -16,8 +17,7 @@ export default async function Login() {
<div className="flex h-screen items-center justify-center">
<Card className="w-full max-w-md">
<CardHeader>
<CardTitle>Log in to your account</CardTitle>
<CardDescription>If you still have a p0ntus mail account, select &#34;I don&apos;t have an account&#34;</CardDescription>
<CardTitle className="text-4xl text-center">LibreCloud</CardTitle>
</CardHeader>
<CardContent>
<form
@ -28,16 +28,20 @@ export default async function Login() {
}}
>
<Button type="submit" className="w-full">
<SiAuthentik className="h-4 w-4" />
<SiAuthentik />
Sign in with Authentik
</Button>
<div className="text-center">
<Link href="/account/signup" className="text-sm underline">
I don&apos;t have an account
<Button variant="outline" className="w-full">
<UserPlus />
Create an Account
</Button>
</Link>
</div>
</form>
</CardContent>
<CardFooter className="text-center">
<p className="text-sm text-muted-foreground -mt-3">If you still have a p0ntus mail account, select &#34;Create an Account&#34;</p>
</CardFooter>
</Card>
</div>
)

2
app/account/signup/page.tsx
View File

@ -417,7 +417,7 @@ export default function Signup() {
</Select>
</div>
<p className="text-xs text-muted-foreground">
A username for Authentik will be generated based on your email. Contact support if a username isn&apos;t available.
A username for Authentik will be generated based on your email. <Link href="mailto:support@librecloud.cc" className="underline">Contact support</Link> if a username isn&apos;t available.
</p>
</div>
<div className="space-y-2">

21
components/cards/dashboard/Settings/ChangePassword.tsx
View File

@ -1,11 +1,11 @@
"use client";
"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";
import React, { 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 { Mail, Key, Loader } from "lucide-react"
export function ChangePassword() {
const [newPassword, setNewPassword] = useState("");
@ -46,8 +46,9 @@ export function ChangePassword() {
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>
<CardTitle className="flex items-center"><Mail size={18} className="mr-1" /> Change Email Password</CardTitle>
<CardDescription>Please note, this will <b>NOT</b> change your Authentik password.</CardDescription>
{/* TODO: please tell me you added password resets to authentik by now */}
</CardHeader>
<CardContent>
<form onSubmit={handlePasswordChange} className="space-y-4">
@ -61,7 +62,7 @@ export function ChangePassword() {
/>
</div>
<Button type="submit" disabled={loading}>
{loading ? "Changing..." : "Change Password"}
{loading ? <><Loader className="animate-spin" /> Changing...</> : <><Key /> Change Password</>}
</Button>
{message && <p className="text-sm text-center">{message}</p>}
</form>