Skip to content

Commit

Permalink
chakra sterps - without test
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikos-koukis
nikos-koukis committed Oct 13, 2023
1 parent 32c5651 commit bc7f6d6
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 83 deletions.
14 changes: 14 additions & 0 deletions src/views/Home/components/NewUserForm/CreatePin.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React, { ChangeEvent } from 'react';
import { Input } from '@chakra-ui/react';
interface CreatePinProps {
setPin: React.Dispatch<React.SetStateAction<string>>;
}
function CreatePin({ setPin }: CreatePinProps) {
const handlePinChange = (event: ChangeEvent<HTMLInputElement>) => {
setPin(event.target.value);
}
return (
<Input placeholder='Type your pin' onChange={handlePinChange} />
);
}
export default CreatePin;
4 changes: 2 additions & 2 deletions src/views/Home/components/NewUserForm/CreateWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import { TransactionActionsEnum } from "@multiversx/sdk-dapp/types";



export default function CreateWallet({formData, email, handleReset, userGid}: {formData: any, email: string, handleReset: any, userGid: string}) {
export default function CreateWallet({pin, email, handleReset, userGid}: {pin: string, email: string, handleReset: any, userGid: string}) {

const [encryptionKey, setEncryptionKey] = useState(createEncryptionKey(formData.pin, userGid));
const [encryptionKey, setEncryptionKey] = useState(createEncryptionKey(pin, userGid));
const [walletCreationHash, setWalletCreationHash] = useState("");
const [txDetails, setTxDetails] = useState('');

Expand Down
230 changes: 149 additions & 81 deletions src/views/Home/components/NewUserForm/NewUserForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,16 @@ import {
CSSReset,
Box,
Flex,
Heading
} from '@chakra-ui/react';
import { createUser } from "../../services/calls";
import CreateWallet from "./CreateWallet";
import { createEncryptionKey } from "@/utils/functions/cryptography";
import { useColorModeValue } from "@chakra-ui/color-mode";
import { Step, Steps, useSteps } from "chakra-ui-steps";
import CreatePin from "./CreatePin";
const steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }];


interface Step1Props {
pinData: {
Expand All @@ -26,102 +32,164 @@ interface Step1Props {
onNext: (data: { pin: string }) => void;
}

function Step1({ pinData, onPrevious, onNext }: Step1Props) {
const [pin, setPin] = useState(pinData.pin || '');
// function Step1({ pinData, onPrevious, onNext }: Step1Props) {
// const [pin, setPin] = useState(pinData.pin || '');

const handlePrevious = () => {
onPrevious();
};
// const handlePrevious = () => {
// onPrevious();
// };

const handleNext = () => {
onNext({ pin });
};
// const handleNext = () => {
// onNext({ pin });
// };

const handlePinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
if (value.length <= 4 && /^\d*$/.test(value)) {
setPin(value);
}
};
// const handlePinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value;
// if (value.length <= 4 && /^\d*$/.test(value)) {
// setPin(value);
// }
// };

return (
<VStack spacing={4}>
<Text fontSize="xl">Create PIN</Text>
<Text>
This is the most important part.
</Text>
<Text>
Your PIN (alongside your email) will be used to encrypt your 24 secret words in the SC. The encryption key will be created from a combination of your email and your PIN using a hashing algorithm.
</Text>
<Text>
In order to maintain the security of your wallet, PIN will never be saved anywhere. Thus, if you forget your PIN, you lose access to your wallet. This is irreversible since nobody else can recover the PIN for you.
</Text>
<Text>
Notice that you will need to enter your PIN every time you want to connect in a dApp using xLogin.
</Text>
<FormControl maxW={'250px'}>
<Input
type="text"
placeholder="PIN"
value={pin}
onChange={handlePinChange}
maxLength={4}
/>
</FormControl>
<Text>
*only 4 digits
</Text>
<Stack direction="row">
<Button colorScheme="gray" onClick={handlePrevious}>
Previous
</Button>
<Button colorScheme="blue" onClick={handleNext}>
Next
</Button>
</Stack>
</VStack>
);
}
// return (
// <VStack spacing={4}>
// <Text fontSize="xl">Create PIN</Text>
// <Text>
// This is the most important part.
// </Text>
// <Text>
// Your PIN (alongside your email) will be used to encrypt your 24 secret words in the SC. The encryption key will be created from a combination of your email and your PIN using a hashing algorithm.
// </Text>
// <Text>
// In order to maintain the security of your wallet, PIN will never be saved anywhere. Thus, if you forget your PIN, you lose access to your wallet. This is irreversible since nobody else can recover the PIN for you.
// </Text>
// <Text>
// Notice that you will need to enter your PIN every time you want to connect in a dApp using xLogin.
// </Text>
// <FormControl maxW={'250px'}>
// <Input
// type="text"
// placeholder="PIN"
// value={pin}
// onChange={handlePinChange}
// maxLength={4}
// />
// </FormControl>
// <Text>
// *only 4 digits
// </Text>
// <Stack direction="row">
// <Button colorScheme="gray" onClick={handlePrevious}>
// Previous
// </Button>
// <Button colorScheme="blue" onClick={handleNext}>
// Next
// </Button>
// </Stack>
// </VStack>
// );
// }

interface FormData {
pin?: string;
}
// interface FormData {
// pin?: string;
// }

function NewUserForm({ email, userGid }: { email: string; userGid: string; }) {
const [step, setStep] = useState(1);
const [formData, setFormData] = useState<FormData>({});

const handleNext = (data: SetStateAction<{}>) => {
setFormData({ ...formData, ...data });
setStep(step + 1);
};
const [pin, setPin] = useState("");

const handlePrevious = () => {
setStep(step - 1);
};
const { nextStep, prevStep, reset, activeStep } = useSteps({
initialStep: 0,
});

const isLastStep = activeStep === steps.length - 1;
const hasCompletedAllSteps = activeStep === steps.length;
const bg = useColorModeValue("gray.200", "gray.700");
// const [step, setStep] = useState(1);
// const [formData, setFormData] = useState<FormData>({});

// const handleNext = (data: SetStateAction<{}>) => {
// setFormData({ ...formData, ...data });
// setStep(step + 1);
// };

// const handlePrevious = () => {
// setStep(step - 1);
// };

const handleReset = () => {
setStep(1);
setFormData({});
setPin("");
reset();
}

return (
<Container
minW="800px"
minH="800px"
border="1px solid black"
display="flex"
justifyContent="center"
// <Container
// minW="800px"
// minH="800px"
// border="1px solid black"
// display="flex"
// justifyContent="center"
// >
// {step === 1 && (
// <Step1 pinData={formData} onPrevious={handlePrevious} onNext={handleNext} />
// )}
// {step == 2 &&
// <VStack>
// <CreateWallet formData={formData} email={email} handleReset={handleReset} userGid={userGid} />
// </VStack>
// }
// </Container>
<Box
px={20}
marginTop={'100px'}
>
{step === 1 && (
<Step1 pinData={formData} onPrevious={handlePrevious} onNext={handleNext} />
)}
{step == 2 &&
<VStack>
<CreateWallet formData={formData} email={email} handleReset={handleReset} userGid={userGid} />
</VStack>
}
</Container>
<Flex flexDir="column" width="100%">
<Steps colorScheme="blue" activeStep={activeStep}>
{steps.map(({ label }, index) => (
<Step label={label} key={label}
description={index === 0 ? "Create pin" : index === 1 ? "Create wallet" : "Create account"}
>
<Box sx={{ p: 8, bg, my: 8, rounded: "md" }}>
<Heading fontSize="xl" textAlign="center">
{index === 0 ? (
<CreatePin setPin={setPin} />
) : index === 1 ? (
<CreateWallet pin={pin} email={email} handleReset={handleReset} userGid={userGid}/>
) : "Create your account"}
</Heading>
</Box>
</Step>
))}
</Steps>
{hasCompletedAllSteps && (
<Box sx={{ bg, my: 8, p: 8, rounded: "md" }}>
<Heading fontSize="xl" textAlign={"center"}>
Woohoo! All steps completed! 🎉
</Heading>
</Box>
)}
<Flex width="100%" justify="flex-end" gap={4}>
{hasCompletedAllSteps ? (
<Button size="sm" onClick={reset}>
Reset
</Button>
) : (
<>
<Button
isDisabled={activeStep === 0}
onClick={prevStep}
size="sm"
variant="ghost"
>
Prev
</Button>
<Button size="sm" onClick={nextStep}>
{isLastStep ? "Finish" : "Next"}
</Button>
</>
)}
</Flex>
</Flex>
</Box>
);
}

Expand Down

0 comments on commit bc7f6d6

Please sign in to comment.