sessioh helper, client side request

This commit is contained in:
Max Peintner
2023-06-29 19:06:30 +02:00
parent e25fa6a228
commit f324407a83
7 changed files with 276 additions and 337 deletions

View File

@@ -6,40 +6,74 @@ import { TextInput } from "./Input";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { Spinner } from "./Spinner";
import { AuthenticationMethodType, LoginSettings } from "@zitadel/server";
type Inputs = {
loginName: string;
};
export default function UsernameForm() {
type Props = {
loginSettings: LoginSettings | undefined;
loginName: string | undefined;
};
export default function UsernameForm({ loginSettings, loginName }: Props) {
const { register, handleSubmit, formState } = useForm<Inputs>({
mode: "onBlur",
defaultValues: {
loginName: loginName ? loginName : "",
},
});
const router = useRouter();
const [loading, setLoading] = useState<boolean>(false);
function resubmitWithUsername(values: Inputs) {
return router.push(
`/loginname?` + new URLSearchParams({ loginName: values.loginName })
);
// setLoading(true);
// const res = await fetch("/methods", {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify({
// loginName: values.loginName,
// }),
// });
async function submitLoginName(values: Inputs) {
setLoading(true);
const res = await fetch("/loginnames", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
loginName: values.loginName,
}),
});
// setLoading(false);
// if (!res.ok) {
// throw new Error("Failed to load authentication methods");
// }
// return res.json();
setLoading(false);
if (!res.ok) {
throw new Error("Failed to load authentication methods");
}
return res.json();
}
async function setLoginNameAndGetAuthMethods(values: Inputs) {
return submitLoginName(values).then((response) => {
console.log(response);
if (response.authMethodTypes.length == 1) {
const method = response.authMethodTypes[0];
console.log(method);
// switch (method) {
// case AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSWORD:
// return router.push(
// "/password?" +
// new URLSearchParams({ loginName: values.loginName })
// );
// case AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSKEY:
// break;
// // return router.push(
// // "/passkey/login?" +
// // new URLSearchParams({ loginName: values.loginName })
// // );
// default:
// return router.push(
// "/password?" +
// new URLSearchParams({ loginName: values.loginName })
// );
// }
}
});
}
const { errors } = formState;
@@ -66,7 +100,7 @@ export default function UsernameForm() {
className="self-end"
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(resubmitWithUsername)}
onClick={handleSubmit(setLoginNameAndGetAuthMethods)}
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
continue