self-service read only ui
This commit is contained in:
parent
685c928d2c
commit
fc6a2523f0
GPG key ID:
1BAFFE8347019C42
|
|
@ -1,5 +1,4 @@
|
|||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
import ThemeWrapper from '@/lib/components/ThemeWrapper';
|
||||
import './globals.css';
|
||||
import AuthWrapper from '@/lib/components/AuthWrapper';
|
||||
|
|
@ -7,8 +6,6 @@ import { getServerSession } from 'next-auth';
|
|||
import NavigationPanel from '@/lib/components/ui/NavigationPanel';
|
||||
import { Flex } from '@radix-ui/themes';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
|
|
@ -21,7 +18,7 @@ export default async function RootLayout({
|
|||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${inter.className} p-4`}>
|
||||
<body className={`p-4`}>
|
||||
<ThemeWrapper>
|
||||
<AuthWrapper session={await getServerSession()}>
|
||||
<Flex direction='row' gap='4'>
|
||||
|
|
|
|||
122
src/app/self-service/page.tsx
Normal file
122
src/app/self-service/page.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
"use client";
|
||||
|
||||
import { Card, Text, Heading, Flex, TextField, Button, IconButton, Popover, Link, Tabs, Box, Grid } from "@radix-ui/themes";
|
||||
import { CheckIcon, CopyIcon, InfoIcon, LockIcon, UserIcon } from "lucide-react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
|
||||
// TODO read these from environment
|
||||
const EMAIL_HOST = "mx1.amogus.cloud";
|
||||
const SMTP_PORT = "465";
|
||||
const IMAP_PORT = "993";
|
||||
const SMTP_SECURITY = "SSL/TLS";
|
||||
const IMAP_SECURITY = "SSL/TLS";
|
||||
|
||||
export default function SelfService() {
|
||||
const session = useSession().data;
|
||||
|
||||
function StaticValueField({ label, value }: { label: string, value: string }) {
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Text weight="light" size="2">{label}</Text>
|
||||
<TextField.Root>
|
||||
<TextField.Input disabled value={value} />
|
||||
<TextField.Slot>
|
||||
<IconButton
|
||||
size="1"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(value);
|
||||
setChecked(true);
|
||||
setTimeout(() => setChecked(false), 1000);
|
||||
}}
|
||||
>
|
||||
{checked
|
||||
? <CheckIcon width={16} height={16} />
|
||||
: <CopyIcon width={16} height={16} />
|
||||
}
|
||||
</IconButton>
|
||||
</TextField.Slot>
|
||||
</TextField.Root>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Heading className="pb-4">Account settings</Heading>
|
||||
|
||||
<Grid display="inline-grid" rows="1" columns="2" gap="4">
|
||||
<Card className="h-fit">
|
||||
<Heading size="3">Credentials</Heading>
|
||||
<Text weight="light" size="2">These are the details you can use to authenticate via SMTP and IMAP.</Text>
|
||||
|
||||
<Flex direction="column" gap="3" className="pt-2">
|
||||
<TextField.Root>
|
||||
<TextField.Slot>
|
||||
<UserIcon height="16" width="16" />
|
||||
</TextField.Slot>
|
||||
<TextField.Input disabled value={session?.user?.email ?? 'n/a'} />
|
||||
<TextField.Slot>
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
<IconButton asChild size="1" variant="ghost">
|
||||
<InfoIcon height="16" width="16" />
|
||||
</IconButton>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content className="w-96">
|
||||
<Text>
|
||||
Your username uniquely identifies your account and therefore cannot be changed. If you need a different email address, you can <Link onClick={() => alert("todo")}>request an alias</Link> instead.
|
||||
</Text>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
</TextField.Slot>
|
||||
</TextField.Root>
|
||||
|
||||
<Flex direction="row" gap="3">
|
||||
<TextField.Root className="flex-1">
|
||||
<TextField.Slot>
|
||||
<LockIcon height="16" width="16" />
|
||||
</TextField.Slot>
|
||||
<TextField.Input disabled value={"\u25CF".repeat(10)} />
|
||||
</TextField.Root>
|
||||
|
||||
<Button variant="outline">
|
||||
Change
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
<Card className="h-fit">
|
||||
<Heading size="3">Server configuration</Heading>
|
||||
<Text weight="light" size="2">You can use these details to log in using any mail client.</Text>
|
||||
|
||||
<Box pt="2">
|
||||
<Tabs.Root defaultValue="smtp">
|
||||
<Tabs.List size="2">
|
||||
<Tabs.Trigger value="smtp">Outgoing</Tabs.Trigger>
|
||||
<Tabs.Trigger value="imap">Incoming</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<Box pt="3" pb="2">
|
||||
<Tabs.Content value="smtp">
|
||||
<StaticValueField label="SMTP Server" value={EMAIL_HOST} />
|
||||
<StaticValueField label="SMTP Port" value={SMTP_PORT} />
|
||||
<StaticValueField label="Connection security" value={SMTP_SECURITY} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="imap">
|
||||
<StaticValueField label="IMAP Server" value={EMAIL_HOST} />
|
||||
<StaticValueField label="IMAP Port" value={IMAP_PORT} />
|
||||
<StaticValueField label="Connection security" value={IMAP_SECURITY} />
|
||||
</Tabs.Content>
|
||||
</Box>
|
||||
</Tabs.Root>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -40,7 +40,9 @@ export default function NavigationPanel() {
|
|||
</Card>
|
||||
|
||||
<Flex gap='2' direction='row' justify='end'>
|
||||
<Button variant="soft">Account</Button>
|
||||
<Link href="/self-service">
|
||||
<Button variant="soft">Account</Button>
|
||||
</Link>
|
||||
<Button variant="surface" onClick={() => signOut()}>Log out</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
|
|
|||
Loading…
Reference in a new issue