From 669c8d737795b6445678ffe7803438c0aac8c5ff Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 3 Mar 2021 13:56:03 -0500
Subject: [PATCH] add create user page

---
 src/components/view-header/ViewHeader.tsx |   4 +-
 src/user/UserForm.tsx                     | 228 +++++++++++++++++-----
 src/user/UsersTabs.tsx                    | 167 ++++++++--------
 src/user/messages.json                    |  13 +-
 4 files changed, 278 insertions(+), 134 deletions(-)

diff --git a/src/components/view-header/ViewHeader.tsx b/src/components/view-header/ViewHeader.tsx
index 4f25de5a8c..7e74fa2d8d 100644
--- a/src/components/view-header/ViewHeader.tsx
+++ b/src/components/view-header/ViewHeader.tsx
@@ -27,6 +27,7 @@ export type ViewHeaderProps = {
   badge?: string;
   badgeId?: string;
   badgeIsRead?: boolean;
+  dividerComponent?: "div" | "hr" | "li" | undefined;
   subKey: string;
   actionsDropdownId?: string;
   subKeyLinkProps?: FormattedLinkProps;
@@ -43,6 +44,7 @@ export const ViewHeader = ({
   badge,
   badgeId,
   badgeIsRead,
+  dividerComponent,
   subKey,
   subKeyLinkProps,
   dropdownItems,
@@ -157,7 +159,7 @@ export const ViewHeader = ({
           />
         )}
       </PageSection>
-      <Divider />
+      <Divider component={dividerComponent} />
     </>
   );
 };
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 349365197a..4945fa5a1e 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -1,88 +1,226 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   ActionGroup,
   Button,
   FormGroup,
+  Select,
+  SelectOption,
+  Switch,
   TextArea,
   TextInput,
-//   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { UseFormMethods } from "react-hook-form";
-
+import { Controller, UseFormMethods } from "react-hook-form";
+import { useHistory } from "react-router-dom";
 import { FormAccess } from "../components/form-access/FormAccess";
 import UserRepresentation from "keycloak-admin/lib/defs/userRepresentation";
-// import { RoleFormType } from "./RealmRoleTabs";
+import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useRealm } from "../context/realm-context/RealmContext";
 
 export type UserFormProps = {
   form: UseFormMethods<UserRepresentation>;
   save: (user: UserRepresentation) => void;
-  editMode: boolean;
-  reset: () => void;
 };
 
-export const UserForm = ({
-  form,
-  save,
-  editMode,
-  reset,
-}: UserFormProps) => {
+export const UserForm = ({ form, save }: UserFormProps) => {
   const { t } = useTranslation("users");
+  const { realm } = useRealm();
+
+  const [
+    isRequiredUserActionsDropdownOpen,
+    setRequiredUserActionsDropdownOpen,
+  ] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
+  const history = useHistory();
+
+  const requiredUserActionsOptions = [
+    <SelectOption key={0} value="Configure OTP">
+      {t("configureOTP")}
+    </SelectOption>,
+    <SelectOption key={1} value="Update Password">
+      {t("updatePassword")}
+    </SelectOption>,
+    <SelectOption key={2} value="Update Profile">
+      {t("updateProfile")}
+    </SelectOption>,
+    <SelectOption key={3} value="Verify Email">
+      {t("verifyEmail")}
+    </SelectOption>,
+    <SelectOption key={4} value="Update User Locale">
+      {t("updateUserLocale")}
+    </SelectOption>,
+  ];
+
+  const clearSelection = () => {
+    setSelected([]);
+    setRequiredUserActionsDropdownOpen(false);
+  };
+
   return (
     <FormAccess
       isHorizontal
       onSubmit={form.handleSubmit(save)}
-      role="manage-realm"
+      role="manage-users"
       className="pf-u-mt-lg"
     >
       <FormGroup
-        label={t("roleName")}
-        fieldId="kc-name"
+        label={t("username")}
+        fieldId="kc-username"
         isRequired
-        // validated={form.errors.name ? "error" : "default"}
+        validated={form.errors.username ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
         <TextInput
-          ref={form.register({ required: !editMode })}
+          ref={form.register()}
           type="text"
-          id="kc-name"
-          name="name"
-          isReadOnly={editMode}
+          id="kc-username"
+          name="username"
         />
       </FormGroup>
       <FormGroup
-        label={t("common:description")}
+        label={t("email")}
         fieldId="kc-description"
-        // validated={
-        //   form.errors.description
-        //     ? ValidatedOptions.error
-        //     : ValidatedOptions.default
-        // }
-        // helperTextInvalid={form.errors.description?.message}
+        validated={form.errors.email ? "error" : "default"}
+        helperTextInvalid={form.errors.email?.message}
       >
-        <TextArea
-          name="description"
-          ref={form.register({
-            maxLength: {
-              value: 255,
-              message: t("common:maxLength", { length: 255 }),
-            },
-          })}
+        <TextInput
+          ref={form.register()}
           type="text"
-        //   validated={
-        //     form.errors.description
-        //       ? ValidatedOptions.error
-        //       : ValidatedOptions.default
-        //   }
-          id="kc-role-description"
+          id="kc-email"
+          name="email"
         />
       </FormGroup>
+      <FormGroup
+        label={t("emailVerified")}
+        fieldId="kc-email-verified"
+        helperTextInvalid={t("common:required")}
+        labelIcon={
+          <HelpItem
+            helpText={t("emailVerifiedHelpText")}
+            forLabel={t("emailVerified")}
+            forID="email-verified"
+          />
+        }
+      >
+        <Controller
+          name="user-email-verified"
+          defaultValue={false}
+          control={form.control}
+          render={({ onChange, value }) => (
+            <Switch
+              id={"kc-user-email-verified"}
+              isDisabled={false}
+              onChange={(value) => onChange([`${value}`])}
+              isChecked={value[0] === "true"}
+              label={t("common:on")}
+              labelOff={t("common:off")}
+            />
+          )}
+        ></Controller>
+      </FormGroup>
+      <FormGroup
+        label={t("firstName")}
+        fieldId="kc-firstname"
+        validated={form.errors.firstName ? "error" : "default"}
+        helperTextInvalid={t("common:required")}
+      >
+        <TextInput
+          ref={form.register()}
+          type="text"
+          id="kc-firstname"
+          name="firstname"
+        />
+      </FormGroup>
+      <FormGroup
+        label={t("lastName")}
+        fieldId="kc-name"
+        validated={form.errors.lastName ? "error" : "default"}
+      >
+        <TextInput
+          ref={form.register()}
+          type="text"
+          id="kc-lastname"
+          name="lastname"
+        />
+      </FormGroup>
+      <FormGroup
+        label={t("common:enabled")}
+        fieldId="kc-enabled"
+        labelIcon={
+          <HelpItem
+            helpText={t("disabledHelpText")}
+            forLabel={t("enabled")}
+            forID="enabled-label"
+          />
+        }
+      >
+        <Controller
+          name="user-enabled"
+          defaultValue={false}
+          control={form.control}
+          render={({ onChange, value }) => (
+            <Switch
+              id={"kc-user-enabled"}
+              isDisabled={false}
+              onChange={(value) => onChange([`${value}`])}
+              isChecked={value[0] === "true"}
+              label={t("common:on")}
+              labelOff={t("common:off")}
+            />
+          )}
+        ></Controller>
+      </FormGroup>
+      <FormGroup
+        label={t("requiredUserActions")}
+        fieldId="kc-required-user-actions"
+        validated={form.errors.requiredActions ? "error" : "default"}
+        helperTextInvalid={t("common:required")}
+        labelIcon={
+          <HelpItem
+            helpText={t("requiredUserActionsHelpText")}
+            forLabel={t("requiredUserActions")}
+            forID="required-user-actions-label"
+          />
+        }
+      >
+        <Controller
+          name="required-user-actions"
+          defaultValue={["0"]}
+          typeAheadAriaLabel="Select an action"
+          control={form.control}
+          render={() => (
+            <Select
+              placeholderText="Select action"
+              toggleId="kc-required-user-actions"
+              onToggle={() =>
+                setRequiredUserActionsDropdownOpen(
+                  !isRequiredUserActionsDropdownOpen
+                )
+              }
+              isOpen={isRequiredUserActionsDropdownOpen}
+              selections={selected}
+              onSelect={(_, value) => {
+                const option = value as string;
+                if (selected.includes(option)) {
+                  setSelected(selected.filter((item) => item !== option));
+                } else {
+                  setSelected([...selected, option]);
+                }
+              }}
+              onClear={clearSelection}
+              variant="typeaheadmulti"
+            >
+              {requiredUserActionsOptions}
+            </Select>
+          )}
+        ></Controller>
+      </FormGroup>
       <ActionGroup>
         <Button variant="primary" type="submit">
-          {t("common:save")}
+          {t("common:Create")}
         </Button>
-        <Button onClick={() => reset()} variant="link">
-          {editMode ? t("common:reload") : t("common:cancel")}
+        <Button onClick={() => history.push(`/${realm}/users`)} variant="link">
+          {t("common:cancel")}
         </Button>
       </ActionGroup>
     </FormAccess>
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index 7ac6390e2e..7053d64832 100644
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useHistory, useParams, useRouteMatch } from "react-router-dom";
-import {
-  PageSection,
-} from "@patternfly/react-core";
+import { Divider, PageSection } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useFieldArray, useForm } from "react-hook-form";
 
@@ -16,104 +14,99 @@ import { UserForm } from "./UserForm";
 export const UsersTabs = () => {
   const { t } = useTranslation("roles");
   const form = useForm<UserRepresentation>({ mode: "onChange" });
-//   const history = useHistory();
+  //   const history = useHistory();
 
-//   const adminClient = useAdminClient();
-//   const [role, setRole] = useState<RoleFormType>();
+  //   const adminClient = useAdminClient();
+  //   const [role, setRole] = useState<RoleFormType>();
 
-//   const { id, clientId } = useParams<{ id: string; clientId: string }>();
-//   const { url } = useRouteMatch();
+  //   const { id, clientId } = useParams<{ id: string; clientId: string }>();
+  //   const { url } = useRouteMatch();
 
-//   const { realm } = useRealm();
+  //   const { realm } = useRealm();
 
-//   const [key, setKey] = useState("");
+  //   const [key, setKey] = useState("");
 
+  //   const { addAlert } = useAlerts();
 
-//   const { addAlert } = useAlerts();
+  //   const { fields, append, remove } = useFieldArray({
+  //     control: form.control,
+  //     name: "attributes",
+  //   });
 
-//   const { fields, append, remove } = useFieldArray({
-//     control: form.control,
-//     name: "attributes",
-//   });
+  //   useEffect(() => append({ key: "", value: "" }), [append, role]);
 
-  useEffect(() => append({ key: "", value: "" }), [append, role]);
+  //   const save = async (user: UserRepresentation) => {
+  // try {
+  //   const { attributes, ...rest } = role;
+  //   const roleRepresentation: RoleRepresentation = rest;
+  //   if (id) {
+  //     if (attributes) {
+  //       roleRepresentation.attributes = arrayToAttributes(attributes);
+  //     }
+  //     if (!clientId) {
+  //       await adminClient.roles.updateById({ id }, roleRepresentation);
+  //     } else {
+  //       await adminClient.clients.updateRole(
+  //         { id: clientId, roleName: role.name! },
+  //         roleRepresentation
+  //       );
+  //     }
 
-//   const save = async (user: UserRepresentation) => {
-    // try {
-    //   const { attributes, ...rest } = role;
-    //   const roleRepresentation: RoleRepresentation = rest;
-    //   if (id) {
-    //     if (attributes) {
-    //       roleRepresentation.attributes = arrayToAttributes(attributes);
-    //     }
-    //     if (!clientId) {
-    //       await adminClient.roles.updateById({ id }, roleRepresentation);
-    //     } else {
-    //       await adminClient.clients.updateRole(
-    //         { id: clientId, roleName: role.name! },
-    //         roleRepresentation
-    //       );
-    //     }
+  //     await adminClient.roles.createComposite(
+  //       { roleId: id, realm },
+  //       additionalRoles
+  //     );
 
-    //     await adminClient.roles.createComposite(
-    //       { roleId: id, realm },
-    //       additionalRoles
-    //     );
-
-    //     setRole(role);
-    //   } else {
-    //     let createdRole;
-    //     if (!clientId) {
-    //       await adminClient.roles.create(roleRepresentation);
-    //       createdRole = await adminClient.roles.findOneByName({
-    //         name: role.name!,
-    //       });
-    //     } else {
-    //       await adminClient.clients.createRole({
-    //         id: clientId,
-    //         name: role.name,
-    //       });
-    //       if (role.description) {
-    //         await adminClient.clients.updateRole(
-    //           { id: clientId, roleName: role.name! },
-    //           roleRepresentation
-    //         );
-    //       }
-    //       createdRole = await adminClient.clients.findRole({
-    //         id: clientId,
-    //         roleName: role.name!,
-    //       });
-    //     }
-    //     setRole(convert(createdRole));
-    //     history.push(
-    //       url.substr(0, url.lastIndexOf("/") + 1) + createdRole.id + "/details"
-    //     );
-    //   }
-    //   addAlert(t(id ? "roleSaveSuccess" : "roleCreated"), AlertVariant.success);
-    // } catch (error) {
-    //   addAlert(
-    //     t((id ? "roleSave" : "roleCreate") + "Error", {
-    //       error: error.response.data?.errorMessage || error,
-    //     }),
-    //     AlertVariant.danger
-    //   );
-    // }
-//   };
+  //     setRole(role);
+  //   } else {
+  //     let createdRole;
+  //     if (!clientId) {
+  //       await adminClient.roles.create(roleRepresentation);
+  //       createdRole = await adminClient.roles.findOneByName({
+  //         name: role.name!,
+  //       });
+  //     } else {
+  //       await adminClient.clients.createRole({
+  //         id: clientId,
+  //         name: role.name,
+  //       });
+  //       if (role.description) {
+  //         await adminClient.clients.updateRole(
+  //           { id: clientId, roleName: role.name! },
+  //           roleRepresentation
+  //         );
+  //       }
+  //       createdRole = await adminClient.clients.findRole({
+  //         id: clientId,
+  //         roleName: role.name!,
+  //       });
+  //     }
+  //     setRole(convert(createdRole));
+  //     history.push(
+  //       url.substr(0, url.lastIndexOf("/") + 1) + createdRole.id + "/details"
+  //     );
+  //   }
+  //   addAlert(t(id ? "roleSaveSuccess" : "roleCreated"), AlertVariant.success);
+  // } catch (error) {
+  //   addAlert(
+  //     t((id ? "roleSave" : "roleCreate") + "Error", {
+  //       error: error.response.data?.errorMessage || error,
+  //     }),
+  //     AlertVariant.danger
+  //   );
+  // }
+  //   };
 
   return (
     <>
-      <ViewHeader
-        titleKey={role?.name || t("createRole")}
-        subKey={id ? "" : "roles:roleCreateExplain"}
-        actionsDropdownId="roles-actions-dropdown"
-      />
+      <ViewHeader titleKey={t("users:createUser")} subKey="" dividerComponent="div" />
       <PageSection variant="light">
-          <UserForm
-            reset={() => form.reset()}
-            form={form}
-            save={save}
-            editMode={false}
-          />
+        <UserForm
+          reset={() => form.reset()}
+          form={form}
+          save={() => {}}
+          editMode={false}
+        />
       </PageSection>
     </>
   );
diff --git a/src/user/messages.json b/src/user/messages.json
index d0282c6bf0..cfc8848f4b 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -10,18 +10,29 @@
     "emptyInstructions": "Change your search criteria or add a user",
     "username": "Username",
     "email": "Email",
+    "emailVerified": "Email verified",
     "lastName": "Last name",
     "firstName": "First name",
     "status": "Status",
     "disabled": "Disabled",
+    "disabledHelpText": "A disabled user cannot log in.",
+    "emailVerifiedHelpText": "Has the user's email been verified?",
     "temporaryDisabled": "Temporarily disabled",
     "notVerified": "Not verified",
+    "requiredUserActions": "Required user actions",
+    "requiredUserActionsHelpText": "Require an action when the user logs in. 'Verify email' sends an email to the user to verify their email address. 'Update profile' requires user to enter in new personal information. 'Update password' requires user to enter in a new password. 'Configure OTP' requires setup of a mobile password generator.",
     "addUser": "Add user",
     "deleteUser": "Delete user",
     "deleteConfirm": "Delete user?",
     "deleteConfirmDialog": "Are you sure you want to permanently delete {{count}} selected user",
     "deleteConfirmDialog_plural": "Are you sure you want to permanently delete {{count}} selected users",
     "userDeletedSuccess": "The user has been deleted",
-    "userDeletedError": "The user could not be deleted {{error}}"
+    "userDeletedError": "The user could not be deleted {{error}}",
+    "configureOTP": "Configure OTP",
+    "updatePassword": "Update Password",
+    "updateProfile": "Update Profile",
+    "verifyEmail": "Verify Email",
+    "updateUserLocale": "Update User Locale"
+
   }
 }