From 68b61bceae49f4470cd1c1bbc5bbc519b54439bd Mon Sep 17 00:00:00 2001
From: Nazarii-4chain <150656925+Nazarii-4chain@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:06:25 +0300
Subject: [PATCH] feat(SPV-955): Changed field type on login page (#999)

---
 src/components/ui/form/form.tsx | 108 +++++++++++++-
 src/components/ui/form/index.ts |   8 --
 src/components/ui/index.ts      |   1 +
 src/routes/login.tsx            | 244 +++++++++++++++++++++-----------
 4 files changed, 270 insertions(+), 91 deletions(-)

diff --git a/src/components/ui/form/form.tsx b/src/components/ui/form/form.tsx
index 287908ec..ee5a1152 100644
--- a/src/components/ui/form/form.tsx
+++ b/src/components/ui/form/form.tsx
@@ -1,3 +1,107 @@
-import { FormProvider } from 'react-hook-form';
+import { useFormField } from '@/components';
+import { Label } from '@/components/ui/label.tsx';
 
-export const Form = FormProvider;
+import { cn } from '@/lib/utils.ts';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider } from 'react-hook-form';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+export const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+export const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  },
+);
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return <p ref={ref} id={formDescriptionId} className={cn('text-sm text-muted-foreground', className)} {...props} />;
+  },
+);
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p ref={ref} id={formMessageId} className={cn('text-sm font-medium text-destructive', className)} {...props}>
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = 'FormMessage';
+
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
diff --git a/src/components/ui/form/index.ts b/src/components/ui/form/index.ts
index fb019b2b..3374ff56 100644
--- a/src/components/ui/form/index.ts
+++ b/src/components/ui/form/index.ts
@@ -1,10 +1,2 @@
-export * from './form-control.tsx';
-export * from './form-description.tsx';
-export * from './form-field-context.tsx';
-export * from './form-field.tsx';
-export * from './form-item.tsx';
-export * from './form-item-context.tsx';
-export * from './form-label.tsx';
-export * from './form-message.tsx';
 export * from './form.tsx';
 export * from './use-form-field.tsx';
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 8d089e55..2c2edebd 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -6,6 +6,7 @@ export * from './calendar.tsx';
 export * from './card.tsx';
 export * from './dialog.tsx';
 export * from './dropdown-menu.tsx';
+export * from './form';
 export * from './input.tsx';
 export * from './label.tsx';
 export * from './popover.tsx';
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index 512358d6..e11f55cf 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -5,8 +5,12 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
   Input,
-  Label,
   ModeToggle,
   RadioGroup,
   RadioGroupItem,
@@ -22,20 +26,33 @@ import { Role, useAuth, useSpvWalletClient } from '@/contexts';
 import logger from '@/logger';
 import { createClient, getShortXprv } from '@/utils';
 import { useConfig } from '@4chain-ag/react-configuration';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useRouter, useSearch } from '@tanstack/react-router';
 
-import React, { useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { toast } from 'sonner';
+import { z } from 'zod';
 
 export const Route = createFileRoute('/login')({
   component: LoginForm,
 });
 
+const formSchema = z.object({
+  role: z.enum([Role.User, Role.Admin]),
+  type: z.enum(['xPriv', 'Access Key']).optional(),
+  key: z.string({
+    required_error: 'This field is required',
+  }),
+  serverUrl: z.string({
+    required_error: 'Server URL is required',
+  }),
+});
+
 export function LoginForm() {
-  const [role, setRole] = useState<Role>(Role.Admin);
-  const [key, setKey] = useState('');
-  const [userOption, setUserOption] = useState<string>('xPriv');
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const { setSpvWalletClient, serverUrl, setServerUrl } = useSpvWalletClient();
 
   const { isAuthenticated, setLoginKey, isAdmin, isUser } = useAuth();
@@ -45,7 +62,31 @@ export function LoginForm() {
   const { config } = useConfig();
   const { configureServerUrl = false } = config;
 
-  React.useLayoutEffect(() => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      role: Role.Admin,
+      type: 'xPriv',
+      key: '',
+      serverUrl: serverUrl,
+    },
+  });
+
+  const ShowPasswordIcon = isPasswordVisible ? EyeSlashIcon : EyeIcon;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const currentRole = form.getValues('role');
+  const currentType = form.getValues('type');
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [currentRole, currentType]);
+
+  useLayoutEffect(() => {
     if (isAuthenticated && search?.redirect) {
       router.history.push(search.redirect);
     } else if (isAdmin) {
@@ -55,19 +96,12 @@ export function LoginForm() {
     }
   }, [isAuthenticated, search?.redirect]);
 
-  const handleSelect = (value: string) => {
-    setRole(value as Role);
-  };
-
-  const onChangeKey = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setKey(e.target.value);
+  const handleTogglePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev);
+    inputRef.current?.focus();
   };
 
-  const onChangeServerUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setServerUrl(e.target.value);
-  };
-
-  const handleSignIn = async () => {
+  const onSubmit = async ({ role, key }: z.infer<typeof formSchema>) => {
     setServerUrl(serverUrl);
 
     try {
@@ -79,7 +113,11 @@ export function LoginForm() {
       await router.invalidate();
     } catch (error) {
       logger.error(error);
-      toast.error('xPriv or Access Key is invalid');
+      if (role === Role.Admin) {
+        toast.error('Admin Key is invalid');
+      } else {
+        toast.error('xPriv or Access Key is invalid');
+      }
     }
   };
 
@@ -92,70 +130,114 @@ export function LoginForm() {
         <div className="flex flex-col items-center justify-center border-r">
           <h1 className="text-2xl font-bold mb-16">SPV Wallet Admin</h1>
           <Card className="w-full max-w-sm">
-            <CardHeader>
-              <CardTitle className="text-2xl">Login</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-4">
-              <div className="grid gap-2">
-                <Label htmlFor="role">Role</Label>
-                <Select defaultValue={role} onValueChange={handleSelect}>
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Role" />
-                  </SelectTrigger>
-                  <SelectContent defaultValue={role}>
-                    <SelectItem value={Role.Admin}>Admin</SelectItem>
-                    <SelectItem value={Role.User}>User</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid gap-2">
-                {Role.Admin === role ? (
-                  <>
-                    <Label htmlFor="key" className="flex items-center">
-                      Admin Key (xpriv)
-                    </Label>
-                    <Input id="key" value={key} type="text" placeholder="Admin Key" onChange={onChangeKey} />
-                  </>
-                ) : (
-                  Role.User === role && (
-                    <>
-                      <Label className="flex items-center">Key</Label>
-                      <RadioGroup defaultValue={userOption} onValueChange={setUserOption}>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem defaultChecked value="xPriv" content="xPriv" id="xPrivUser" />
-                          <Label htmlFor="xPrivUser">xPriv</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="Access Key" content="Access Key" id="accessKeyUser" />
-                          <Label htmlFor="accessKeyUser">Access Key</Label>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <CardHeader>
+                  <CardTitle className="text-2xl">Login</CardTitle>
+                </CardHeader>
+                <CardContent className="grid">
+                  <FormField
+                    control={form.control}
+                    name="role"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Role</FormLabel>
+                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                          <FormControl>
+                            <SelectTrigger className="w-full">
+                              <SelectValue placeholder="Select a role" defaultValue={field.value} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent defaultValue={field.value}>
+                            <SelectItem value={Role.Admin}>Admin</SelectItem>
+                            <SelectItem value={Role.User}>User</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormItem>
+                    )}
+                  />
+                  {currentRole === Role.User && (
+                    <FormField
+                      control={form.control}
+                      name="type"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Key</FormLabel>
+                          <FormControl>
+                            <RadioGroup defaultValue={field.value} className="mb-2" onValueChange={field.onChange}>
+                              <FormItem className="flex items-center space-x-3 space-y-0">
+                                <FormControl>
+                                  <RadioGroupItem value="xPriv" />
+                                </FormControl>
+                                <FormLabel className="ml-2">xPriv</FormLabel>
+                              </FormItem>
+                              <FormItem className="flex items-center space-x-3 space-y-0">
+                                <FormControl>
+                                  <RadioGroupItem value="Access Key" />
+                                </FormControl>
+                                <FormLabel className="ml-2">Access Key</FormLabel>
+                              </FormItem>
+                            </RadioGroup>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                  <FormField
+                    control={form.control}
+                    name="key"
+                    render={({ field }) => (
+                      <FormItem className="mt-2">
+                        {currentRole === Role.Admin && <FormLabel>Admin Key (xpriv)</FormLabel>}
+                        <div className="relative">
+                          <FormControl>
+                            <Input
+                              {...field}
+                              ref={inputRef}
+                              className="pr-12"
+                              type={isPasswordVisible ? 'text' : 'password'}
+                              placeholder={
+                                currentRole === Role.Admin
+                                  ? 'Admin Key'
+                                  : currentType === 'xPriv'
+                                    ? 'xPriv'
+                                    : 'Access Key'
+                              }
+                            />
+                          </FormControl>
+                          <ShowPasswordIcon
+                            className="size-5 absolute top-2.5 right-3.5 cursor-pointer"
+                            onClick={handleTogglePasswordVisibility}
+                          />
                         </div>
-                      </RadioGroup>
-                      <Input
-                        value={key}
-                        type="text"
-                        placeholder={userOption === 'xPriv' ? 'xPriv' : 'Access Key'}
-                        onChange={onChangeKey}
-                      />
-                    </>
-                  )
-                )}
-
-                {configureServerUrl && (
-                  <>
-                    <Label htmlFor="server-url" className="flex items-center">
-                      Server Url
-                    </Label>
-                    <Input id="server-url" value={serverUrl} onChange={onChangeServerUrl} type="text" placeholder="" />
-                  </>
-                )}
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button onClick={handleSignIn} className="w-full">
-                Sign in
-              </Button>
-            </CardFooter>
-            <Toaster position="bottom-center" />
+                      </FormItem>
+                    )}
+                  />
+                  {configureServerUrl && (
+                    <FormField
+                      control={form.control}
+                      name="serverUrl"
+                      render={({ field }) => (
+                        <FormItem className="mt-2">
+                          <FormLabel>Server Url</FormLabel>
+                          <div className="relative">
+                            <FormControl>
+                              <Input {...field} placeholder="Server Url" />
+                            </FormControl>
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </CardContent>
+                <CardFooter>
+                  <Button type="submit" className="w-full">
+                    Sign in
+                  </Button>
+                </CardFooter>
+                <Toaster position="bottom-center" />
+              </form>
+            </Form>
           </Card>
         </div>
         <div className="flex justify-center">