Complete guided Scheduling interface patterns

webui/src/features/scheduling/SchedulingPublicPage.tsx

@@ -4,8 +4,10 @@ import {
   Button,
   Card,
   DismissibleAlert,
+  DocumentationHelpLink,
   FormField,
   LoadingFrame,
+  PasswordField,
   formatDateTime,
   type ApiSettings,
   type AuthInfo
@@ -44,6 +46,7 @@ const I18N = {
   password: "i18n:govoplan-scheduling.guest_password.94545e82",
   response: "i18n:govoplan-scheduling.your_availability.f86c8215",
   saved: "i18n:govoplan-scheduling.your_response_has_been_recorded.b855088d",
+  saving: "i18n:govoplan-scheduling.saving.56a2285c",
   submit: "i18n:govoplan-scheduling.submit_response.a5f0c053",
   unavailable: "i18n:govoplan-scheduling.unavailable.2c9c1f79"
 } as const;
@@ -166,7 +169,15 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
         )}
 
         {!response && !loading && (
-          <Card title={I18N.accessDetails}>
+          <Card
+            title={I18N.accessDetails}
+            actions={(
+              <DocumentationHelpLink
+                reference={{
+                  topicId: "scheduling.find-and-decide-meeting-time",
+                  documentationType: "user"
+                }} />
+            )}>
             <form className="scheduling-public-access-form" onSubmit={openRequest}>
               <p className="muted">{I18N.accessHelp}</p>
               {accessAttempted && error && <DismissibleAlert tone="danger">{error}</DismissibleAlert>}
@@ -180,16 +191,20 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
                   />
                 </FormField>
                 <FormField label={I18N.password}>
-                  <input
-                    type="password"
+                  <PasswordField
                     autoComplete="current-password"
                     value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                  />
+                    onValueChange={setPassword} />
                 </FormField>
               </div>
               <div className="scheduling-public-actions">
-                <Button type="submit" variant="primary">{I18N.accessRequest}</Button>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  disabled={loading}
+                  disabledReason={loading ? I18N.loading : undefined}>
+                  {I18N.accessRequest}
+                </Button>
               </div>
             </form>
           </Card>
@@ -197,7 +212,15 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
 
         {response && (
           <form className="scheduling-public-content" onSubmit={saveResponse}>
-            <Card title={response.title}>
+            <Card
+              title={response.title}
+              actions={(
+                <DocumentationHelpLink
+                  reference={{
+                    topicId: "scheduling.find-and-decide-meeting-time",
+                    documentationType: "user"
+                  }} />
+              )}>
               {response.description && <p className="scheduling-public-description">{response.description}</p>}
               <dl className="scheduling-public-summary">
                 {response.location && <><dt>i18n:govoplan-scheduling.location.d219c681</dt><dd>{response.location}</dd></>}
@@ -263,7 +286,13 @@ export default function SchedulingPublicPage({ settings, auth }: SchedulingPubli
               )}
               {collecting && (
                 <div className="scheduling-public-actions">
-                  <Button type="submit" variant="primary" disabled={saving}>{I18N.submit}</Button>
+                  <Button
+                    type="submit"
+                    variant="primary"
+                    disabled={saving}
+                    disabledReason={saving ? I18N.saving : undefined}>
+                    {I18N.submit}
+                  </Button>
                 </div>
               )}
             </Card>}