Skip to content

Commit

Permalink
feat: lazy load adapter libs
Browse files Browse the repository at this point in the history
  • Loading branch information
AykutSarac committed Feb 3, 2024
1 parent 3979d73 commit e234db0
Show file tree
Hide file tree
Showing 6 changed files with 243 additions and 234 deletions.
66 changes: 66 additions & 0 deletions src/app/forgot-password/ResetPassword.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import { Paper, Stack, PasswordInput, Group, Button, Text } from "@mantine/core";
import toast from "react-hot-toast";
import { supabase } from "src/lib/api/supabase";

export function ResetPassword() {
const [loading, setLoading] = React.useState(false);
const [password, setPassword] = React.useState("");
const [password2, setPassword2] = React.useState("");

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
try {
e.preventDefault();
setLoading(true);

if (password !== password2) throw new Error("Passwords do not match");

const { error } = await supabase.auth.updateUser({ password });
if (error) throw new Error(error.message);

toast.success("Successfully updated password!");
setTimeout(() => window.location.assign("/sign-in"), 2000);
} catch (error) {
if (error instanceof Error) toast.error(error.message);
} finally {
setLoading(false);
}
};

return (
<Paper mx="auto" mt={70} maw={400} p="lg" withBorder>
<Text size="lg" w={500} mb="lg">
Create New Password
</Text>

<form onSubmit={onSubmit}>
<Stack>
<PasswordInput
value={password}
onChange={e => setPassword(e.target.value)}
required
label="New Password"
radius="sm"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
style={{ color: "black" }}
/>
<PasswordInput
value={password2}
onChange={e => setPassword2(e.target.value)}
required
label="Validate Password"
radius="sm"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
style={{ color: "black" }}
/>
</Stack>

<Group justify="apart" mt="xl">
<Button color="dark" type="submit" radius="sm" loading={loading} fullWidth>
Reset Password
</Button>
</Group>
</form>
</Paper>
);
}
65 changes: 2 additions & 63 deletions src/app/forgot-password/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,72 +4,11 @@ import React from "react";
import Head from "next/head";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Button, Group, Paper, Stack, TextInput, Text, Anchor, PasswordInput } from "@mantine/core";
import { Button, Group, Paper, Stack, TextInput, Text, Anchor } from "@mantine/core";
import { toast } from "react-hot-toast";
import Layout from "src/layout/Layout";
import { supabase } from "src/lib/api/supabase";

function ResetPassword() {
const [loading, setLoading] = React.useState(false);
const [password, setPassword] = React.useState("");
const [password2, setPassword2] = React.useState("");

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
try {
e.preventDefault();
setLoading(true);

if (password !== password2) throw new Error("Passwords do not match");

const { error } = await supabase.auth.updateUser({ password });
if (error) throw new Error(error.message);

toast.success("Successfully updated password!");
setTimeout(() => window.location.assign("/sign-in"), 2000);
} catch (error) {
if (error instanceof Error) toast.error(error.message);
} finally {
setLoading(false);
}
};

return (
<Paper mx="auto" mt={70} maw={400} p="lg" withBorder>
<Text size="lg" w={500} mb="lg">
Create New Password
</Text>

<form onSubmit={onSubmit}>
<Stack>
<PasswordInput
value={password}
onChange={e => setPassword(e.target.value)}
required
label="New Password"
radius="sm"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
style={{ color: "black" }}
/>
<PasswordInput
value={password2}
onChange={e => setPassword2(e.target.value)}
required
label="Validate Password"
radius="sm"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
style={{ color: "black" }}
/>
</Stack>

<Group justify="apart" mt="xl">
<Button color="dark" type="submit" radius="sm" loading={loading} fullWidth>
Reset Password
</Button>
</Group>
</form>
</Paper>
);
}
import { ResetPassword } from "./ResetPassword";

export default function Page() {
const query = useSearchParams();
Expand Down
106 changes: 51 additions & 55 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,67 +84,63 @@ const StyledHeroTitle = styled.h1`
}
`;

const HeroSection = () => (
<StyledHeroSection id="hero-section">
<StyledHeroSectionBody>
<Stack w="100%" mx="auto" align="center">
<StyledHeroTitle>
Understand your{" "}
<StyledHighlightedText>
<Typewriter
words={["JSON", "YAML", "XML", "TOML", "CSV"]}
typeSpeed={100}
deleteSpeed={60}
delaySpeed={2000}
loop
/>
</StyledHighlightedText>
<br />
better by visualizing
</StyledHeroTitle>

<StyledHeroText>
Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for data
representation and exploration.
</StyledHeroText>
<Group gap="xl">
<Button
color="gray.2"
c="indigo"
component={Link}
href="/editor"
fw="bold"
rightSection={<FaChevronRight />}
size="xl"
visibleFrom="md"
>
GO TO EDITOR
</Button>
<Button
color="gray.2"
c="indigo"
component={Link}
href="/editor"
fw="bold"
rightSection={<FaChevronRight />}
size="md"
hiddenFrom="md"
>
GO TO EDITOR
</Button>
</Group>
</Stack>
</StyledHeroSectionBody>
</StyledHeroSection>
);

export default function Page() {
return (
<Layout>
<Head>
<title>JSON Crack | Visualize Instantly Into Graphs</title>
</Head>
<HeroSection />
<StyledHeroSection id="hero-section">
<StyledHeroSectionBody>
<Stack w="100%" mx="auto" align="center">
<StyledHeroTitle>
Understand your{" "}
<StyledHighlightedText>
<Typewriter
words={["JSON", "YAML", "XML", "TOML", "CSV"]}
typeSpeed={100}
deleteSpeed={60}
delaySpeed={2000}
loop
/>
</StyledHighlightedText>
<br />
better by visualizing
</StyledHeroTitle>

<StyledHeroText>
Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for
data representation and exploration.
</StyledHeroText>
<Group gap="xl">
<Button
color="gray.2"
c="indigo"
component={Link}
href="/editor"
fw="bold"
rightSection={<FaChevronRight />}
size="xl"
visibleFrom="md"
>
GO TO EDITOR
</Button>
<Button
color="gray.2"
c="indigo"
component={Link}
href="/editor"
fw="bold"
rightSection={<FaChevronRight />}
size="md"
hiddenFrom="md"
>
GO TO EDITOR
</Button>
</Group>
</Stack>
</StyledHeroSectionBody>
</StyledHeroSection>
</Layout>
);
}
112 changes: 112 additions & 0 deletions src/app/sign-in/AuthenticationForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React from "react";
import Link from "next/link";
import {
Anchor,
Button,
Divider,
Paper,
PaperProps,
PasswordInput,
Stack,
TextInput,
} from "@mantine/core";
import { toast } from "react-hot-toast";
import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai";
import { supabase } from "src/lib/api/supabase";
import useUser from "src/store/useUser";

export function AuthenticationForm(props: PaperProps) {
const setSession = useUser(state => state.setSession);
const [loading, setLoading] = React.useState(false);
const [userData, setUserData] = React.useState({
name: "",
email: "",
password: "",
});

const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);

supabase.auth
.signInWithPassword({
email: userData.email,
password: userData.password,
})
.then(({ data, error }) => {
if (error) return toast.error(error.message);
setSession(data.session);
})
.finally(() => setLoading(false));
};

const handleLoginClick = (provider: "github" | "google") => {
supabase.auth.signInWithOAuth({
provider,
options: { redirectTo: "https://jsoncrack.com/editor" },
});
};

return (
<Paper {...props}>
<form onSubmit={onSubmit}>
<Stack>
<TextInput
name="email"
required
label="Email"
placeholder="[email protected]"
value={userData.email}
onChange={event => setUserData(d => ({ ...d, email: event.target.value }))}
radius="sm"
style={{ color: "black" }}
/>

<PasswordInput
name="password"
required
label="Password"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
value={userData.password}
onChange={event => setUserData(d => ({ ...d, password: event.target.value }))}
radius="sm"
style={{ color: "black" }}
/>

<Button color="dark" type="submit" radius="sm" loading={loading}>
Sign in
</Button>

<Stack gap="sm" mx="auto" align="center">
<Anchor component={Link} prefetch={false} href="/forgot-password" c="dark" size="xs">
Forgot your password?
</Anchor>
</Stack>
</Stack>
</form>

<Divider my="lg" />

<Stack mb="md" mt="md">
<Button
radius="sm"
leftSection={<AiOutlineGoogle size="20" />}
onClick={() => handleLoginClick("google")}
color="red"
variant="outline"
>
Sign in with Google
</Button>
<Button
radius="sm"
leftSection={<AiOutlineGithub size="20" />}
onClick={() => handleLoginClick("github")}
color="dark"
variant="outline"
>
Sign in with GitHub
</Button>
</Stack>
</Paper>
);
}
Loading

0 comments on commit e234db0

Please sign in to comment.