diff --git a/messages/en-US.json b/messages/en-US.json index 8398bca71..7a2cad775 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -676,11 +676,11 @@ "accessUserCreateDescription": "Follow the steps below to create a new user", "userSeeAll": "See All Users", "userTypeTitle": "User Type", - "userTypeDescription": "Determine how you want to create the user", + "userTypeDescription": "Select the identity provider to use for this user", "userSettings": "User Information", - "userSettingsDescription": "Enter the details for the new user", + "userSettingsDescription": "Enter the general details for the new user", "inviteEmailSent": "Send invite email to user", - "inviteValid": "Invite Valid For (days)", + "inviteValid": "Invite Valid For", "selectDuration": "Select duration", "selectResource": "Select Resource", "filterByResource": "Filter By Resource", diff --git a/src/app/[orgId]/settings/access/users/create/page.tsx b/src/app/[orgId]/settings/access/users/create/page.tsx index b0e0fb681..af390d946 100644 --- a/src/app/[orgId]/settings/access/users/create/page.tsx +++ b/src/app/[orgId]/settings/access/users/create/page.tsx @@ -1,24 +1,20 @@ "use client"; +import CopyToClipboard from "@app/components/CopyToClipboard"; import { - SettingsContainer, - SettingsSection, - SettingsSectionBody, - SettingsSectionDescription, - SettingsSectionForm, - SettingsSectionHeader, - SettingsSectionTitle -} from "@app/components/Settings"; -import { StrategyOption, StrategySelect } from "@app/components/StrategySelect"; + Credenza, + CredenzaBody, + CredenzaContent, + CredenzaDescription, + CredenzaFooter, + CredenzaHeader, + CredenzaTitle +} from "@app/components/Credenza"; +import { StrategySelect } from "@app/components/StrategySelect"; import HeaderTitle from "@app/components/SettingsSectionTitle"; import { Button } from "@app/components/ui/button"; import { useParams, useRouter } from "next/navigation"; -import { - useActionState, - useRef, - useState, - startTransition -} from "react"; +import { useActionState, useRef, useState, startTransition } from "react"; import { Form, FormControl, @@ -42,7 +38,6 @@ import { AxiosResponse } from "axios"; import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; -import CopyTextBox from "@app/components/CopyTextBox"; import { useEnvContext } from "@app/hooks/useEnvContext"; import { ListRolesResponse } from "@server/routers/role"; import { formatAxiosError } from "@app/lib/api"; @@ -55,7 +50,15 @@ import IdpTypeIcon from "@app/components/IdpTypeIcon"; import { usePaidStatus } from "@app/hooks/usePaidStatus"; import { tierMatrix } from "@server/lib/billing/tierMatrix"; import OrgRolesTagField from "@app/components/OrgRolesTagField"; -import CopyToClipboard from "@app/components/CopyToClipboard"; +import { + SettingsContainer, + SettingsSection, + SettingsSectionBody, + SettingsSectionDescription, + SettingsSectionForm, + SettingsSectionHeader, + SettingsSectionTitle +} from "@app/components/Settings"; type UserType = "internal" | "oidc"; @@ -96,6 +99,7 @@ export default function Page() { "internal" ); const [inviteLink, setInviteLink] = useState(null); + const [isInviteDialogOpen, setIsInviteDialogOpen] = useState(false); const [expiresInDays, setExpiresInDays] = useState(1); const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]); @@ -246,9 +250,9 @@ export default function Page() { build === "saas" || env.app.identityProviderMode === "org"; const res = await api - .get< - AxiosResponse - >(useOrgIdps ? `/org/${orgId}/idp` : "/idp") + .get>( + useOrgIdps ? `/org/${orgId}/idp` : "/idp" + ) .catch((e) => { console.error(e); toast({ @@ -350,13 +354,13 @@ export default function Page() { if (res && res.status === 200) { setInviteLink(res.data.data.inviteLink); + setExpiresInDays(parseInt(values.validForHours) / 24); + setIsInviteDialogOpen(true); toast({ variant: "default", title: t("userInvited"), description: t("userInvitedDescription") }); - - setExpiresInDays(parseInt(values.validForHours) / 24); } } @@ -460,6 +464,7 @@ export default function Page() { setSendEmail(env.email.emailEnabled); internalForm.reset(); setInviteLink(null); + setIsInviteDialogOpen(false); setExpiresInDays(1); } else { googleAzureForm.reset(); @@ -486,7 +491,7 @@ export default function Page() {
- {!inviteLink && userOptions.length > 1 ? ( + {userOptions.length > 1 ? ( @@ -508,177 +513,132 @@ export default function Page() { ) : null} {selectedOption === "internal" && dataLoaded && ( - <> - {!inviteLink ? ( - - - - {t("userSettings")} - - - {t("userSettingsDescription")} - - - - -
- { - e.preventDefault(); - startTransition(() => { - submitInternalAction(); - }); - }} - className="space-y-4" - id="create-user-form" - > - ( - - - {t("email")} - - - - - - - )} - /> - - ( - - - {t( - "inviteValid" - )} - - - - - )} - /> - - - - {env.email.emailEnabled && ( -
- - setSendEmail( - e as boolean - ) - } - /> - -
- )} - - -
-
-
- ) : ( - - - - {t("userInvited")} - - - {sendEmail - ? t( - "inviteEmailSentDescription" - ) - : t("inviteSentDescription")} - - - -
-

- {t("inviteExpiresIn", { - days: expiresInDays - })} -

- + + + {t("userSettings")} + + + {t("userSettingsDescription")} + + + + +
+ { + e.preventDefault(); + startTransition(() => { + submitInternalAction(); + }); + }} + className="space-y-4" + id="create-user-form" + > + ( + + + {t("email")} + + + + + + + )} /> -
-
-
- )} - + + {env.email.emailEnabled && ( +
+ + setSendEmail( + e as boolean + ) + } + /> + +
+ )} + + ( + + + {t("inviteValid")} + + + + + )} + /> + + + + + + +
)} {selectedOption && @@ -898,24 +858,61 @@ export default function Page() {
{selectedOption && dataLoaded && ( )}
+ + { + setIsInviteDialogOpen(open); + if (!open) { + setInviteLink(null); + } + }} + > + + + {t("userInvited")} + + {sendEmail + ? t("inviteEmailSentDescription") + : t("inviteSentDescription")} + + + +
+

+ {t("inviteExpiresIn", { + days: expiresInDays + })} +

+ {inviteLink && ( + + )} +
+
+ + + +
+
); } diff --git a/src/components/UsersTable.tsx b/src/components/UsersTable.tsx index 63d14523f..4c092ac8e 100644 --- a/src/components/UsersTable.tsx +++ b/src/components/UsersTable.tsx @@ -171,7 +171,20 @@ export default function UsersTable({ ); - } + }, + cell: ({ row }) => ( + + {row.original.displayUsername}{" "} + {row.original.id === user.userId && ( + <> + + · + {" "} + you + + )} + + ) }, { accessorKey: "idpName",