finished access token creation feature
This commit is contained in:
daniel31x13
@@ -12,6 +12,8 @@ type Props = {
|
||||
export default function NewKeyModal({ onClose }: Props) {
|
||||
const { data } = useSession();
|
||||
|
||||
const [newToken, setNewToken] = useState("");
|
||||
|
||||
const initial = {
|
||||
name: "",
|
||||
expires: 0 as KeyExpiry,
|
||||
@@ -43,7 +45,7 @@ export default function NewKeyModal({ onClose }: Props) {
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Created!`);
|
||||
onClose();
|
||||
setNewToken(data.response);
|
||||
} else toast.error(data.response as string);
|
||||
|
||||
setSubmitLoader(false);
|
||||
@@ -54,146 +56,173 @@ export default function NewKeyModal({ onClose }: Props) {
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Create an Access Token</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
|
||||
{newToken ? (
|
||||
<div className="flex flex-col justify-center space-y-4">
|
||||
<p className="text-xl font-thin">Access Token Created</p>
|
||||
<p>
|
||||
Your new token has been created. Please copy it and store it
|
||||
somewhere safe. You will not be able to see it again.
|
||||
</p>
|
||||
<TextInput
|
||||
value={key.name}
|
||||
onChange={(e) => setKey({ ...key, name: e.target.value })}
|
||||
placeholder="e.g. For the Mobile App"
|
||||
className="bg-base-200"
|
||||
spellCheck={false}
|
||||
value={newToken}
|
||||
onChange={() => {}}
|
||||
className="w-full"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(newToken);
|
||||
toast.success("Copied to clipboard!");
|
||||
}}
|
||||
className="btn btn-primary w-fit mx-auto"
|
||||
>
|
||||
Copy to Clipboard
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xl font-thin">Create an Access Token</p>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Date of Expiry</p>
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-outline w-36 flex items-center btn-sm h-10"
|
||||
>
|
||||
{key.expires === KeyExpiry.sevenDays && "7 Days"}
|
||||
{key.expires === KeyExpiry.oneMonth && "30 Days"}
|
||||
{key.expires === KeyExpiry.twoMonths && "60 Days"}
|
||||
{key.expires === KeyExpiry.threeMonths && "90 Days"}
|
||||
{key.expires === KeyExpiry.never && "No Expiration"}
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
|
||||
<TextInput
|
||||
value={key.name}
|
||||
onChange={(e) => setKey({ ...key, name: e.target.value })}
|
||||
placeholder="e.g. For the iOS shortcut"
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.sevenDays}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.sevenDays });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">7 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.oneMonth}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.oneMonth });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">30 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.twoMonths}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.twoMonths });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">60 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.threeMonths}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.threeMonths });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">90 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.never}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.never });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">No Expiration</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-5">
|
||||
<button
|
||||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Create Access Token
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-2">Expires in</p>
|
||||
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-outline w-36 flex items-center btn-sm h-10"
|
||||
>
|
||||
{key.expires === KeyExpiry.sevenDays && "7 Days"}
|
||||
{key.expires === KeyExpiry.oneMonth && "30 Days"}
|
||||
{key.expires === KeyExpiry.twoMonths && "60 Days"}
|
||||
{key.expires === KeyExpiry.threeMonths && "90 Days"}
|
||||
{key.expires === KeyExpiry.never && "No Expiration"}
|
||||
</div>
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.sevenDays}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.sevenDays });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">7 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.oneMonth}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.oneMonth });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">30 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.twoMonths}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.twoMonths });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">60 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.threeMonths}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.threeMonths });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">90 Days</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
className="label cursor-pointer flex justify-start"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
checked={key.expires === KeyExpiry.never}
|
||||
onChange={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setKey({ ...key, expires: KeyExpiry.never });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">No Expiration</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-5">
|
||||
<button
|
||||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Create Access Token
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user