diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index 9a7c0b7..d88ee61 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -2,10 +2,11 @@ import Footer from "@components/Footer"; import { useAccount, useCharacters } from "@context/account"; import { Input, Modal } from "@hyoretsu/react-components"; -import { useRef, useState } from "react"; +import { useState } from "react"; import { AiOutlineQuestionCircle } from "react-icons/ai"; import { BiSolidCopy } from "react-icons/bi"; import { BsClipboard2Fill } from "react-icons/bs"; +import { IoArrowBackOutline } from "react-icons/io5"; import CharacterEdit from "./components/CharacterEdit"; import styles from "./styles.module.scss"; @@ -13,22 +14,12 @@ export default function Account() { const { account, importAccount, updateAccount } = useAccount(); const { createCharacter, currentCharacter, setCurrentCharacterIndex } = useCharacters(); - const importAccountRef = useRef(null); const [accountAction, setAccountAction] = useState(""); const [error, setError] = useState(""); const [exportedAccount, setExportedAccount] = useState(""); const [accountIdModalShown, showAccountIdModal] = useState(false); - const handleExportAccount = async () => { - await navigator.clipboard.writeText(exportedAccount); - setAccountAction(""); - setExportedAccount(""); - }; - const handleImportAccount = async (accoutnStr?: string) => { - importAccount(accoutnStr || (await navigator.clipboard.readText())); - }; - return ( <>
@@ -84,18 +75,30 @@ export default function Account() { {accountAction ? (
+ { + setAccountAction(""); + setExportedAccount(""); + }} + /> + setExportedAccount(e.currentTarget.value)} - onKeyUp={e => e.key === "Enter" && handleImportAccount(e.currentTarget.value)} + onChange={e => accountAction === "import" && setExportedAccount(e.currentTarget.value)} + onKeyUp={e => { + if (e.key === "Enter" && accountAction === "import") { + importAccount(exportedAccount); + } + }} /> + {accountAction === "export" ? ( - + navigator.clipboard.writeText(exportedAccount)} /> ) : ( handleImportAccount(importAccountRef.current?.value)} + title="Import (and paste if neccessary)" + onClick={async () => importAccount(exportedAccount || (await navigator.clipboard.readText()))} /> )}