| 485 | } |
| 486 | |
| 487 | function OAuthCodeView() { |
| 488 | const [formStore, setFormStore] = createStore({ |
| 489 | value: "", |
| 490 | error: undefined as string | undefined, |
| 491 | }) |
| 492 | |
| 493 | async function handleSubmit(e: SubmitEvent) { |
| 494 | e.preventDefault() |
| 495 | |
| 496 | const form = e.currentTarget as HTMLFormElement |
| 497 | const formData = new FormData(form) |
| 498 | const code = formData.get("code") as string |
| 499 | |
| 500 | if (!code?.trim()) { |
| 501 | setFormStore("error", language.t("provider.connect.oauth.code.required")) |
| 502 | return |
| 503 | } |
| 504 | |
| 505 | setFormStore("error", undefined) |
| 506 | const result = await serverSDK() |
| 507 | .client.provider.oauth.callback({ |
| 508 | providerID: props.provider, |
| 509 | method: store.methodIndex, |
| 510 | code, |
| 511 | }) |
| 512 | .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const })) |
| 513 | .catch((error) => ({ ok: false as const, error })) |
| 514 | if (result.ok) { |
| 515 | await complete() |
| 516 | return |
| 517 | } |
| 518 | setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid"))) |
| 519 | } |
| 520 | |
| 521 | return ( |
| 522 | <div class="flex flex-col gap-6"> |
| 523 | <div class="text-14-regular text-text-base"> |
| 524 | {language.t("provider.connect.oauth.code.visit.prefix")} |
| 525 | <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link> |
| 526 | {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })} |
| 527 | </div> |
| 528 | <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4"> |
| 529 | <TextField |
| 530 | autofocus |
| 531 | type="text" |
| 532 | label={language.t("provider.connect.oauth.code.label", { method: method()?.label ?? "" })} |
| 533 | placeholder={language.t("provider.connect.oauth.code.placeholder")} |
| 534 | name="code" |
| 535 | value={formStore.value} |
| 536 | onChange={(v) => setFormStore("value", v)} |
| 537 | validationState={formStore.error ? "invalid" : undefined} |
| 538 | error={formStore.error} |
| 539 | /> |
| 540 | <Button class="w-auto" type="submit" size="large" variant="primary"> |
| 541 | {language.t("common.continue")} |
| 542 | </Button> |
| 543 | </form> |
| 544 | </div> |