Skip to content

[CORE-240] Cannot Submit If only OAuth Question #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikkalin1008 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[CORE-240] Cannot Submit If only OAuth Question #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e09794e
fix: option flickers while adding
nikkalin1008 Mar 10, 2026
5253822
fix: OAuth authenticate window
nikkalin1008 Mar 10, 2026
c616a09
fix: others option cannot be modified
nikkalin1008 Mar 10, 2026
3a5579b
fix: cannot submit if only have OAuth question
nikkalin1008 Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 34 additions & 41 deletions src/features/form/components/AdminFormDetailPages/SectionEditPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,48 +138,41 @@ export const AdminSectionEditPage = () => {
const syncQuestionFromApi = (apiQuestion: FormsQuestionResponse) => {
setQuestions(prev => {
if (!prev[index]) return prev;
const old = prev[index];

const nextOptions = old.isFromAnswer ? [] : old.options;
const nextDetailOptions = old.detailOptions;

const updated: Question = {
...old,
title: apiQuestion.title ?? old.title,
description: apiQuestion.description ?? old.description,
required: apiQuestion.required ?? old.required,
...(apiQuestion.sourceId !== undefined && {
sourceQuestionId: apiQuestion.sourceId ?? undefined,
isFromAnswer: Boolean(apiQuestion.sourceId)
}),
icon: (apiQuestion.scale?.icon ?? old.icon) as Question["icon"],
start: apiQuestion.scale?.minVal ?? old.start,
end: apiQuestion.scale?.maxVal ?? old.end,
startLabel: apiQuestion.scale?.minValueLabel ?? old.startLabel,
endLabel: apiQuestion.scale?.maxValueLabel ?? old.endLabel,
uploadAllowedFileTypes: apiQuestion.uploadFile?.allowedFileTypes ? [...apiQuestion.uploadFile.allowedFileTypes] : old.uploadAllowedFileTypes,
uploadMaxFileAmount: apiQuestion.uploadFile?.maxFileAmount ?? old.uploadMaxFileAmount,
uploadMaxFileSizeLimit: apiQuestion.uploadFile?.maxFileSizeLimit ?? old.uploadMaxFileSizeLimit,
dateHasYear: apiQuestion.date?.hasYear ?? old.dateHasYear,
dateHasMonth: apiQuestion.date?.hasMonth ?? old.dateHasMonth,
dateHasDay: apiQuestion.date?.hasDay ?? old.dateHasDay,
dateHasMinDate: Boolean(apiQuestion.date?.minDate),
dateHasMaxDate: Boolean(apiQuestion.date?.maxDate),
dateMinDate: apiQuestion.date?.minDate ? apiQuestion.date.minDate.slice(0, 10) : "",
dateMaxDate: apiQuestion.date?.maxDate ? apiQuestion.date.maxDate.slice(0, 10) : "",
options: nextOptions,
detailOptions: nextDetailOptions
};

const next = [...prev];
const target = next[index];
target.title = apiQuestion.title ?? target.title;
target.description = apiQuestion.description ?? target.description;
target.required = apiQuestion.required ?? target.required;
if (apiQuestion.sourceId !== undefined) {
target.sourceQuestionId = apiQuestion.sourceId ?? undefined;
target.isFromAnswer = Boolean(apiQuestion.sourceId);
}
target.icon = apiQuestion.scale?.icon ?? target.icon;
target.start = apiQuestion.scale?.minVal ?? target.start;
target.end = apiQuestion.scale?.maxVal ?? target.end;
target.startLabel = apiQuestion.scale?.minValueLabel ?? target.startLabel;
target.endLabel = apiQuestion.scale?.maxValueLabel ?? target.endLabel;
target.uploadAllowedFileTypes = apiQuestion.uploadFile?.allowedFileTypes ? [...apiQuestion.uploadFile.allowedFileTypes] : target.uploadAllowedFileTypes;
target.uploadMaxFileAmount = apiQuestion.uploadFile?.maxFileAmount ?? target.uploadMaxFileAmount;
target.uploadMaxFileSizeLimit = apiQuestion.uploadFile?.maxFileSizeLimit ?? target.uploadMaxFileSizeLimit;
target.dateHasYear = apiQuestion.date?.hasYear ?? target.dateHasYear;
target.dateHasMonth = apiQuestion.date?.hasMonth ?? target.dateHasMonth;
target.dateHasDay = apiQuestion.date?.hasDay ?? target.dateHasDay;
target.dateHasMinDate = Boolean(apiQuestion.date?.minDate);
target.dateHasMaxDate = Boolean(apiQuestion.date?.maxDate);
target.dateMinDate = apiQuestion.date?.minDate ? apiQuestion.date.minDate.slice(0, 10) : "";
target.dateMaxDate = apiQuestion.date?.maxDate ? apiQuestion.date.maxDate.slice(0, 10) : "";

if (target.type === "DETAILED_MULTIPLE_CHOICE" && apiQuestion.choices) {
target.detailOptions = apiQuestion.choices.map(choice => ({
id: choice.id,
label: choice.name ?? "",
description: choice.description ?? ""
}));
} else if (apiQuestion.choices) {
target.options = apiQuestion.choices.map(choice => ({
id: choice.id,
label: choice.name ?? "",
isOther: choice.isOther ?? false
}));
} else if (target.isFromAnswer) {
target.options = [];
}

questionsRef.current = next;
next[index] = updated;
return next;
});
};
Expand Down
4 changes: 2 additions & 2 deletions src/features/form/components/AdminFormDetailPages/components/OptionsQuestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ export const OptionsQuestion = (props: OptionsQuestionProps) => {
}
if (option.isOther) {
return (
<div className={styles.optionWrapper}>
<OptionsInput key="other" value="其他（使用者填寫）" type={props.type} variant="none" readOnly />
<div key={option.id ?? index} className={styles.optionWrapper}>
<OptionsInput value="其他（使用者填寫）" type={props.type} variant="none" readOnly />
{props.options.length > 1 && <X onClick={props.onRemoveOther} />}
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions src/features/form/components/AdminFormDetailPages/types/question.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,12 @@ export type QuestionTemplate = {
};

export type Option = {
/** Stable identity for React key – use API choice ID or a client-side UUID */
id?: string;
label: string;
isOther?: boolean;
};

export type DetailOption = {
/** Stable identity for React key – use API choice ID or a client-side UUID */
id?: string;
label: string;
description: string;
Expand Down
12 changes: 5 additions & 7 deletions src/features/form/components/FormFilloutPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,12 +293,15 @@ export const FormFilloutPage = () => {

if (!urlResponseId) return;

const NO_ANSWER_REQUIRED_TYPES: string[] = ["OAUTH_CONNECT"];

// Validate required fields across all non-preview sections
const realSections = sections.filter(s => s.id !== "preview");
for (let i = 0; i < realSections.length; i++) {
const section = realSections[i];
const missingQuestion = section.questions?.find(q => {
if (!q.required) return false;
if (NO_ANSWER_REQUIRED_TYPES.includes(q.type)) return false;
Comment on lines +296 to +304
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Required-field validation now skips OAUTH_CONNECT questions entirely. This allows submitting the form even when an OAuth question is marked required but the user hasn’t actually connected (the value would be empty). Instead of bypassing required validation for this type, keep the normal required check and only special-case the submit payload (e.g., allow an empty answers array when all collected answers are excluded types like OAUTH_CONNECT/UPLOAD_FILE).

Suggested change
const NO_ANSWER_REQUIRED_TYPES: string[] = ["OAUTH_CONNECT"];
// Validate required fields across all non-preview sections
const realSections = sections.filter(s => s.id !== "preview");
for (let i = 0; i < realSections.length; i++) {
const section = realSections[i];
const missingQuestion = section.questions?.find(q => {
if (!q.required) return false;
if (NO_ANSWER_REQUIRED_TYPES.includes(q.type)) return false;
// Validate required fields across all non-preview sections
const realSections = sections.filter(s => s.id !== "preview");
for (let i = 0; i < realSections.length; i++) {
const section = realSections[i];
const missingQuestion = section.questions?.find(q => {
if (!q.required) return false;

Copilot uses AI. Check for mistakes.
const value = answers[q.id] ?? "";
return value.trim() === "";
});
Expand All @@ -314,13 +317,8 @@ export const FormFilloutPage = () => {
}

try {
// Build answers payload (same logic as saveAnswers)
const payload = buildAnswersPayload(sections, answers, otherTexts);

if (!payload) {
pushToast({ title: "提交失敗", description: "無法取得填答資料，請稍後再試一次", variant: "error" });
return;
}
// Build answers payload
const payload = buildAnswersPayload(sections, answers, otherTexts) ?? { answers: [] };

submitResponseMutation.mutate(
{
Expand Down
8 changes: 7 additions & 1 deletion src/shared/components/AccountButton/AccountButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,13 @@ export const AccountButton = ({ logo, children, connected = false, connectedLabe
const oauthBase = `/api/responses/${responseId}/questions/${questionId}/oauth`;
const connectUrl = `${oauthBase}?r=${encodeURIComponent(callbackUrl.toString())}`;

const popup = window.open(connectUrl, "form-oauth-connect", "popup=yes,width=520,height=760");
const popupWidth = 520;
const popupHeight = 760;
const screenLeft = window.screenLeft ?? window.screenX;
const screenTop = window.screenTop ?? window.screenY;
const left = Math.round(screenLeft + (window.outerWidth - popupWidth) / 2);
const top = Math.round(screenTop + (window.outerHeight - popupHeight) / 2);
const popup = window.open(connectUrl, "form-oauth-connect", `popup=yes,width=${popupWidth},height=${popupHeight},left=${left},top=${top}`);
if (!popup) {
pushToast({ title: "無法開啟綁定視窗", description: "請確認瀏覽器未封鎖彈出視窗", variant: "error" });
onConnectErrorRef.current?.("無法開啟綁定視窗");
Expand Down
Loading