Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

done with the frontend #10

Open
wants to merge 2 commits into
base: hkirat/issue
Choose a base branch
from
Open

done with the frontend #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba7fbd3
done with the frontend
RockingThor Oct 15, 2023
e0c9dbb
added valid error and fontend validation
RockingThor Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ export const OnboardAccount = ({
<UsernameForm
key="UsernameForm"
inviteCode={inviteCode!}
onNext={(username) => {
setOnboardingData({ username });
onNext={(username, firstName, lastName) => {
setOnboardingData({ username, firstName, lastName });
nextStep();
}}
/>,
Expand All @@ -100,11 +100,11 @@ export const OnboardAccount = ({
// Show the seed phrase if we are creating based on a mnemonic
...(keyringType === "mnemonic"
? [
<MnemonicInput
key="MnemonicInput"
readOnly={action === "create"}
buttonLabel={action === "create" ? "Next" : "Import"}
onNext={async (mnemonic) => {
<MnemonicInput
key="MnemonicInput"
readOnly={action === "create"}
buttonLabel={action === "create" ? "Next" : "Import"}
onNext={async (mnemonic) => {
setOnboardingData({ mnemonic });
nextStep();
}}
Expand All @@ -124,10 +124,10 @@ export const OnboardAccount = ({
/>,
]
: [
<BlockchainSelector
key="BlockchainSelector"
selectedBlockchains={selectedBlockchains}
onClick={async (blockchain) => {
<BlockchainSelector
key="BlockchainSelector"
selectedBlockchains={selectedBlockchains}
onClick={async (blockchain) => {
await handleSelectBlockchain({
blockchain,
});
Expand All @@ -138,14 +138,14 @@ export const OnboardAccount = ({
setOpenDrawer(true);
}
}}
onNext={nextStep}
onNext={nextStep}
/>,
]),
...(!isAddingAccount
? [
<CreatePassword
key="CreatePassword"
onNext={async (password) => {
<CreatePassword
key="CreatePassword"
onNext={async (password) => {
setOnboardingData({ password });
nextStep();
}}
Expand Down
114 changes: 106 additions & 8 deletions packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type FormEvent, useCallback, useEffect, useState } from "react";
import { PrimaryButton,TextInput } from "@coral-xyz/react-common";
import { PrimaryButton, TextInput } from "@coral-xyz/react-common";
import { useCustomTheme } from "@coral-xyz/themes";
import { AlternateEmail } from "@mui/icons-material";
import { Box, InputAdornment } from "@mui/material";
Expand All @@ -11,15 +11,28 @@ export const UsernameForm = ({
onNext,
}: {
inviteCode: string;
onNext: (username: string) => void;
onNext: (username: string, firstName: string, lastName: string) => void;
}) => {
const [username, setUsername] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [error, setError] = useState("");
const [errorFirstName, setErrorFirstName] = useState("");
const [errorLastName, setErrorLastName] = useState("");
const [errorIdentity, setErrorIdentity] = useState(0);
const theme = useCustomTheme();

useEffect(() => {
setError("");
}, [username]);
//Error for firstname and lastname
useEffect(() => {
setErrorFirstName("");
}, [firstName]);

useEffect(() => {
setErrorLastName("");
}, [lastName]);

const handleSubmit = useCallback(
async (e: FormEvent) => {
Expand All @@ -32,14 +45,31 @@ export const UsernameForm = ({
},
});
const json = await res.json();
if (!res.ok) throw new Error(json.message || "There was an error");

onNext(username);
if (!res.ok) {
setErrorIdentity(1);
throw new Error(json.message || "There was an error");
}
if (!firstName.match(/^[A-Za-z\s'-]+$/)) {
setErrorIdentity(2);
throw new Error("Invalid characters in name");
}
if (!lastName.match(/^[A-Za-z\s'-]+$/)) {
setErrorIdentity(3);
throw new Error("Invalid characters in name");
}
onNext(username, firstName, lastName);
} catch (err: any) {
setError(err.message);
if (errorIdentity == 1) {
setError(err.message);
} else if (errorIdentity == 2) {
setErrorFirstName(err.message);
} else if (errorIdentity == 3) {
setErrorLastName(err.message);
}
console.log(err.message);
}
},
[username]
[username, firstName, lastName]
);

return (
Expand Down Expand Up @@ -105,7 +135,75 @@ export const UsernameForm = ({
}
/>
</Box>
<PrimaryButton label="Continue" type="submit" />
<Box style={{ marginBottom: "16px" }}>
<TextInput
inputProps={{
name: "firstName",
autoComplete: "off",
spellCheck: "false",
autoFocus: true,
}}
placeholder="First Name"
type="text"
value={firstName}
setValue={(e) => {
setFirstName(
e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "")
);
}}
error={errorFirstName ? true : false}
errorMessage={errorFirstName}
// startAdornment={
// <InputAdornment position="start">
// <AlternateEmail
// style={{
// color: theme.custom.colors.secondary,
// fontSize: 18,
// marginRight: -2,
// userSelect: "none",
// }}
// />
// </InputAdornment>
// }
/>
</Box>
<Box style={{ marginBottom: "16px" }}>
<TextInput
inputProps={{
name: "lastName",
autoComplete: "off",
spellCheck: "false",
autoFocus: true,
}}
placeholder="Last Name"
type="text"
value={lastName}
setValue={(e) => {
setLastName(
e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "")
);
}}
error={errorFirstName ? true : false}
errorMessage={errorFirstName}
// startAdornment={
// <InputAdornment position="start">
// <AlternateEmail
// style={{
// color: theme.custom.colors.secondary,
// fontSize: 18,
// marginRight: -2,
// userSelect: "none",
// }}
// />
// </InputAdornment>
// }
/>
</Box>
<PrimaryButton
style={{ marginBottom: "10px" }}
label="Continue"
type="submit"
/>
</Box>
</form>
);
Expand Down
9 changes: 8 additions & 1 deletion packages/recoil/src/context/OnboardingProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ export type OnboardingData = {
complete: boolean;
inviteCode: string | undefined;
username: string | null;
firstName: string | null;
lastName: string | null;
action: string;
keyringType: KeyringType | null;
blockchain: Blockchain | null;
Expand All @@ -102,6 +104,8 @@ const defaultState = {
complete: false,
inviteCode: undefined,
username: null,
firstName: null,
lastName: null,
action: "create",
keyringType: null,
blockchain: null,
Expand Down Expand Up @@ -278,7 +282,8 @@ export function OnboardingProvider({
//
const createUser = useCallback(
async (data: Partial<OnboardingData>) => {
const { inviteCode, userId, username, keyringType } = data;
const { inviteCode, firstName, lastName, userId, username, keyringType } =
data;

// If userId is provided, then we are onboarding via the recover flow.
if (userId) {
Expand Down Expand Up @@ -312,6 +317,8 @@ export function OnboardingProvider({
//
const body = JSON.stringify({
username,
firstName,
lastName,
inviteCode,
waitlistId: getWaitlistId?.(),
blockchainPublicKeys,
Expand Down