mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-18 08:18:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

use mobile friendly dialog in regenerate invite

Browse source
This commit is contained in:
miloschwartz 2025-04-12 12:18:05 -04:00
parent bc8cd5c941
commit e057c5f3bf
No known key found for this signature in database
1 changed files with 83 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

165
src/app/[orgId]/settings/access/invitations/RegenerateInvitationForm.tsx
View file

@ -1,11 +1,14 @@
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { import {
Dialog, Credenza,
DialogContent, CredenzaBody,
DialogFooter, CredenzaClose,
DialogHeader, CredenzaContent,
DialogTitle CredenzaDescription,
} from "@app/components/ui/dialog"; CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { createApiClient } from "@app/lib/api"; import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
@ -20,6 +23,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue SelectValue
} from "@app/components/ui/select"; } from "@app/components/ui/select";
import { Label } from "@app/components/ui/label";
type RegenerateInvitationFormProps = { type RegenerateInvitationFormProps = {
open: boolean; open: boolean;
@ -153,7 +157,7 @@ export default function RegenerateInvitationForm({
} }
return ( return (
<Dialog <Credenza
open={open} open={open}
onOpenChange={(isOpen) => { onOpenChange={(isOpen) => {
setOpen(isOpen); setOpen(isOpen);
@ -162,73 +166,76 @@ export default function RegenerateInvitationForm({
} }
}} }}
> >
<DialogContent aria-describedby="regenerate-invite-description"> <CredenzaContent>
<DialogHeader> <CredenzaHeader>
<DialogTitle>Regenerate Invitation</DialogTitle> <CredenzaTitle>Regenerate Invitation</CredenzaTitle>
</DialogHeader> <CredenzaDescription>
{!inviteLink ? ( Revoke previous invitation and create a new one
<div> </CredenzaDescription>
<p> </CredenzaHeader>
Are you sure you want to regenerate the invitation <CredenzaBody>
for <b>{invitation?.email}</b>? This will revoke the {!inviteLink ? (
previous invitation. <div>
</p> <p>
<div className="flex items-center space-x-2 mt-4"> Are you sure you want to regenerate the
<Checkbox invitation for <b>{invitation?.email}</b>? This
id="send-email" will revoke the previous invitation.
checked={sendEmail} </p>
onCheckedChange={(e) => <div className="flex items-center space-x-2 mt-4">
setSendEmail(e as boolean) <Checkbox
} id="send-email"
/> checked={sendEmail}
<label htmlFor="send-email"> onCheckedChange={(e) =>
Send email notification to the user setSendEmail(e as boolean)
</label> }
/>
<label htmlFor="send-email">
Send email notification to the user
</label>
</div>
<div className="mt-4 space-y-2">
<Label>
Validity Period
</Label>
<Select
value={validHours.toString()}
onValueChange={(value) =>
setValidHours(parseInt(value))
}
>
<SelectTrigger>
<SelectValue placeholder="Select validity period" />
</SelectTrigger>
<SelectContent>
{validForOptions.map((option) => (
<SelectItem
key={option.hours}
value={option.hours.toString()}
>
{option.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div> </div>
<div className="mt-4"> ) : (
<label className="block text-sm font-medium text-gray-700"> <div className="space-y-4 max-w-md">
Validity Period <p>
</label> The invitation has been regenerated. The user
<Select must access the link below to accept the
value={validHours.toString()} invitation.
onValueChange={(value) => </p>
setValidHours(parseInt(value)) <CopyTextBox text={inviteLink} wrapText={false} />
}
>
<SelectTrigger>
<SelectValue placeholder="Select validity period" />
</SelectTrigger>
<SelectContent>
{validForOptions.map((option) => (
<SelectItem
key={option.hours}
value={option.hours.toString()}
>
{option.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
</div> )}
) : ( </CredenzaBody>
<div className="space-y-4 max-w-md"> <CredenzaFooter>
<p>
The invitation has been regenerated. The user must
access the link below to accept the invitation.
</p>
<CopyTextBox text={inviteLink} wrapText={false} />
</div>
)}
<DialogFooter>
{!inviteLink ? ( {!inviteLink ? (
<> <>
<Button <CredenzaClose asChild>
variant="outline" <Button variant="outline">Cancel</Button>
onClick={() => setOpen(false)} </CredenzaClose>
>
Cancel
</Button>
<Button <Button
onClick={handleRegenerate} onClick={handleRegenerate}
loading={loading} loading={loading}
@ -237,18 +244,12 @@ export default function RegenerateInvitationForm({
</Button> </Button>
</> </>
) : ( ) : (
<Button <CredenzaClose asChild>
variant="outline" <Button variant="outline">Close</Button>
onClick={() => { </CredenzaClose>
setOpen(false);
setInviteLink(null);
}}
>
Close
</Button>
)} )}
</DialogFooter> </CredenzaFooter>
</DialogContent> </CredenzaContent>
</Dialog> </Credenza>
); );
} }