el.xwx.moe/components/ModalContent/NewKeyModal.tsx

import React, { useState } from "react";
import TextInput from "@/components/TextInput";
import { KeyExpiry } from "@/types/global";
import { useSession } from "next-auth/react";
import toast from "react-hot-toast";
import Modal from "../Modal";

type Props = {
  onClose: Function;
};

export default function NewKeyModal({ onClose }: Props) {
  const { data } = useSession();

  const [newToken, setNewToken] = useState("");

  const initial = {
    name: "",
    expires: 0 as KeyExpiry,
  };

  const [key, setKey] = useState(initial as any);

  const [submitLoader, setSubmitLoader] = useState(false);

  const submit = async () => {
    if (!submitLoader) {
      setSubmitLoader(true);

      let response;

      const load = toast.loading("Creating...");

      response = await fetch("/api/v1/tokens", {
        method: "POST",
        body: JSON.stringify({
          name: key.name,
          expires: key.expires,
        }),
      });

      const data = await response.json();

      toast.dismiss(load);

      if (response.ok) {
        toast.success(`Created!`);
        setNewToken(data.response);
      } else toast.error(data.response as string);

      setSubmitLoader(false);

      return response;
    }
  };

  return (
    <Modal toggleModal={onClose}>
      {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
            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 className="divider mb-3 mt-1"></div>

          <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>

            <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>
  );
}