[PlatformAdmin] Add password setter component

web/src/common/form-backend-validation.ts

@@ -0,0 +1,12 @@
+import { AxiosError } from 'axios';
+import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+import { ProblemDetails } from './types';
+
+export const addFormValidationErrorsFromBackend = <T extends FieldValues>(
+  form: UseFormReturn<T>,
+  error: AxiosError<ProblemDetails>
+) => {
+  error?.response?.data.errors?.forEach((error) => {
+    form.setError(error.name as Path<T>, { type: 'custom', message: error.reason });
+  });
+};

web/src/components/PasswordSetterDialog/PasswordSetterDialog.tsx

@@ -0,0 +1,75 @@
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogTitle } from '@/components/ui/dialog';
+import { Form, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { PasswordInput } from '@/components/ui/password-input';
+import { UseFormReturn } from 'react-hook-form';
+import { PasswordSetterFormData } from './usePasswordSetterDialog';
+
+export interface CreateNGODialogProps {
+  displayName: string;
+  open: boolean;
+  internalOnOpenChange: (open: any) => void;
+  form: UseFormReturn<PasswordSetterFormData>;
+  onSubmit: (values: PasswordSetterFormData) => void;
+}
+
+function PasswordSetterDialog({ displayName, open, form, internalOnOpenChange, onSubmit }: CreateNGODialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={internalOnOpenChange} modal={true}>
+      <DialogContent
+        className='min-w-[650px]'
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+        onEscapeKeyDown={(e) => {
+          e.preventDefault();
+        }}>
+        <DialogTitle className='mb-3.5'>Set password for {displayName}</DialogTitle>
+        <div className='flex flex-col gap-3'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+              <FormField
+                control={form.control}
+                name='newPassword'
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <PasswordInput placeholder='Password' {...field} {...fieldState} />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='confirmNewPassword'
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Confirm password</FormLabel>
+                    <PasswordInput placeholder='Confirm password' {...field} {...fieldState} />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button className='text-purple-900 border border-purple-900 border-input bg-background hover:bg-purple-50 hover:text-purple-600'>
+                    Cancel
+                  </Button>
+                </DialogClose>
+                <Button title='Set password' type='submit' className='px-6'>
+                  Set password
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PasswordSetterDialog;

web/src/components/PasswordSetterDialog/usePasswordSetterDialog.ts

@@ -0,0 +1,105 @@
+import { authApi } from '@/common/auth-api';
+import { addFormValidationErrorsFromBackend } from '@/common/form-backend-validation';
+import { ProblemDetails } from '@/common/types';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useDialog } from '../ui/use-dialog';
+import { toast } from '../ui/use-toast';
+
+const passwordSetterSchema = z
+  .object({
+    newPassword: z.string().min(8, 'Password must be at least 8 characters long'),
+    confirmNewPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmNewPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmNewPassword'],
+  });
+
+type PasswordSetterUserInfoParams = {
+  userId: string;
+  displayName: string;
+};
+
+export type PasswordSetterFormData = z.infer<typeof passwordSetterSchema>;
+
+export const usePasswordSetterDialog = () => {
+  const [userId, setUserId] = useState<string>('');
+  const [displayName, setDisplayName] = useState<string>('');
+  const passwordSetterDialog = useDialog();
+  const { open, onOpenChange } = passwordSetterDialog.dialogProps;
+
+  const form = useForm<PasswordSetterFormData>({
+    resolver: zodResolver(passwordSetterSchema),
+    defaultValues: {
+      newPassword: '',
+      confirmNewPassword: '',
+    },
+  });
+
+  useEffect(() => {
+    if (form.formState.isSubmitSuccessful) {
+      form.reset(undefined, { keepValues: true });
+    }
+  }, [form.formState.isSubmitSuccessful]);
+
+  const internalOnOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        form.reset({
+          newPassword: '',
+          confirmNewPassword: '',
+        });
+      }
+      onOpenChange(open);
+    },
+    [onOpenChange]
+  );
+
+  const setPasswordMutation = useMutation({
+    mutationFn: (data: PasswordSetterFormData) => {
+      return authApi.post<PasswordSetterFormData>(`auth/set-password`, {
+        aspNetUserId: userId,
+        newPassword: data.newPassword,
+      });
+    },
+    onSuccess: () => {
+      form.reset({});
+      internalOnOpenChange(false);
+      toast({
+        title: 'Success',
+        description: 'Password set',
+      });
+    },
+
+    onError: (error: AxiosError<ProblemDetails>) => {
+      addFormValidationErrorsFromBackend<PasswordSetterFormData>(form, error);
+      toast({
+        title: 'Error setting password',
+        description: 'Please contact Platform admins',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const handlePasswordSet = (params: PasswordSetterUserInfoParams) => {
+    setUserId(params.userId);
+    setDisplayName(params.displayName);
+    passwordSetterDialog.trigger();
+  };
+
+  const onSubmit = (values: PasswordSetterFormData) => {
+    setPasswordMutation.mutate(values);
+  };
+
+  const passwordSetterDialogProps = { open, form, userId, displayName, onOpenChange, internalOnOpenChange, onSubmit };
+
+  return {
+    passwordSetterDialogProps,
+    handlePasswordSet,
+  };
+};

web/src/components/ui/input.tsx

@@ -1,17 +1,18 @@
-import { Input as HeadlessInput, type InputProps as HeadlessInputProps } from '@headlessui/react'
-import { clsx } from 'clsx'
-import { forwardRef } from 'react'
+import { Input as HeadlessInput, type InputProps as HeadlessInputProps } from '@headlessui/react';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 
-const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
-type DateType = (typeof dateTypes)[number]
+const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week'];
+type DateType = (typeof dateTypes)[number];
 
-export const Input = forwardRef<
-  HTMLInputElement,
-  { type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | DateType } & HeadlessInputProps
->(function Input({ className, ...props }, ref) {
+export type InputProps = {
+  type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | DateType;
+} & HeadlessInputProps;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({ className, ...props }, ref) {
   return (
     <span
-      data-slot="control"
+      data-slot='control'
       className={clsx([
         className,
 
@@ -32,8 +33,7 @@ export const Input = forwardRef<
 
         // Invalid state
         'before:has-[[data-invalid]]:shadow-red-500/10',
-      ])}
-    >
+      ])}>
       <HeadlessInput
         ref={ref}
         className={clsx([
@@ -78,5 +78,5 @@ export const Input = forwardRef<
         {...props}
       />
     </span>
-  )
-})
+  );
+});

web/src/components/ui/password-input.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@/components/ui/button';
+import { Input, InputProps } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+
+const PasswordInput = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const disabled = props['value'] === '' || props['value'] === undefined || props['disabled'];
+
+  return (
+    <div className='relative'>
+      <Input
+        type={showPassword ? 'text' : 'password'}
+        className={cn('hide-password-toggle pr-10', className)}
+        ref={ref}
+        {...props}
+      />
+      <Button
+        type='button'
+        variant='ghost'
+        size='sm'
+        className='absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent'
+        onClick={() => setShowPassword((prev) => !prev)}
+        disabled={disabled}>
+        {showPassword && !disabled ? (
+          <EyeIcon className='h-4 w-4' aria-hidden='true' />
+        ) : (
+          <EyeOffIcon className='h-4 w-4' aria-hidden='true' />
+        )}
+        <span className='sr-only'>{showPassword ? 'Hide password' : 'Show password'}</span>
+      </Button>
+
+      {/* hides browsers password toggles */}
+      <style>{`
+					.hide-password-toggle::-ms-reveal,
+					.hide-password-toggle::-ms-clear {
+						visibility: hidden;
+						pointer-events: none;
+						display: none;
+					}
+				`}</style>
+    </div>
+  );
+});
+PasswordInput.displayName = 'PasswordInput';
+
+export { PasswordInput };

web/src/features/ngos/components/admins/EditNgoAdmin.tsx

@@ -69,8 +69,8 @@ export const EditNgoAdmin: FC<EditNgoAdminProps> = ({ ngoAdmin }) => {
 
   const handleDelete = async () => {
     await deleteNgoAdminWithConfirmation({
-      adminId,
-      name: displayName,
+      userId: adminId,
+      displayName,
       onMutationSuccess: () => {
         navigate({ to: '/ngos/view/$ngoId/$tab', params: { ngoId, tab: 'admins' } });
       },

web/src/features/ngos/components/admins/NGOAdmins.tsx

@@ -1,3 +1,5 @@
+import PasswordSetterDialog from '@/components/PasswordSetterDialog/PasswordSetterDialog';
+import { usePasswordSetterDialog } from '@/components/PasswordSetterDialog/usePasswordSetterDialog';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { DataTableColumnHeader } from '@/components/ui/DataTable/DataTableColumnHeader';
@@ -36,6 +38,7 @@ export const NGOAdminsView: FC<NGOAdminsViewProps> = ({ ngoId }) => {
   const { isFilteringContainerVisible, toggleFilteringContainerVisibility } = useFilteringContainer();
   const addNgoAdminDialog = useDialog();
   const { queryParams, searchText, handleSearchInput } = useDebouncedSearch(Route.id, ngoAdminsSearchParamsSchema);
+  const { passwordSetterDialogProps, handlePasswordSet } = usePasswordSetterDialog();
 
   const navigateToViewNgoAdmin = useCallback(
     (adminId: string) => navigate({ to: '/ngos/admin/$ngoId/$adminId/view', params: { ngoId, adminId } }),
@@ -85,9 +88,9 @@ export const NGOAdminsView: FC<NGOAdminsViewProps> = ({ ngoId }) => {
     {
       id: 'actions',
       cell: ({ row }) => {
-        const adminId = row.original.id;
-        const adminName = `${row.original.firstName} ${row.original.lastName}`;
-        const isAdminActive = row.original.status === NgoAdminStatus.Active;
+        const userId = row.original.id;
+        const displayName = `${row.original.firstName} ${row.original.lastName}`;
+        const isUserActive = row.original.status === NgoAdminStatus.Active;
 
         return (
           <div className='text-right'>
@@ -99,22 +102,34 @@ export const NGOAdminsView: FC<NGOAdminsViewProps> = ({ ngoId }) => {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end'>
-                <DropdownMenuItem onClick={() => navigateToViewNgoAdmin(adminId)}>View</DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigateToEditNgoAdmin(adminId)}>Edit</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => navigateToViewNgoAdmin(userId)}>View</DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    navigateToEditNgoAdmin(userId);
+                  }}>
+                  Edit
+                </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={(e) => {
                     e.stopPropagation();
-                    isAdminActive
-                      ? deactivateNgoAdminMutation.mutate(adminId)
-                      : activateNgoAdminMutation.mutate(adminId);
+                    isUserActive ? deactivateNgoAdminMutation.mutate(userId) : activateNgoAdminMutation.mutate(userId);
                   }}>
-                  {!isAdminActive ? 'Activate' : 'Deactivate'}
+                  {!isUserActive ? 'Activate' : 'Deactivate'}
                 </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    handlePasswordSet({ userId, displayName });
+                  }}>
+                  Set password
+                </DropdownMenuItem>
+
                 <DropdownMenuItem
                   className='text-red-600'
                   onClick={async (e) => {
                     e.stopPropagation();
-                    await deleteNgoAdminWithConfirmation({ adminId, name: adminName });
+                    await deleteNgoAdminWithConfirmation({ userId, displayName });
                   }}>
                   Delete
                 </DropdownMenuItem>
@@ -158,6 +173,7 @@ export const NGOAdminsView: FC<NGOAdminsViewProps> = ({ ngoId }) => {
           queryParams={queryParams}
           // onRowClick={(id) => navigateToViewNgoAdmin(id)}
         />
+        <PasswordSetterDialog {...passwordSetterDialogProps} />
       </CardContent>
     </Card>
   );