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

Jump to bottom

New onboading pages #44

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

New onboading pages #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1d8faa9
implemented the new onboarding page layout wrapper
taiwonaf Mar 1, 2023
e0bbbf7
updated the signup form with the latest design
taiwonaf Mar 2, 2023
80d8efd
implemented the sign up form
taiwonaf Mar 2, 2023
959cbc7
created alternative signup page
taiwonaf Mar 2, 2023
eab3720
implemented otp page
taiwonaf Mar 2, 2023
a76c594
implemented otp page for signup and alternative signing up
taiwonaf Mar 3, 2023
31ebca6
Merge remote-tracking branch 'upstream/main' into new-onboading-pages
taiwonaf Mar 30, 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
144 changes: 144 additions & 0 deletions apps/core/src/pages/alternativeSignup/Otp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import { useState } from "react";
import {
Anchor,
Button,
createStyles,
Flex,
NumberInput,
Paper,
Text
} from "@mantine/core";
import { FormTitle } from "@zuri/ui";
import { Link } from "react-router-dom";

const useStyles = createStyles(theme => ({
form: {
maxWidth: "420px",
width: "100%",
// background: theme.colors.secondary[6],
padding: 40,
background: "white",
[`@media (max-width: ${theme.breakpoints.sm}px)`]: {
paddingLeft: 20,
paddingRight: 20
},
borderRadius: 15
},
label: {
fontSize: 16,
color: theme.colors.secondary[8]
},
outlineBtn: {
color: theme.colors.secondary[5],
borderColor: theme.colors.secondary[5]
},
link: {
color: theme.colors.secondary[9]
},
continueBtn: {
"&:invalid": { background: theme.colors.secondary[5] }
},
input: {
textAlign: "center",
borderColor: theme.colors.secondary[5],
borderWidth: 2,
fontSize: 20
}
}));

export const AlternativeSignupOtp = () => {
const { classes, theme } = useStyles();
return (
<Paper className={classes.form} radius={0}>
<FormTitle
title="Verify your email address!"
subtitle="We have sent your code "
boldSubtitle={"[email protected]"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this mail should not be hardcoded

subtitleContinue=" Please enter it below before it expires."
/>
<Text
color={theme.colors.tertiary[1]}
weight="700"
size={16}
mt={15}
mb={5}
>
Enter here
</Text>
<Flex gap={10} justify="space-between">
<NumberInput
hideControls
classNames={{ input: classes.input }}
h={45}
w={50}
maxLength={1}
/>
<NumberInput
hideControls
classNames={{ input: classes.input }}
h={45}
w={50}
maxLength={1}
/>
<NumberInput
hideControls
classNames={{ input: classes.input }}
h={45}
w={50}
maxLength={1}
/>
<NumberInput
hideControls
classNames={{ input: classes.input }}
h={45}
w={50}
maxLength={1}
/>
<NumberInput
hideControls
classNames={{ input: classes.input }}
h={45}
maxLength={1}
w={50}
/>
<NumberInput
hideControls
classNames={{ input: classes.input }}
h={45}
maxLength={1}
w={50}
/>
Comment on lines +69 to +110
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This number input doesn't store the value anywhere.

Also Mantine provides a pin input that you can use instead of recreating that design

</Flex>
<Text
align="right"
color={theme.colors.secondary[7]}
weight={"400"}
size={16}
mr={5}
>
Didn`&apos;`t get the code ?{" "}
<Anchor
component={Link}
to="/signup"
weight={400}
color={theme.colors.secondary[9]}
className={classes.link}
>
Resend Code
</Anchor>
</Text>
<Button
disabled
fullWidth
mt={20}
size="md"
bg={theme.colors.secondary[5]}
className={classes.continueBtn}
>
Continue
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the API is ready so this function should be connected properly

</Button>
</Paper>
);
};

export default AlternativeSignupOtp;
232 changes: 232 additions & 0 deletions apps/core/src/pages/alternativeSignup/index.tsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is there an alternate signup page

Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
import {
Alert,
Anchor,
Button,
createStyles,
Divider,
Paper,
PasswordInput,
Text,
TextInput,
Flex,
Checkbox
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { IconAlertCircle, IconBrandGoogle } from "@tabler/icons";
import { FormTitle } from "@zuri/ui";
import { authApi } from "@zuri/utilities";
import { useState } from "react";
import { Link } from "react-router-dom";

const useStyles = createStyles(theme => ({
form: {
maxWidth: "420px",
width: "100%",
// background: theme.colors.secondary[6],
padding: 40,
background: "white",
[`@media (max-width: ${theme.breakpoints.sm}px)`]: {
paddingLeft: 20,
paddingRight: 20
},
borderRadius: 15
},

label: {
fontSize: 16,
color: theme.colors.secondary[8]
},

inputField: {
backgroundColor: "transparent",
color: "black"
},

passwordIcon: {
color: "black"
},

outlineBtn: {
color: theme.colors.secondary[5],
borderColor: theme.colors.secondary[5]
},

link: {
color: theme.colors.secondary[9]
},

loginBtn: {
"&:hover": {
backgroundColor: theme.fn.lighten(theme.colors.secondary[5], 0.05)
}
}
}));

export const AlternativeSignup: React.FC = () => {
const { classes, theme } = useStyles();
const { useLoginUserMutation } = authApi;
const [mutate, { isLoading: loginRequestLoading, data }] =
useLoginUserMutation();

const [error, setError] = useState<string | null>("");

const LoginForm = useForm({
initialValues: {
email: "",
password: ""
},

validate: {
password: value =>
value.length > 2 ? null : "Password must have at least 2 letters",
email: value => (/^\S+@\S+$/.test(value) ? null : "Invalid email")
}
});

const handleSubmit = async (values: typeof LoginForm.values) => {
setError(null);
await mutate(values);

if (!data) {
setError("An Error occured");
}
};

return (
<Paper className={classes.form} radius={0}>
<FormTitle
title="Welcome back"
subtitle="We are so excited to have you here"
/>
{error && (
<Alert
icon={<IconAlertCircle size={16} />}
title="Bummer!"
color="red"
variant="filled"
my="md"
>
{error}
</Alert>
)}
<Button
fullWidth
mt="xl"
size="md"
variant="outline"
disabled={true}
className={classes.outlineBtn}
leftIcon={<IconBrandGoogle size={14} />}
>
Login with Google
</Button>
<Divider
my="md"
label="OR"
labelPosition="center"
variant="dashed"
labelProps={{ color: theme.colors.secondary[5] }}
color="#B5BEC1"
classNames={{ label: classes.label }}
/>
<form onSubmit={LoginForm.onSubmit(values => handleSubmit(values))}>
<Flex gap={5} mb={15}>
<TextInput
label="First Name"
labelProps={{ mb: 5, font: "700" }}
placeholder="Enter your first name"
size="md"
autoComplete="false"
classNames={{ input: classes.inputField }}
{...LoginForm.getInputProps("email")}
/>
<TextInput
label="Last Name"
labelProps={{ mb: 5 }}
placeholder="Enter your last name"
size="md"
autoComplete="false"
classNames={{ input: classes.inputField }}
{...LoginForm.getInputProps("email")}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you used the wrong get input props in the functions
update this

/>
</Flex>
<TextInput
label="Email Address"
labelProps={{ mb: 5 }}
placeholder="Enter your email here"
size="md"
mb={15}
autoComplete="false"
classNames={{ input: classes.inputField }}
{...LoginForm.getInputProps("email")}
/>
<PasswordInput
label="Password"
labelProps={{ mb: 5 }}
placeholder="Enter your password here"
mt="md"
size="md"
mb={15}
autoComplete="false"
classNames={{
input: classes.inputField,
visibilityToggle: classes.passwordIcon
}}
{...LoginForm.getInputProps("password")}
/>
<Flex align={"center"}>
<Checkbox color={`${theme.colors.secondary[5]}`} mr={10} />
<Text
align="left"
color={theme.colors.secondary[7]}
weight={"700"}
size={12}
mr={5}
>
I agree to Zurichat ?{" "}
<Anchor
component={Link}
to="/signup"
color={theme.colors.secondary[9]}
className={classes.link}
>
Terms of services & privacy policy
</Anchor>
</Text>
</Flex>
<Button
fullWidth
mt="xl"
size="md"
bg={theme.colors.secondary[5]}
mb={20}
type="submit"
loading={loginRequestLoading}
className={classes.loginBtn}
>
Login
</Button>
</form>
<Text
align="left"
color={theme.colors.secondary[7]}
weight={"400"}
size={16}
mr={5}
>
Are you new to Zurichat ?{" "}
<Anchor
component={Link}
to="/signup"
weight={400}
color={theme.colors.secondary[9]}
className={classes.link}
>
Sign Up
</Anchor>
</Text>
</Paper>
);
};

export default AlternativeSignup;
Loading