From a7db52478c41a661eccedd6ef95e2a2ea389e49b Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Wed, 19 Apr 2023 09:54:55 +0200
Subject: [PATCH] [ENG 485] Improve create library dialog (#712)

* Move dialogs into router

* Prevent tab focus on show password button

* Add className props to radio group

* Add password strength meter to password input

* Add steps to dialog

* Update create library dialog

* Update select component

* Add select form field

* Add advanced options to create lib dialog

* Remove spacing

* Update checkbox styles

* Revert to single page, add checkbox & accordion, remove privacy

* Revert "Add className props to radio group"

This reverts commit e53e53cbdf6b57e8f5eb95ffe2a3a531fc6e2966.

* Move schema, switch to camel case

* Revert "Add steps to dialog"

This reverts commit e672e1c47258fb170c8670e3769ba0e66f3119de.

* Revert "Prevent tab focus on show password button"

This reverts commit d42e4dc9887aced63eb0b67eac4e56d5d96bb511.

* Add margin

* add debounce to password strength

* Update select
---
 .../settings/node/libraries/CreateDialog.tsx  | 347 +++++++++---------
 interface/app/index.tsx                       |   8 +-
 interface/app/onboarding/privacy.tsx          |   2 +-
 interface/index.tsx                           |   2 -
 packages/ui/package.json                      |   3 +-
 packages/ui/src/CheckBox.tsx                  |   6 +-
 packages/ui/src/Select.tsx                    | 101 ++---
 packages/ui/src/forms/FormField.tsx           |   5 +-
 packages/ui/src/forms/Input.tsx               | 107 +++++-
 packages/ui/src/forms/Select.tsx              |  24 ++
 packages/ui/src/forms/index.ts                |   1 +
 pnpm-lock.yaml                                | Bin 815131 -> 825577 bytes
 12 files changed, 369 insertions(+), 237 deletions(-)
 create mode 100644 packages/ui/src/forms/Select.tsx

diff --git a/interface/app/$libraryId/settings/node/libraries/CreateDialog.tsx b/interface/app/$libraryId/settings/node/libraries/CreateDialog.tsx
index c4aaca481..f35ddafaa 100644
--- a/interface/app/$libraryId/settings/node/libraries/CreateDialog.tsx
+++ b/interface/app/$libraryId/settings/node/libraries/CreateDialog.tsx
@@ -1,223 +1,222 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { ArrowsClockwise, Clipboard, Eye, EyeSlash, Info } from 'phosphor-react';
-import { useState } from 'react';
+import clsx from 'clsx';
+import { CaretRight } from 'phosphor-react';
+import { useEffect, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 import {
-	Algorithm,
 	HASHING_ALGOS,
-	HashingAlgoSlug,
+	LibraryConfigWrapped,
 	hashingAlgoSlugSchema,
 	useBridgeMutation,
 	usePlausibleEvent
 } from '@sd/client';
 import {
 	Button,
-	CheckBox,
 	Dialog,
-	Select,
+	RadixCheckbox,
 	SelectOption,
-	Tooltip,
 	UseDialogProps,
 	forms,
 	useDialog
 } from '@sd/ui';
-import { PasswordMeter } from '~/components/PasswordMeter';
-import { generatePassword } from '~/util';
 
-const { Input, z, useZodForm } = forms;
+const { Input, z, useZodForm, PasswordInput, Select } = forms;
 
-const schema = z.object({
-	name: z.string(),
-	password: z.string(),
-	password_validate: z.string(),
-	algorithm: z.string(),
-	hashing_algorithm: hashingAlgoSlugSchema,
-	share_telemetry: z.boolean()
-});
-
-export default (props: UseDialogProps) => {
-	const dialog = useDialog(props);
-	const submitPlausibleEvent = usePlausibleEvent();
-
-	const form = useZodForm({
-		schema,
-		defaultValues: {
-			password: '',
-			algorithm: 'XChaCha20Poly1305',
-			hashing_algorithm: 'Argon2id-s'
+const schema = z
+	.object({
+		name: z.string().min(1),
+		encryptLibrary: z.boolean(),
+		password: z.string(),
+		passwordValidate: z.string(),
+		algorithm: z.enum(['XChaCha20Poly1305', 'Aes256Gcm']),
+		hashingAlgorithm: hashingAlgoSlugSchema
+	})
+	.superRefine((data, ctx) => {
+		if (data.encryptLibrary && !data.password) {
+			ctx.addIssue({
+				code: 'custom',
+				path: ['password'],
+				message: 'Password is required'
+			});
+		}
+		if (data.password && data.password !== data.passwordValidate) {
+			ctx.addIssue({
+				code: 'custom',
+				path: ['passwordValidate'],
+				message: 'Passwords do not match'
+			});
 		}
 	});
 
-	const [showMasterPassword1, setShowMasterPassword1] = useState(false);
-	const [showMasterPassword2, setShowMasterPassword2] = useState(false);
-	const MP1CurrentEyeIcon = showMasterPassword1 ? EyeSlash : Eye;
-	const MP2CurrentEyeIcon = showMasterPassword2 ? EyeSlash : Eye;
-
+export default (props: UseDialogProps) => {
+	const dialog = useDialog(props);
+	const navigate = useNavigate();
 	const queryClient = useQueryClient();
+	const submitPlausibleEvent = usePlausibleEvent();
+
+	const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+
 	const createLibrary = useBridgeMutation('library.create', {
 		onSuccess: (library) => {
-			queryClient.setQueryData(['library.list'], (libraries: any) => [
-				...(libraries || []),
-				library
-			]);
+			queryClient.setQueryData(
+				['library.list'],
+				(libraries: LibraryConfigWrapped[] | undefined) => [...(libraries || []), library]
+			);
 
 			submitPlausibleEvent({
 				event: {
 					type: 'libraryCreate'
 				}
 			});
+
+			navigate(`/${library.uuid}/overview`);
 		},
-		onError: (err: any) => {
-			console.error(err);
+		onError: (err) => console.log(err)
+	});
+
+	const form = useZodForm({
+		schema: schema,
+		defaultValues: {
+			encryptLibrary: false,
+			password: '',
+			passwordValidate: '',
+			algorithm: 'XChaCha20Poly1305',
+			hashingAlgorithm: 'Argon2id-s'
 		}
 	});
 
 	const onSubmit = form.handleSubmit(async (data) => {
-		if (data.password !== data.password_validate) {
-			alert('Passwords are not the same');
-		} else {
-			await createLibrary.mutateAsync({
-				...data,
-				algorithm: data.algorithm as Algorithm,
-				hashing_algorithm: HASHING_ALGOS[data.hashing_algorithm],
-				auth: {
-					type: 'Password',
-					value: data.password
-				}
-			});
-		}
+		await createLibrary.mutateAsync({
+			name: data.name,
+			algorithm: data.algorithm,
+			hashing_algorithm: HASHING_ALGOS[data.hashingAlgorithm],
+			auth: {
+				type: 'Password',
+				value: data.encryptLibrary ? data.password : ''
+			}
+		});
 	});
 
+	const encryptLibrary = form.watch('encryptLibrary');
+
+	useEffect(() => {
+		if (showAdvancedOptions) setShowAdvancedOptions(false);
+	}, [encryptLibrary]);
+
 	return (
 		<Dialog
 			form={form}
 			onSubmit={onSubmit}
 			dialog={dialog}
-			title="Create New Library"
-			description="Choose a name for your new library, you can configure this and more settings from the library settings later on."
 			submitDisabled={!form.formState.isValid}
-			ctaLabel="Create"
+			title="Create New Library"
+			description="Libraries are a secure, on-device database. Your files remain where they are, the Library catalogs them and stores all Spacedrive related data."
+			ctaLabel={form.formState.isSubmitting ? 'Creating library...' : 'Create library'}
 		>
-			<Input
-				label="Library name"
-				placeholder="My Cool Library"
-				className="mt-2"
-				{...form.register('name', { required: true })}
-			/>
-
-			<div className="mt-3 mb-1 flex flex-row items-center">
-				<div className="space-x-2">
-					<CheckBox
-						className="bg-app-selected"
-						defaultChecked={true}
-						{...form.register('share_telemetry', { required: true })}
-					/>
-				</div>
-				<span className="mt-1 text-xs font-medium">Share anonymous usage</span>
-				<Tooltip label="Share completely anonymous telemetry data to help the developers improve the app">
-					<Info className="ml-1.5 h-4 w-4 text-ink-faint" />
-				</Tooltip>
-			</div>
-
-			{/* TODO: Proper UI for this. Maybe checkbox for encrypted or not and then reveal these fields. Select encrypted by default. */}
-			{/* <span className="text-sm">Make the secret key field empty to skip key setup.</span> */}
-
-			<div className="relative flex flex-col">
-				<p className="mt-2 mb-1 text-center text-[0.95rem] font-bold">Key Manager</p>
-				<div className="my-1 h-[2px] w-full bg-gray-500" />
-
+			<div className="mt-5 space-y-4">
 				<Input
-					label="Master password"
-					placeholder="Password"
-					type={showMasterPassword1 ? 'text' : 'password'}
-					className="mt-2"
-					{...form.register('password')}
-					right={
-						<div className="flex">
-							<Button
-								onClick={() => {
-									const password = generatePassword(32);
-
-									form.setValue('password', password);
-									form.setValue('password_validate', password);
-
-									setShowMasterPassword1(true);
-									setShowMasterPassword2(true);
-								}}
-								size="icon"
-							>
-								<ArrowsClockwise className="h-4 w-4" />
-							</Button>
-							<Button
-								onClick={() => {
-									navigator.clipboard.writeText(form.watch('password') as string);
-								}}
-								size="icon"
-							>
-								<Clipboard className="h-4 w-4" />
-							</Button>
-							<Button
-								onClick={() => setShowMasterPassword1(!showMasterPassword1)}
-								size="icon"
-							>
-								<MP1CurrentEyeIcon className="h-4 w-4" />
-							</Button>
-						</div>
-					}
+					{...form.register('name')}
+					label="Library name"
+					placeholder={'e.g. "James\' Library"'}
+					size="md"
 				/>
+
+				<Controller
+					control={form.control}
+					name="encryptLibrary"
+					render={({ field }) => (
+						<RadixCheckbox
+							checked={field.value}
+							onCheckedChange={field.onChange}
+							label="Encrypt Library"
+							name="encryptLibrary"
+						/>
+					)}
+				/>
+
+				{encryptLibrary && (
+					<>
+						<div className="border-b border-app-line" />
+
+						<PasswordInput
+							{...form.register('password')}
+							label="Password"
+							showStrength
+						/>
+						<PasswordInput
+							{...form.register('passwordValidate', {
+								onBlur: () => form.trigger('passwordValidate')
+							})}
+							label="Confirm password"
+						/>
+
+						<div className="rounded-md border border-app-line bg-app-overlay">
+							<Button
+								variant="bare"
+								className={clsx(
+									'flex w-full border-none !p-3',
+									showAdvancedOptions && 'rounded-b-none'
+								)}
+								onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
+							>
+								Advanced Settings
+								<CaretRight
+									weight="bold"
+									className={clsx(
+										'ml-1 transition',
+										showAdvancedOptions && 'rotate-90'
+									)}
+								/>
+							</Button>
+
+							{showAdvancedOptions && (
+								<div className="space-y-4 p-3 pt-0">
+									<div className="h-px bg-app-line" />
+									<Select
+										control={form.control}
+										name="algorithm"
+										label="Algorithm"
+										size="md"
+										className="!mt-3"
+									>
+										<SelectOption value="XChaCha20Poly1305">
+											XChaCha20-Poly1305
+										</SelectOption>
+										<SelectOption value="Aes256Gcm">AES-256-GCM</SelectOption>
+									</Select>
+
+									<Select
+										control={form.control}
+										name="hashingAlgorithm"
+										label="Hashing Algorithm"
+										size="md"
+									>
+										<SelectOption value="Argon2id-s">
+											Argon2id (standard)
+										</SelectOption>
+										<SelectOption value="Argon2id-h">
+											Argon2id (hardened)
+										</SelectOption>
+										<SelectOption value="Argon2id-p">
+											Argon2id (paranoid)
+										</SelectOption>
+										<SelectOption value="BalloonBlake3-s">
+											BLAKE3-Balloon (standard)
+										</SelectOption>
+										<SelectOption value="BalloonBlake3-h">
+											BLAKE3-Balloon (hardened)
+										</SelectOption>
+										<SelectOption value="BalloonBlake3-p">
+											BLAKE3-Balloon (paranoid)
+										</SelectOption>
+									</Select>
+								</div>
+							)}
+						</div>
+					</>
+				)}
 			</div>
-
-			<Input
-				label="Master password (again)"
-				placeholder="Password"
-				type={showMasterPassword2 ? 'text' : 'password'}
-				className="mt-2"
-				right={
-					<Button
-						onClick={() => setShowMasterPassword2(!showMasterPassword2)}
-						size="icon"
-					>
-						<MP2CurrentEyeIcon className="h-4 w-4" />
-					</Button>
-				}
-				{...form.register('password_validate')}
-			/>
-
-			<div className="mt-4 mb-3 grid w-full grid-cols-2 gap-4">
-				<div className="flex flex-col">
-					<span className="text-sm font-bold">Encryption</span>
-					<Select
-						className="mt-2"
-						value={form.watch('algorithm')}
-						onChange={(e) => form.setValue('algorithm', e)}
-					>
-						<SelectOption value="XChaCha20Poly1305">XChaCha20-Poly1305</SelectOption>
-						<SelectOption value="Aes256Gcm">AES-256-GCM</SelectOption>
-					</Select>
-				</div>
-				<div className="flex flex-col">
-					<span className="text-sm font-bold">Hashing</span>
-					<Select
-						className="mt-2"
-						value={form.watch('hashing_algorithm')}
-						onChange={(e) => form.setValue('hashing_algorithm', e as HashingAlgoSlug)}
-					>
-						<SelectOption value="Argon2id-s">Argon2id (standard)</SelectOption>
-						<SelectOption value="Argon2id-h">Argon2id (hardened)</SelectOption>
-						<SelectOption value="Argon2id-p">Argon2id (paranoid)</SelectOption>
-						<SelectOption value="BalloonBlake3-s">
-							BLAKE3-Balloon (standard)
-						</SelectOption>
-						<SelectOption value="BalloonBlake3-h">
-							BLAKE3-Balloon (hardened)
-						</SelectOption>
-						<SelectOption value="BalloonBlake3-p">
-							BLAKE3-Balloon (paranoid)
-						</SelectOption>
-					</Select>
-				</div>
-			</div>
-
-			<PasswordMeter password={form.watch('password')} />
 		</Dialog>
 	);
 };
diff --git a/interface/app/index.tsx b/interface/app/index.tsx
index 03b36590a..dd855d699 100644
--- a/interface/app/index.tsx
+++ b/interface/app/index.tsx
@@ -1,5 +1,6 @@
 import { Navigate, Outlet, RouteObject } from 'react-router-dom';
 import { currentLibraryCache, useCachedLibraries, useInvalidateQuery } from '@sd/client';
+import { Dialogs } from '@sd/ui';
 import { useKeybindHandler } from '~/hooks/useKeyboardHandler';
 import libraryRoutes from './$libraryId';
 import onboardingRoutes from './onboarding';
@@ -23,7 +24,12 @@ const Wrapper = () => {
 	useKeybindHandler();
 	useInvalidateQuery();
 
-	return <Outlet />;
+	return (
+		<>
+			<Outlet />
+			<Dialogs />
+		</>
+	);
 };
 
 // NOTE: all route `Layout`s below should contain
diff --git a/interface/app/onboarding/privacy.tsx b/interface/app/onboarding/privacy.tsx
index 5520fe3b4..1dccf1b64 100644
--- a/interface/app/onboarding/privacy.tsx
+++ b/interface/app/onboarding/privacy.tsx
@@ -5,7 +5,7 @@ import { Form, RadioGroup, useZodForm, z } from '@sd/ui/src/forms';
 import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './Layout';
 import { useUnlockOnboardingScreen } from './Progress';
 
-const shareTelemetry = RadioGroup.options([
+export const shareTelemetry = RadioGroup.options([
 	z.literal('share-telemetry'),
 	z.literal('no-telemetry')
 ]).details({
diff --git a/interface/index.tsx b/interface/index.tsx
index fe7473622..34f69f398 100644
--- a/interface/index.tsx
+++ b/interface/index.tsx
@@ -9,7 +9,6 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterProvider, RouterProviderProps } from 'react-router-dom';
 import { useDebugState } from '@sd/client';
-import { Dialogs } from '@sd/ui';
 import ErrorFallback from './ErrorFallback';
 
 export * from './util/keybind';
@@ -49,7 +48,6 @@ export const SpacedriveInterface = (props: { router: RouterProviderProps['router
 		<ErrorBoundary FallbackComponent={ErrorFallback}>
 			<Devtools />
 			<RouterProvider router={props.router} />
-			<Dialogs />
 		</ErrorBoundary>
 	);
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 47c740940..cda086203 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -41,7 +41,8 @@
 		"react-loading-icons": "^1.1.0",
 		"react-router-dom": "6.9.0",
 		"react-spring": "^9.5.5",
-		"tailwindcss-radix": "^2.6.0"
+		"tailwindcss-radix": "^2.6.0",
+		"use-debounce": "^9.0.4"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.19.3",
diff --git a/packages/ui/src/CheckBox.tsx b/packages/ui/src/CheckBox.tsx
index 394b1130e..6b82a1b2d 100644
--- a/packages/ui/src/CheckBox.tsx
+++ b/packages/ui/src/CheckBox.tsx
@@ -25,18 +25,18 @@ export interface RadixCheckboxProps extends ComponentProps<typeof Checkbox.Root>
 
 // TODO: Replace above with this, requires refactor of usage
 export const RadixCheckbox = (props: RadixCheckboxProps) => (
-	<div className="align-center flex">
+	<div className="flex items-center">
 		<Checkbox.Root
 			className="flex h-[17px] w-[17px] shrink-0 rounded-md bg-app-button"
 			id={props.name}
 			{...props}
 		>
 			<Checkbox.Indicator className="flex h-[17px] w-[17px] items-center justify-center rounded-md bg-accent">
-				<Check weight="bold" />
+				<Check weight="bold" size={14} />
 			</Checkbox.Indicator>
 		</Checkbox.Root>
 		{props.label && (
-			<label className=" ml-2 font-medium" htmlFor={props.name}>
+			<label className="ml-2 text-sm font-medium" htmlFor={props.name}>
 				{props.label}
 			</label>
 		)}
diff --git a/packages/ui/src/Select.tsx b/packages/ui/src/Select.tsx
index d77576875..58b8b7fc1 100644
--- a/packages/ui/src/Select.tsx
+++ b/packages/ui/src/Select.tsx
@@ -1,69 +1,86 @@
 import { ReactComponent as ChevronDouble } from '@sd/assets/svgs/chevron-double.svg';
-import * as SelectPrimitive from '@radix-ui/react-select';
+import * as RS from '@radix-ui/react-select';
+import { VariantProps, cva } from 'class-variance-authority';
 import clsx from 'clsx';
-import { CaretDown, Check } from 'phosphor-react';
+import { Check } from 'phosphor-react';
 import { PropsWithChildren } from 'react';
 
-interface SelectProps {
+export const selectStyles = cva(
+	[
+		'rounded-md border text-sm flex pl-3 pr-[10px] items-center justify-between',
+		'shadow-sm outline-none transition-all focus:ring-2',
+		'radix-placeholder:text-ink-faint'
+	],
+	{
+		variants: {
+			variant: {
+				default: [
+					'bg-app-input focus:bg-app-focus',
+					'border-app-line focus:border-app-divider/80',
+					'focus:ring-app-selected/30'
+				]
+			},
+
+			size: {
+				sm: 'h-[30px]',
+				md: 'h-[34px]',
+				lg: 'h-[38px]'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'sm'
+		}
+	}
+);
+
+export interface SelectProps extends VariantProps<typeof selectStyles> {
 	value: string;
-	size?: 'sm' | 'md' | 'lg';
-	className?: string;
 	onChange: (value: string) => void;
+	placeholder?: string;
+	className?: string;
 	disabled?: boolean;
 }
 
 export function Select(props: PropsWithChildren<SelectProps>) {
 	return (
-		<SelectPrimitive.Root
+		<RS.Root
 			defaultValue={props.value}
 			value={props.value}
 			onValueChange={props.onChange}
 			disabled={props.disabled}
 		>
-			<SelectPrimitive.Trigger
-				className={clsx(
-					'inline-flex items-center border bg-app-box py-0.5 pl-2',
-					'rounded-md border-app-line shadow shadow-app-shade/10 outline-none',
-					props.className
-				)}
-			>
-				<span className="grow truncate text-left text-xs">
-					<SelectPrimitive.Value />
-				</span>
+			<RS.Trigger className={selectStyles({ size: props.size, className: props.className })}>
+				<RS.Value placeholder={props.placeholder} />
+				<RS.Icon className="ml-2">
+					<ChevronDouble className="text-ink-dull" />
+				</RS.Icon>
+			</RS.Trigger>
 
-				<SelectPrimitive.Icon>
-					<ChevronDouble className="mr-0.5 h-3 w-3 text-ink-dull" />
-				</SelectPrimitive.Icon>
-			</SelectPrimitive.Trigger>
-
-			<SelectPrimitive.Portal className="relative">
-				<SelectPrimitive.Content className="absolute z-50 w-full rounded-md border border-app-line bg-app-box p-1 shadow-2xl shadow-app-shade/20 ">
-					<SelectPrimitive.ScrollUpButton className="hidden ">
-						<CaretDown />
-					</SelectPrimitive.ScrollUpButton>
-					<SelectPrimitive.Viewport>{props.children}</SelectPrimitive.Viewport>
-					<SelectPrimitive.ScrollDownButton className="hidden "></SelectPrimitive.ScrollDownButton>
-				</SelectPrimitive.Content>
-			</SelectPrimitive.Portal>
-		</SelectPrimitive.Root>
+			<RS.Portal>
+				<RS.Content className="z-50 rounded-md border border-app-line bg-app-box shadow-2xl shadow-app-shade/20 ">
+					<RS.Viewport className="p-1">{props.children}</RS.Viewport>
+				</RS.Content>
+			</RS.Portal>
+		</RS.Root>
 	);
 }
 
 export function SelectOption(props: PropsWithChildren<{ value: string; default?: boolean }>) {
 	return (
-		<SelectPrimitive.Item
-			className={clsx(
-				'relative flex items-center px-1 py-0.5 pl-6 pr-4 text-xs',
-				'font-sm cursor-pointer select-none rounded text-ink',
-				'hover:bg-accent hover:text-white focus:outline-none radix-disabled:opacity-50 '
-			)}
-			defaultChecked={props.default || false}
+		<RS.Item
 			value={props.value}
+			defaultChecked={props.default}
+			className={clsx(
+				'relative flex h-6 cursor-pointer select-none items-center rounded pl-6 pr-3',
+				'text-sm text-ink radix-highlighted:text-white',
+				'focus:outline-none radix-disabled:opacity-50 radix-highlighted:bg-accent '
+			)}
 		>
-			<SelectPrimitive.ItemText>{props.children}</SelectPrimitive.ItemText>
-			<SelectPrimitive.ItemIndicator className="absolute left-1 inline-flex items-center">
+			<RS.ItemText>{props.children}</RS.ItemText>
+			<RS.ItemIndicator className="absolute left-1 inline-flex items-center">
 				<Check className="h-4 w-4" />
-			</SelectPrimitive.ItemIndicator>
-		</SelectPrimitive.Item>
+			</RS.ItemIndicator>
+		</RS.Item>
 	);
 }
diff --git a/packages/ui/src/forms/FormField.tsx b/packages/ui/src/forms/FormField.tsx
index ba3812b10..2ca44a0de 100644
--- a/packages/ui/src/forms/FormField.tsx
+++ b/packages/ui/src/forms/FormField.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, useId } from 'react';
+import { PropsWithChildren, ReactNode, useId } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 export interface UseFormFieldProps extends PropsWithChildren {
@@ -19,9 +19,10 @@ export const useFormField = <P extends UseFormFieldProps>(props: P) => {
 	};
 };
 
-interface FormFieldProps extends UseFormFieldProps {
+interface FormFieldProps extends Omit<UseFormFieldProps, 'label'> {
 	id: string;
 	error?: string;
+	label?: string | ReactNode;
 }
 
 export const FormField = (props: FormFieldProps) => {
diff --git a/packages/ui/src/forms/Input.tsx b/packages/ui/src/forms/Input.tsx
index b046c8843..a8ed2c053 100644
--- a/packages/ui/src/forms/Input.tsx
+++ b/packages/ui/src/forms/Input.tsx
@@ -1,5 +1,10 @@
-import { forwardRef } from 'react';
+import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
+import zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
+import zxcvbnEnPackage from '@zxcvbn-ts/language-en';
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { useDebounce, useDebouncedCallback } from 'use-debounce';
 import * as Root from '../Input';
 import { FormField, UseFormFieldProps, useFormField } from './FormField';
 
@@ -17,16 +22,96 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
 	);
 });
 
-export const PasswordInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-	const { formFieldProps, childProps } = useFormField(props);
+export interface PasswordInputProps extends UseFormFieldProps, Root.InputProps {
+	name: string;
+	showStrength?: boolean;
+}
+
+const PasswordStrengthMeter = (props: { password: string }) => {
+	const [strength, setStrength] = useState<{ label: string; score: number }>();
+	const updateStrength = useDebouncedCallback(
+		() => setStrength(props.password ? getPasswordStrength(props.password) : undefined),
+		100
+	);
+
+	// TODO: Remove duplicate in @sd/client
+	function getPasswordStrength(password: string): { label: string; score: number } {
+		const ratings = ['Poor', 'Weak', 'Good', 'Strong', 'Perfect'];
+
+		zxcvbnOptions.setOptions({
+			dictionary: {
+				...zxcvbnCommonPackage.dictionary,
+				...zxcvbnEnPackage.dictionary
+			},
+			graphs: zxcvbnCommonPackage.adjacencyGraphs,
+			translations: zxcvbnEnPackage.translations
+		});
+
+		const result = zxcvbn(password);
+		return { label: ratings[result.score]!, score: result.score };
+	}
+
+	useEffect(() => updateStrength(), [props.password]);
 
 	return (
-		<FormField {...formFieldProps}>
-			<Root.PasswordInput
-				{...childProps}
-				ref={ref}
-				error={formFieldProps.error !== undefined}
-			/>
-		</FormField>
+		<div className="flex grow items-center justify-end">
+			{strength && (
+				<span
+					className={clsx(
+						'mr-2 text-xs',
+						strength.score === 0 && 'text-red-500',
+						strength.score === 1 && 'text-red-500',
+						strength.score === 2 && 'text-amber-400',
+						strength.score === 3 && 'text-lime-500',
+						strength.score === 4 && 'text-accent'
+					)}
+				>
+					{strength.label}
+				</span>
+			)}
+
+			<div className={clsx('h-[6px] w-1/4 rounded-full bg-app-selected')}>
+				{strength && (
+					<div
+						style={{
+							width: `${strength.score !== 0 ? strength.score * 25 : 12.5}%`
+						}}
+						className={clsx(
+							'h-full rounded-full',
+							strength.score === 0 && 'bg-red-500',
+							strength.score === 1 && 'bg-red-500',
+							strength.score === 2 && 'bg-amber-400',
+							strength.score === 3 && 'bg-lime-500',
+							strength.score === 4 && 'bg-accent'
+						)}
+					/>
+				)}
+			</div>
+		</div>
 	);
-});
+};
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+	({ showStrength, ...props }, ref) => {
+		const { formFieldProps, childProps } = useFormField(props);
+		const { watch } = useFormContext();
+
+		return (
+			<FormField
+				{...formFieldProps}
+				label={
+					<>
+						{formFieldProps.label}
+						{showStrength && <PasswordStrengthMeter password={watch(props.name)} />}
+					</>
+				}
+			>
+				<Root.PasswordInput
+					{...childProps}
+					ref={ref}
+					error={formFieldProps.error !== undefined}
+				/>
+			</FormField>
+		);
+	}
+);
diff --git a/packages/ui/src/forms/Select.tsx b/packages/ui/src/forms/Select.tsx
new file mode 100644
index 000000000..96f167d60
--- /dev/null
+++ b/packages/ui/src/forms/Select.tsx
@@ -0,0 +1,24 @@
+import { FieldValues, UseControllerProps, useController } from 'react-hook-form';
+import * as Root from '../Select';
+import { FormField, UseFormFieldProps, useFormField } from './FormField';
+
+export interface SelectProps<T extends FieldValues>
+	extends Omit<UseFormFieldProps, 'name'>,
+		Omit<Root.SelectProps, 'value' | 'onChange'>,
+		UseControllerProps<T> {}
+
+export const Select = <T extends FieldValues>(props: SelectProps<T>) => {
+	const { formFieldProps, childProps } = useFormField(props);
+	const { field } = useController({ name: props.name });
+
+	return (
+		<FormField {...formFieldProps}>
+			<Root.Select
+				{...childProps}
+				className="w-full"
+				value={field.value}
+				onChange={field.onChange}
+			/>
+		</FormField>
+	);
+};
diff --git a/packages/ui/src/forms/index.ts b/packages/ui/src/forms/index.ts
index 35f5f502e..c60e36a1a 100644
--- a/packages/ui/src/forms/index.ts
+++ b/packages/ui/src/forms/index.ts
@@ -3,4 +3,5 @@ export * from './FormField';
 export * from './CheckBox';
 export * from './Input';
 export * from './Switch';
+export * from './Select';
 export * as RadioGroup from './RadioGroup';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cad70ee098b644d2174406ff6bfeccbcf58f0eaa..ed8de25439c9e1f4e0cab838f9e487e9b89a2fc4 100644
GIT binary patch
delta 7261
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
a%L^yXt*E+X;;j%f-j>d%T?v2h-v0pt-hcf7

delta 6685
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
TJv4${s5S4~$+jm2S62ToTR@bw