🔒 (security) security improvement
This commit is contained in:
@ -1,26 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { Button, Input } from "@heroui/react";
|
||||
import React from "react";
|
||||
|
||||
const EmailInput = () => {
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
className="w-full "
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Button className="mt-2 w-full" color="primary">
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailInput;
|
||||
"use client";
|
||||
|
||||
import { Button, Input } from "@heroui/react";
|
||||
import React from "react";
|
||||
|
||||
const EmailInput = () => {
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
className="w-full "
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Button className="mt-2 w-full" color="primary">
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailInput;
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Button, Input } from "@heroui/react";
|
||||
import Provision from "../cards/Provision";
|
||||
|
||||
type Props = {
|
||||
changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
|
||||
};
|
||||
|
||||
const FullNameInput = ({ changeCurrentPage }: Props) => {
|
||||
const [fullName, setFullName] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
className="w-full "
|
||||
label="Full Name"
|
||||
type="name"
|
||||
variant="bordered"
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onPress={() => changeCurrentPage(<Provision fullName={fullName} />)}
|
||||
className="mt-2 w-full"
|
||||
color="primary"
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullNameInput;
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Button, Input } from "@heroui/react";
|
||||
import Provision from "../cards/Provision";
|
||||
|
||||
type Props = {
|
||||
changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
|
||||
};
|
||||
|
||||
const FullNameInput = ({ changeCurrentPage }: Props) => {
|
||||
const [fullName, setFullName] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
className="w-full "
|
||||
label="Full Name"
|
||||
type="name"
|
||||
variant="bordered"
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onPress={() => changeCurrentPage(<Provision fullName={fullName} />)}
|
||||
className="mt-2 w-full"
|
||||
color="primary"
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullNameInput;
|
||||
|
||||
@ -1,85 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { OauthProviders } from "../../types/oauthProvidersList";
|
||||
import { ResponseRequestOauthUrl } from "../../types/responseRequestOauthUrl";
|
||||
import { Button } from "@heroui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import getOauthProviderList from "../../lib/getOauthProviderList";
|
||||
import requestOauthUrl from "../../lib/requestOauthUrl";
|
||||
|
||||
const OAuthProviders = () => {
|
||||
// Set initial state for OAuth providers list
|
||||
const [oauthProvidersList, setOauthProvidersList] = useState<
|
||||
OauthProviders[]
|
||||
>([]);
|
||||
|
||||
/**
|
||||
* Fetch the list of OAuth providers from backend API
|
||||
* and update the state if OAuth providers list is available
|
||||
*/
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = (await getOauthProviderList()) as OauthProviders[];
|
||||
setOauthProvidersList(res);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const [loadingButton, setLoadingButton] = useState(false);
|
||||
|
||||
/**
|
||||
* Start the authentication process using oAuth by sending the endpoint URL to the backend for processing.
|
||||
*
|
||||
* @param providerRequestEndpoint The request endpoint for the OAuth provider
|
||||
*/
|
||||
const startOauthProcess = async (providerData: {
|
||||
name: string;
|
||||
endpoint: string;
|
||||
}) => {
|
||||
try {
|
||||
setLoadingButton(true);
|
||||
|
||||
(await requestOauthUrl(providerData)) as ResponseRequestOauthUrl;
|
||||
} catch (err) {
|
||||
setLoadingButton(false);
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-2 mt-4">
|
||||
{/* Render OAuth provider buttons */}
|
||||
{oauthProvidersList.length > 0 ? (
|
||||
oauthProvidersList.map((provider, index) => {
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
className="w-full hover:bg-neutral-800"
|
||||
variant="bordered"
|
||||
startContent={<Icon className="w-4 h-4" icon={provider.icon} />}
|
||||
onPress={() =>
|
||||
startOauthProcess({
|
||||
name: provider.name,
|
||||
endpoint: provider.req_endpoint,
|
||||
})
|
||||
}
|
||||
isLoading={loadingButton}
|
||||
>
|
||||
Continue with {provider.name}
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Button className="w-full" variant="ghost" isDisabled>
|
||||
No login options available via third-party providers
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OAuthProviders;
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { OauthProviders } from "../../types/oauthProvidersList";
|
||||
import { ResponseRequestOauthUrl } from "../../types/responseRequestOauthUrl";
|
||||
import { Button } from "@heroui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import getOauthProviderList from "../../lib/getOauthProviderList";
|
||||
import requestOauthUrl from "../../lib/requestOauthUrl";
|
||||
|
||||
const OAuthProviders = () => {
|
||||
// Set initial state for OAuth providers list
|
||||
const [oauthProvidersList, setOauthProvidersList] = useState<
|
||||
OauthProviders[]
|
||||
>([]);
|
||||
|
||||
/**
|
||||
* Fetch the list of OAuth providers from backend API
|
||||
* and update the state if OAuth providers list is available
|
||||
*/
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = (await getOauthProviderList()) as OauthProviders[];
|
||||
setOauthProvidersList(res);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const [loadingButton, setLoadingButton] = useState(false);
|
||||
|
||||
/**
|
||||
* Start the authentication process using oAuth by sending the endpoint URL to the backend for processing.
|
||||
*
|
||||
* @param providerRequestEndpoint The request endpoint for the OAuth provider
|
||||
*/
|
||||
const startOauthProcess = async (providerData: {
|
||||
name: string;
|
||||
endpoint: string;
|
||||
}) => {
|
||||
try {
|
||||
setLoadingButton(true);
|
||||
|
||||
(await requestOauthUrl(providerData)) as ResponseRequestOauthUrl;
|
||||
} catch (err) {
|
||||
setLoadingButton(false);
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-2 mt-4">
|
||||
{/* Render OAuth provider buttons */}
|
||||
{oauthProvidersList.length > 0 ? (
|
||||
oauthProvidersList.map((provider, index) => {
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
className="w-full hover:bg-neutral-800"
|
||||
variant="bordered"
|
||||
startContent={<Icon className="w-4 h-4" icon={provider.icon} />}
|
||||
onPress={() =>
|
||||
startOauthProcess({
|
||||
name: provider.name,
|
||||
endpoint: provider.req_endpoint,
|
||||
})
|
||||
}
|
||||
isLoading={loadingButton}
|
||||
>
|
||||
Continue with {provider.name}
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Button className="w-full" variant="ghost" isDisabled>
|
||||
No login options available via third-party providers
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OAuthProviders;
|
||||
|
||||
@ -1,103 +1,118 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { addToast, Button, Form, Input } from "@heroui/react";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { submitRegisterForm } from "../../lib/submitRegisterForm";
|
||||
|
||||
type Props = {
|
||||
fullname: string;
|
||||
};
|
||||
|
||||
export type RegisterInputs = {
|
||||
fullname: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
};
|
||||
|
||||
const ProvisionInput = ({ fullname }: Props) => {
|
||||
const { register, handleSubmit, setValue } = useForm<RegisterInputs>();
|
||||
setValue("fullname", fullname);
|
||||
|
||||
const [submitStatus, setSubmitStatus] = useState(false);
|
||||
const onSubmit: SubmitHandler<RegisterInputs> = async (data) => {
|
||||
setSubmitStatus(true);
|
||||
|
||||
try {
|
||||
const returnData = await submitRegisterForm(data);
|
||||
if (!returnData.success) {
|
||||
setSubmitStatus(false);
|
||||
addToast({
|
||||
color: "danger",
|
||||
title: "😬 Oops, something went wrong!",
|
||||
description: returnData.text.message,
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus(false);
|
||||
addToast({
|
||||
color: "success",
|
||||
title: "OKKE!",
|
||||
description: returnData.text.message,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
setSubmitStatus(false);
|
||||
addToast({
|
||||
color: "danger",
|
||||
title: "😬 Oops, something went wrong!",
|
||||
description: "Internal server error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-6 px-3">
|
||||
<Form className="flex flex-col gap-1.5" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Input
|
||||
{...register("email")}
|
||||
className="w-full "
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
{...register("password")}
|
||||
className="w-full "
|
||||
label="Password"
|
||||
type="password"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
{...register("confirmPassword")}
|
||||
className="w-full "
|
||||
label="Confirm Password"
|
||||
type="password"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="mt-1.5 w-full"
|
||||
color="primary"
|
||||
isLoading={submitStatus}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProvisionInput;
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { addToast, Button, Form, Input } from "@heroui/react";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { submitRegisterForm } from "../../lib/submitRegisterForm";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { registerFormSchema } from "../../models/registerForm.schema";
|
||||
|
||||
type Props = {
|
||||
fullname: string;
|
||||
};
|
||||
|
||||
export type RegisterInputs = {
|
||||
fullname: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
};
|
||||
|
||||
const ProvisionInput = ({ fullname }: Props) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<RegisterInputs>({
|
||||
resolver: zodResolver(registerFormSchema),
|
||||
});
|
||||
setValue("fullname", fullname);
|
||||
|
||||
const [submitStatus, setSubmitStatus] = useState(false);
|
||||
const onSubmit: SubmitHandler<RegisterInputs> = async (data) => {
|
||||
setSubmitStatus(true);
|
||||
|
||||
try {
|
||||
const returnData = await submitRegisterForm(data);
|
||||
if (!returnData.success) {
|
||||
setSubmitStatus(false);
|
||||
addToast({
|
||||
color: "danger",
|
||||
title: "😬 Oops, something went wrong!",
|
||||
description: returnData.text.message,
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus(false);
|
||||
addToast({
|
||||
color: "success",
|
||||
title: "OKKE!",
|
||||
description: returnData.text.message,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
setSubmitStatus(false);
|
||||
addToast({
|
||||
color: "danger",
|
||||
title: "😬 Oops, something went wrong!",
|
||||
description: "Connection to server lost",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-6 px-3">
|
||||
<Form className="flex flex-col gap-1.5" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Input
|
||||
{...register("email")}
|
||||
className="w-full "
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="bordered"
|
||||
isInvalid={errors.email ? true : false}
|
||||
errorMessage={errors.email?.message}
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
{...register("password")}
|
||||
className="w-full "
|
||||
label="Password"
|
||||
type="password"
|
||||
variant="bordered"
|
||||
isInvalid={errors.password ? true : false}
|
||||
errorMessage={errors.password?.message}
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
{...register("confirmPassword")}
|
||||
className="w-full "
|
||||
label="Confirm Password"
|
||||
type="password"
|
||||
variant="bordered"
|
||||
isInvalid={errors.confirmPassword ? true : false}
|
||||
errorMessage={errors.confirmPassword?.message}
|
||||
classNames={{
|
||||
input: "text-md font-light pt-4",
|
||||
inputWrapper: "flex gap-10",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="mt-1.5 w-full"
|
||||
color="primary"
|
||||
isLoading={submitStatus}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProvisionInput;
|
||||
|
||||
Reference in New Issue
Block a user