From 1ead83383debdace2ebf8f633cb73c42ab331e00 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sun, 12 Sep 2021 17:13:00 -0600
Subject: [PATCH] ui(admin): add 'root_admin' field to UserForm

---
 resources/scripts/api/admin/users/updateUser.ts   |  1 +
 .../components/admin/users/UserAboutContainer.tsx |  1 +
 .../scripts/components/admin/users/UserForm.tsx   | 15 ++++++++++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/resources/scripts/api/admin/users/updateUser.ts b/resources/scripts/api/admin/users/updateUser.ts
index 4b63b8a66..7b7657aa6 100644
--- a/resources/scripts/api/admin/users/updateUser.ts
+++ b/resources/scripts/api/admin/users/updateUser.ts
@@ -6,6 +6,7 @@ export interface Values {
     email: string;
     password: string;
     adminRoleId: number | null;
+    rootAdmin: boolean;
 }
 
 export default (id: number, values: Partial<Values>, include: string[] = []): Promise<User> => {
diff --git a/resources/scripts/components/admin/users/UserAboutContainer.tsx b/resources/scripts/components/admin/users/UserAboutContainer.tsx
index bae96aaac..b0363b2d6 100644
--- a/resources/scripts/components/admin/users/UserAboutContainer.tsx
+++ b/resources/scripts/components/admin/users/UserAboutContainer.tsx
@@ -43,6 +43,7 @@ const UserAboutContainer = () => {
                 email: user.email,
                 adminRoleId: user.adminRoleId,
                 password: '',
+                rootAdmin: user.rootAdmin,
             }}
             onSubmit={submit}
             role={user?.relationships.role || null}
diff --git a/resources/scripts/components/admin/users/UserForm.tsx b/resources/scripts/components/admin/users/UserForm.tsx
index 1f17b2b5d..f5f89f4d0 100644
--- a/resources/scripts/components/admin/users/UserForm.tsx
+++ b/resources/scripts/components/admin/users/UserForm.tsx
@@ -1,3 +1,4 @@
+import FormikSwitch from '@/components/elements/FormikSwitch';
 import React from 'react';
 import tw from 'twin.macro';
 import { action, Action, createContextStore } from 'easy-peasy';
@@ -5,7 +6,7 @@ import { User } from '@/api/admin/users/getUsers';
 import AdminBox from '@/components/admin/AdminBox';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Form, Formik, FormikHelpers } from 'formik';
-import { object, string } from 'yup';
+import { bool, object, string } from 'yup';
 import { Role } from '@/api/admin/roles/getRoles';
 import { Values } from '@/api/admin/users/updateUser';
 import Button from '@/components/elements/Button';
@@ -47,6 +48,7 @@ export default function UserForm ({ title, initialValues, children, onSubmit, ex
             email: '',
             password: '',
             adminRoleId: 0,
+            rootAdmin: false,
         };
     }
 
@@ -58,6 +60,7 @@ export default function UserForm ({ title, initialValues, children, onSubmit, ex
                 username: string().min(1).max(32),
                 email: string(),
                 password: exists ? string() : string().required(),
+                rootAdmin: bool().required(),
             })}
         >
             {
@@ -104,6 +107,16 @@ export default function UserForm ({ title, initialValues, children, onSubmit, ex
                                     </div>
                                 </div>
 
+                                <div css={tw`w-full flex flex-row mb-6`}>
+                                    <div css={tw`w-full bg-neutral-800 border border-neutral-900 shadow-inner mt-6 p-4 rounded`}>
+                                        <FormikSwitch
+                                            name={'rootAdmin'}
+                                            label={'Root Admin'}
+                                            description={'Should this user be a root administrator?'}
+                                        />
+                                    </div>
+                                </div>
+
                                 <div css={tw`w-full flex flex-row items-center mt-6`}>
                                     {children}
                                     <div css={tw`flex ml-auto`}>