diff --git a/components/ModalContent/NewKeyModal.tsx b/components/ModalContent/NewKeyModal.tsx index e36f724..e058561 100644 --- a/components/ModalContent/NewKeyModal.tsx +++ b/components/ModalContent/NewKeyModal.tsx @@ -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 ( -

Create an Access Token

- -
- -
-
-

Name

- + {newToken ? ( +
+

Access Token Created

+

+ Your new token has been created. Please copy it and store it + somewhere safe. You will not be able to see it again. +

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" /> +
+ ) : ( + <> +

Create an Access Token

-
-

Date of Expiry

+
-
-
- {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"} +
+
+

Name

+ + setKey({ ...key, name: e.target.value })} + placeholder="e.g. For the iOS shortcut" + className="bg-base-200" + />
-
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
-
-
-
-
- -
+
+

Expires in

+ +
+
+ {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"} +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+
+
+ +
+ +
+ + )} ); } diff --git a/components/TextInput.tsx b/components/TextInput.tsx index 146a15c..c8099d0 100644 --- a/components/TextInput.tsx +++ b/components/TextInput.tsx @@ -8,6 +8,7 @@ type Props = { onChange: ChangeEventHandler; onKeyDown?: KeyboardEventHandler | undefined; className?: string; + spellCheck?: boolean; }; export default function TextInput({ @@ -18,9 +19,11 @@ export default function TextInput({ onChange, onKeyDown, className, + spellCheck, }: Props) { return (