demo: fix types

This commit is contained in:
Bereket Engida
2024-09-23 15:30:43 +03:00
parent ba3fcdb93d
commit 1ee9ec8042
2 changed files with 62 additions and 49 deletions

View File

@@ -26,7 +26,7 @@ export default function SignIn() {
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const router = useRouter();
const [loading, setLoading] = useState(false)
const [loading, setLoading] = useState(false);
return (
<Card className="z-50 rounded-md rounded-t-none max-w-md">
<CardHeader>
@@ -77,7 +77,9 @@ export default function SignIn() {
<Label>Remember me</Label>
</div>
<Button type="submit" className="w-full"
<Button
type="submit"
className="w-full"
disabled={loading}
onClick={async () => {
await signIn.email({
@@ -85,22 +87,21 @@ export default function SignIn() {
password: password,
callbackURL: "/dashboard",
dontRememberMe: !rememberMe,
options: {
fetchOptions: {
onRequest: () => {
setLoading(true)
setLoading(true);
},
onResponse: () => {
setLoading(false)
setLoading(false);
},
onError: (ctx) => {
toast.error(ctx.error.message)
}
}
})
}}>
{
loading ? <Loader2 size={16} className="animate-spin" /> : "Login"
}
toast.error(ctx.error.message);
},
},
});
}}
>
{loading ? <Loader2 size={16} className="animate-spin" /> : "Login"}
</Button>
<Button
variant="outline"
@@ -109,7 +110,7 @@ export default function SignIn() {
await signIn.social({
provider: "github",
callbackURL: "/dashboard",
})
});
}}
>
<GitHubLogoIcon />
@@ -122,7 +123,7 @@ export default function SignIn() {
await signIn.social({
provider: "google",
callbackURL: "/dashboard",
})
});
}}
>
<svg
@@ -150,11 +151,15 @@ export default function SignIn() {
</svg>
Continue with Google
</Button>
<Button variant="outline" className="gap-2" onClick={async () => {
await signIn.passkey({
callbackURL: "/dashboard",
})
}}>
<Button
variant="outline"
className="gap-2"
onClick={async () => {
await signIn.passkey({
callbackURL: "/dashboard",
});
}}
>
<Key size={16} />
Sign-in with Passkey
</Button>

View File

@@ -39,8 +39,7 @@ export function SignUp() {
reader.readAsDataURL(file);
}
};
const [loading, setLoading] = useState(false)
const [loading, setLoading] = useState(false);
return (
<Card className="z-50 rounded-md rounded-t-none max-w-md">
@@ -132,14 +131,21 @@ export function SignUp() {
onChange={handleImageChange}
className="w-full"
/>
{imagePreview && <X className="cursor-pointer" onClick={() => {
setImage(null);
setImagePreview(null);
}} />}
{imagePreview && (
<X
className="cursor-pointer"
onClick={() => {
setImage(null);
setImagePreview(null);
}}
/>
)}
</div>
</div>
</div>
<Button type="submit" className="w-full"
<Button
type="submit"
className="w-full"
disabled={loading}
onClick={async () => {
await signUp.email({
@@ -148,22 +154,25 @@ export function SignUp() {
name: `${firstName} ${lastName}`,
image: image ? await convertImageToBase64(image) : "",
callbackURL: "/dashboard",
options: {
fetchOptions: {
onResponse: () => {
setLoading(false)
setLoading(false);
},
onRequest: () => {
setLoading(true)
setLoading(true);
},
onError: (ctx) => {
toast.error(ctx.error.message)
toast.error(ctx.error.message);
},
}
})
}}>
{
loading ? <Loader2 size={16} className="animate-spin" /> : "Create an account"
}
},
});
}}
>
{loading ? (
<Loader2 size={16} className="animate-spin" />
) : (
"Create an account"
)}
</Button>
<Button
variant="outline"
@@ -172,15 +181,15 @@ export function SignUp() {
const res = await client.signIn.social({
provider: "google",
callbackURL: "/dashboard",
options: {
fetchOptions: {
onRequest: () => {
setLoading(true)
setLoading(true);
},
onResponse: () => {
setLoading(false)
setLoading(false);
},
}
})
},
});
}}
disabled={loading}
>
@@ -216,15 +225,15 @@ export function SignUp() {
await signIn.social({
provider: "github",
callbackURL: "/dashboard",
options: {
fetchOptions: {
onRequest: () => {
setLoading(true)
setLoading(true);
},
onResponse: () => {
setLoading(false)
setLoading(false);
},
}
})
},
});
}}
disabled={loading}
>
@@ -244,7 +253,6 @@ export function SignUp() {
);
}
async function convertImageToBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
@@ -252,4 +260,4 @@ async function convertImageToBase64(file: File): Promise<string> {
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
}