Function Settings

components/Settings.ts:148–295

(
  {
    formData: formDataObject,
    error,
    notice,
    currency,
    timezoneId,
    isExpensesAppEnabled,
    isMultiFactorAuthEnabled,
    isCalendarAppEnabled,
    helpEmail,
    user,
  }: SettingsProps,
)

}

export default function Settings(
  {
    formData: formDataObject,
    error,
    notice,
    currency,
    timezoneId,
    isExpensesAppEnabled,
    isMultiFactorAuthEnabled,
    isCalendarAppEnabled,
    helpEmail,
    user,
  }: SettingsProps,
): string {
  const formData = convertObjectToFormData(formDataObject);

  const multiFactorAuthMethods = getEnabledMultiFactorAuthMethodsFromUser(user);

  return html`
    <section class="mx-auto max-w-7xl my-8">
      ${error
        ? html`
          <section class="notification-error">
            <h3>${escapeHtml(error.title)}</h3>
            <p>${escapeHtml(error.message)}</p>
          </section>
        `
        : ''} ${notice
        ? html`
          <section class="notification-success">
            <h3>${escapeHtml(notice.title)}</h3>
            <p>${escapeHtml(notice.message)}</p>
          </section>
        `
        : ''}

      <h2 class="text-2xl mb-4 text-left px-4 max-w-3xl mx-auto lg:min-w-96">Change your email</h2>

      <form method="POST" class="mb-12">
        ${formFields('change-email', formData).map((field) => generateFieldHtml(field, formData)).join('')}
        <section class="flex justify-end mt-8 mb-4">
          <button class="button-secondary" type="submit">Change email</button>
        </section>
      </form>

      <h2 class="text-2xl mb-4 text-left px-4 max-w-3xl mx-auto lg:min-w-96">Change your password</h2>

      <form method="POST" class="mb-12">
        ${formFields('change-password', formData).map((field) => generateFieldHtml(field, formData)).join('')}
        <section class="flex justify-end mt-8 mb-4">
          <button class="button-secondary" type="submit">Change password</button>
        </section>
      </form>

      <h2 class="text-2xl mb-4 text-left px-4 max-w-3xl mx-auto lg:min-w-96">Change your WebDav password</h2>

      <form method="POST" class="mb-12">
        ${formFields('change-dav-password', formData).map((field) => generateFieldHtml(field, formData)).join('')}