diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx index 519e2f90e94..6597982d890 100644 --- a/src/common/pages/sign-up.tsx +++ b/src/common/pages/sign-up.tsx @@ -34,37 +34,37 @@ const solanaLogo = require("../img/solanaLogo.png"); interface Props { activeUser: ActiveUser; - global: Global - communities: Community[] + global: Global; + communities: Community[]; } const SignUpPage = (props: Props | any) => { const form = useRef(null); const { global, communities, activeUser } = props; - const [username, setUsername] = useState("") - const [email, setEmail] = useState("") - const [referral, setReferral] = useState("") - const [urlHash, setUrlHash] = useState("") - const [inProgress, setInProgress] = useState(false) + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [referral, setReferral] = useState(""); + const [urlHash, setUrlHash] = useState(""); + const [inProgress, setInProgress] = useState(false); const [community, setCommunity] = useState(null); const [newUserKeys, setNewUserKeys]: any = useState(null); - const [accountPassword, setAccountPassword] = useState("") + const [accountPassword, setAccountPassword] = useState(""); const [step, setStep] = useState(1); const [error, setError] = useState(""); - const [isDownloaded, setIsDownloaded] = useState(false) + const [isDownloaded, setIsDownloaded] = useState(false); const [accountType, setAccountType] = useState("Hive"); - useEffect(()=> { - getCurrentCommunity() - }, []) + useEffect(() => { + getCurrentCommunity(); + }, []); - useEffect(()=> { - initiateAccount() - }, [step]) + useEffect(() => { + initiateAccount(); + }, [step]); const initiateAccount = async () => { - if(!username || !email) { + if (!username || !email) { return; } @@ -72,7 +72,7 @@ const SignUpPage = (props: Props | any) => { const password: string = await generatePassword(32); const keys: KeyTypes = getPrivateKeys(username, password); setNewUserKeys((prev: any) => ({ ...prev, ...keys })); - setAccountPassword(password) + setAccountPassword(password); const dataToEncode = { username, email, @@ -81,48 +81,48 @@ const SignUpPage = (props: Props | any) => { activePubKey: keys.activePubkey, postingPubKey: keys.postingPubkey, ownerPubKey: keys.ownerPubkey, - memoPubKey: keys.memoPubkey - } - } - + memoPubKey: keys.memoPubkey, + }, + }; + const stringifiedData = JSON.stringify(dataToEncode); - const hash = hexEnc(stringifiedData) - setUrlHash(hash) + const hash = hexEnc(stringifiedData); + setUrlHash(hash); } catch (err) { - console.log(err) + console.log(err); } - } + }; - const usernameChanged = async (e: { target: { value: any; }; }) => { - setInProgress(true) + const usernameChanged = async (e: { target: { value: any } }) => { + setInProgress(true); const { value: username } = e.target; setUsername(username.toLowerCase()); - const existingAccount = await getAccount(username) - - if (existingAccount){ + const existingAccount = await getAccount(username); + + if (existingAccount) { setError("username not available"); } else { - setError("") + setError(""); } - setInProgress(false) + setInProgress(false); }; - const emailChanged = (e: { target: { value: any; }; }) => { + const emailChanged = (e: { target: { value: any } }) => { const { value: email } = e.target; setEmail(email.toLowerCase()); }; - const referralChanged = (e: { target: { value: any; }; }) => { + const referralChanged = (e: { target: { value: any } }) => { const { value: email } = e.target; setReferral(email.toLowerCase()); }; const getCurrentCommunity = () => { const currCommunity = communities.find( - (community: { name: any; }) => community.name === global.hive_id + (community: { name: any }) => community.name === global.hive_id ); - setCommunity(currCommunity) - } + setCommunity(currCommunity); + }; const splitUrl = (url: string) => { return url.slice(0, 50); @@ -163,7 +163,7 @@ const SignUpPage = (props: Props | any) => { ${_t("onboard.memo")} ${_t("onboard.memo-use")}`; const file = new Blob([keysToFile.replace(/\n/g, "\r\n")], { - type: "text/plain" + type: "text/plain", }); element.href = URL.createObjectURL(file); element.download = `${username}_hive_keys.txt`; @@ -206,19 +206,15 @@ const SignUpPage = (props: Props | any) => { : NavBar({ ...props })}
- {step === 1 &&
+ {step === 1 && ( +

Sign up with

-
handleAccountTypeClick("Hive")} +
handleAccountTypeClick("Hive")} > - Hive - + Hive + Hive
@@ -236,200 +232,268 @@ const SignUpPage = (props: Props | any) => { Solana
*/} -
} -
- {accountType === "Hive" && <> - {step == 1 &&
-
-
Create a Hive acoount
-
{_t("sign-up.description")}
- - {(() => { - return ( -
-
{ - e.preventDefault(); - e.stopPropagation(); - if(error){ - return; - } - setStep(2); - }} - > - - {error && {error}} - - handleInvalid(e, "sign-up.", "validation-username") - } - onInput={handleOnInput} - /> - - - - handleInvalid(e, "sign-up.", "validation-email") - } - onInput={handleOnInput} - /> - - - - handleInvalid(e, "sign-up.", "validation-referral") - } - onInput={handleOnInput} - /> - -
- -
-
+
+ )} +
+ {accountType === "Hive" && ( + <> + {step == 1 && ( +
+
+
Create a Hive acoount
+
+ {_t("sign-up.description")} +
-
- {_t("sign-up.login-text-1")} - { + {(() => { + return ( +
+
{ e.preventDefault(); - const { toggleUIProp } = props; - toggleUIProp("login"); + e.stopPropagation(); + if (error) { + return; + } + setStep(2); }} > - {" "} - {_t("sign-up.login-text-2")} - + + {error && ( + + {error} + + )} + + handleInvalid( + e, + "sign-up.", + "validation-username" + ) + } + onInput={handleOnInput} + /> + + + + handleInvalid( + e, + "sign-up.", + "validation-email" + ) + } + onInput={handleOnInput} + /> + + + + handleInvalid( + e, + "sign-up.", + "validation-referral" + ) + } + onInput={handleOnInput} + /> + +
+ +
+
+ +
-
- ); - })()} + ); + })()} +
-
} + )} {/* TEST */} - {newUserKeys && step == 2 &&
-
-

- Account creation steps -

-

Please make sure you have keychain installed as an extension on your browser - (If you are a using the web browser, we recommend that you pin it to your browser.) -

-
+ {newUserKeys && step == 2 && ( +
+
+

Account creation steps

+

+ Please make sure you have keychain installed as an + extension on your browser (If you are a using the web + browser, we recommend that you pin it to your browser.) +

+
{_t("onboard.username")} {username} -
- {/*
+
+ {/*

Step 1

Download your keys to continue
*/} - {/* {isDownloaded && */} -
-

Step 1

- {!activeUser &&
{_t("onboard.copy-info-message")}
} - {activeUser &&
Click link below or scan QR code
} -
-
- {!activeUser ? <> -
- {/* {splitUrl(`${window.origin}/onboard-friend/${urlHash}`)} + {/* {isDownloaded && */} +
+

Step 1

+ {!activeUser && ( +
+ {_t("onboard.copy-info-message")} +
+ )} + {activeUser && ( +
+ Click link below or scan QR code +
+ )} +
+
+ {!activeUser ? ( + <> +
+ {/* {splitUrl(`${window.origin}/onboard-friend/${urlHash}`)} { clipboard(`${window.origin}/onboard-friend/${urlHash}`); success(_t("onboard.copy-link")) }}>{copyContent} */} -
- : {_t("onboard.click-link")}} -
-
{ - clipboard(`${window.origin}/onboard-friend/${urlHash}`); - success(_t("onboard.copy-link")) - }} - style={{ - background: 'white', - padding: '16px', - cursor: "pointer" - }} - > - +
+ + ) : ( + + {_t("onboard.click-link")} + + )} +
+
{ + clipboard( + `${window.origin}/onboard-friend/${urlHash}` + ); + success(_t("onboard.copy-link")); + }} + style={{ + background: "white", + padding: "16px", + cursor: "pointer", + }} + > + +
-
-
-

Step 2

- Confirm if your friend has created your account, then check your email for instructions on setting up your account and - - download keychain extension here - - -
-
-
-

Step 3

-

Copy your account password below and paste to keychain to set up your account

-
- {accountPassword} - { - clipboard(accountPassword) - success(_t("onboard.key-copied")) - }}>{copyContent} +
+

Step 2

+ + Confirm if your friend has created your account, + then check your email for instructions on setting up + your account and + + download keychain extension here + + +
+
+

Step 3

+

+ Copy your account password below and paste to + keychain to set up your account +

+
+ {accountPassword} + { + clipboard(accountPassword); + success(_t("onboard.key-copied")); + }} + > + {copyContent} + +
+
+
+

Step 4

+ {/* Download your keys to continue */} + +
-
-

Step 4

- {/* Download your keys to continue */} - -
-
+ {/* // } */}
- {/* // } */}
-
- } - } - {accountType === "Solana" && <> - + )} + {accountType === "Solana" && ( + <> + - } -
+ + )} +
); -} +}; export default connect(pageMapStateToProps, pageMapDispatchToProps)(SignUpPage);