fix(create): surface submit errors and fix keyboard overlap on mobile
The create-proposal submit had no error handling, so failures (e.g. crypto.subtle unavailable outside a secure context) silently reset the button with no feedback. Also set interactiveWidget so the mobile keyboard resizes the layout instead of covering the sticky submit button.
This commit is contained in:
@@ -55,6 +55,11 @@ export default function CreateClient() {
|
|||||||
|
|
||||||
async function handleSubmit(data: ProposalFormData, _publish: boolean) {
|
async function handleSubmit(data: ProposalFormData, _publish: boolean) {
|
||||||
setError('');
|
setError('');
|
||||||
|
if (typeof crypto === 'undefined' || !crypto.subtle) {
|
||||||
|
setError('Your browser blocked secure encryption here (this page needs HTTPS). Try opening the site directly instead of through an in-app browser.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
const key = await generateKey();
|
const key = await generateKey();
|
||||||
const payload = await encryptPayload(key, data);
|
const payload = await encryptPayload(key, data);
|
||||||
const res = await fetch('/api/proposals/guest', {
|
const res = await fetch('/api/proposals/guest', {
|
||||||
@@ -71,6 +76,9 @@ export default function CreateClient() {
|
|||||||
publicUrl: `${json.publicUrl}#k=${key}`,
|
publicUrl: `${json.publicUrl}#k=${key}`,
|
||||||
manageUrl: `${json.manageUrl}#k=${key}`,
|
manageUrl: `${json.manageUrl}#k=${key}`,
|
||||||
});
|
});
|
||||||
|
} catch {
|
||||||
|
setError('Something went wrong creating your proposal. Please try again.');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyLink(url: string) {
|
function copyLink(url: string) {
|
||||||
|
|||||||
@@ -42,6 +42,7 @@ export const viewport: Viewport = {
|
|||||||
themeColor: '#ec4899',
|
themeColor: '#ec4899',
|
||||||
width: 'device-width',
|
width: 'device-width',
|
||||||
initialScale: 1,
|
initialScale: 1,
|
||||||
|
interactiveWidget: 'resizes-content',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
|||||||
Reference in New Issue
Block a user