2022-12-06 18:49:38 +01:00
|
|
|
import { Fragment, useState } from "react";
|
|
|
|
|
import { Disclosure, Menu, Switch, Transition } from "@headlessui/react";
|
|
|
|
|
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
|
|
|
|
import {
|
|
|
|
|
Bars3Icon,
|
|
|
|
|
BellIcon,
|
|
|
|
|
CogIcon,
|
|
|
|
|
CreditCardIcon,
|
|
|
|
|
KeyIcon,
|
|
|
|
|
SquaresPlusIcon,
|
|
|
|
|
UserCircleIcon,
|
|
|
|
|
XMarkIcon,
|
2022-12-08 16:06:16 +01:00
|
|
|
UsersIcon,
|
2022-12-06 18:49:38 +01:00
|
|
|
} from "@heroicons/react/24/outline";
|
2023-01-04 15:04:28 +01:00
|
|
|
import { useRouter } from "next/router";
|
|
|
|
|
import Link from "next/link";
|
2023-01-04 16:28:32 +01:00
|
|
|
import Head from "next/head";
|
2023-01-12 14:37:39 +01:00
|
|
|
import avatarFromInitials from "avatar-from-initials";
|
2023-01-19 14:13:21 +01:00
|
|
|
import { useSession } from "next-auth/react";
|
|
|
|
|
import { User } from "next-auth";
|
|
|
|
|
import { Value } from "sass";
|
2022-12-06 18:49:38 +01:00
|
|
|
|
|
|
|
|
const subNavigation = [
|
2023-01-04 15:04:28 +01:00
|
|
|
{
|
|
|
|
|
name: "Profile",
|
|
|
|
|
href: "/settings/profile",
|
|
|
|
|
icon: UserCircleIcon,
|
|
|
|
|
current: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Password",
|
|
|
|
|
href: "/settings/password",
|
|
|
|
|
icon: KeyIcon,
|
|
|
|
|
current: false,
|
|
|
|
|
},
|
2022-12-06 18:49:38 +01:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
function classNames(...classes: any) {
|
|
|
|
|
return classes.filter(Boolean).join(" ");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function Setttings() {
|
2023-01-19 14:13:21 +01:00
|
|
|
const session = useSession();
|
|
|
|
|
let user = session.data?.user;
|
2022-12-06 18:49:38 +01:00
|
|
|
|
2023-01-04 15:04:28 +01:00
|
|
|
const router = useRouter();
|
|
|
|
|
subNavigation.forEach((element) => {
|
|
|
|
|
element.current = element.href == router.route;
|
|
|
|
|
});
|
|
|
|
|
|
2022-12-06 18:49:38 +01:00
|
|
|
return (
|
|
|
|
|
<div>
|
2023-01-04 16:28:32 +01:00
|
|
|
<Head>
|
|
|
|
|
<title>Settings | Documenso</title>
|
|
|
|
|
</Head>
|
2022-12-06 19:45:18 +01:00
|
|
|
<header className="py-10">
|
|
|
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
|
|
|
<h1 className="text-3xl font-bold leading-tight tracking-tight text-brown">
|
2022-12-06 19:46:54 +01:00
|
|
|
Settings
|
2022-12-06 19:45:18 +01:00
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
2022-12-06 18:49:38 +01:00
|
|
|
<div className="mx-auto max-w-screen-xl px-4 pb-6 sm:px-6 lg:px-8 lg:pb-16">
|
|
|
|
|
<div className="overflow-hidden rounded-lg bg-white shadow">
|
|
|
|
|
<div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
|
|
|
|
|
<aside className="py-6 lg:col-span-3">
|
|
|
|
|
<nav className="space-y-1">
|
|
|
|
|
{subNavigation.map((item) => (
|
2023-01-04 15:04:28 +01:00
|
|
|
<Link
|
2022-12-06 18:49:38 +01:00
|
|
|
key={item.name}
|
|
|
|
|
href={item.href}
|
|
|
|
|
className={classNames(
|
|
|
|
|
item.current
|
2023-01-19 14:13:21 +01:00
|
|
|
? "bg-teal-50 border-neon-dark text-teal-700 hover:bg-teal-50 hover:text-teal-700"
|
2022-12-06 18:49:38 +01:00
|
|
|
: "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900",
|
|
|
|
|
"group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
|
|
|
|
|
)}
|
|
|
|
|
aria-current={item.current ? "page" : undefined}
|
|
|
|
|
>
|
|
|
|
|
<item.icon
|
|
|
|
|
className={classNames(
|
|
|
|
|
item.current
|
|
|
|
|
? "text-teal-500 group-hover:text-teal-500"
|
|
|
|
|
: "text-gray-400 group-hover:text-gray-500",
|
|
|
|
|
"flex-shrink-0 -ml-1 mr-3 h-6 w-6"
|
|
|
|
|
)}
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
/>
|
|
|
|
|
<span className="truncate">{item.name}</span>
|
2023-01-04 15:04:28 +01:00
|
|
|
</Link>
|
2022-12-06 18:49:38 +01:00
|
|
|
))}
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<form
|
|
|
|
|
className="divide-y divide-gray-200 lg:col-span-9"
|
|
|
|
|
action="#"
|
|
|
|
|
method="POST"
|
|
|
|
|
>
|
|
|
|
|
{/* Profile section */}
|
|
|
|
|
<div className="py-6 px-4 sm:p-6 lg:pb-8">
|
|
|
|
|
<div>
|
|
|
|
|
<h2 className="text-lg font-medium leading-6 text-gray-900">
|
|
|
|
|
Profile
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="mt-1 text-sm text-gray-500">
|
2023-01-04 14:41:10 +01:00
|
|
|
Let people know who they are dealing with builds trust.
|
2022-12-06 18:49:38 +01:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="mt-6 grid grid-cols-12 gap-6">
|
|
|
|
|
<div className="col-span-12 sm:col-span-6">
|
|
|
|
|
<label
|
|
|
|
|
htmlFor="first-name"
|
|
|
|
|
className="block text-sm font-medium text-gray-700"
|
|
|
|
|
>
|
2023-01-12 13:21:32 +01:00
|
|
|
Full Name
|
2022-12-06 18:49:38 +01:00
|
|
|
</label>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="first-name"
|
|
|
|
|
id="first-name"
|
2023-01-19 14:13:21 +01:00
|
|
|
value={user?.name || ""}
|
|
|
|
|
onChange={() => {}}
|
2022-12-06 18:49:38 +01:00
|
|
|
autoComplete="given-name"
|
2023-01-11 19:51:22 +01:00
|
|
|
className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
|
2022-12-06 18:49:38 +01:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="col-span-12 sm:col-span-6">
|
|
|
|
|
<label
|
2023-01-12 13:21:32 +01:00
|
|
|
htmlFor="first-name"
|
2022-12-06 18:49:38 +01:00
|
|
|
className="block text-sm font-medium text-gray-700"
|
|
|
|
|
>
|
2023-01-12 13:21:32 +01:00
|
|
|
Email
|
2022-12-06 18:49:38 +01:00
|
|
|
</label>
|
|
|
|
|
<input
|
2023-01-12 13:21:32 +01:00
|
|
|
disabled
|
2023-01-19 14:18:04 +01:00
|
|
|
value={user?.email!}
|
2022-12-06 18:49:38 +01:00
|
|
|
type="text"
|
2023-01-12 13:21:32 +01:00
|
|
|
name="first-name"
|
|
|
|
|
id="first-name"
|
|
|
|
|
autoComplete="given-name"
|
2023-01-11 19:51:22 +01:00
|
|
|
className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
|
2022-12-06 18:49:38 +01:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
