Function Settings

public/components/Settings.js:102–229

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

  return fields;
}
export default function Settings({
  formData: formDataObject,
  error,
  notice,
  currency,
  timezoneId,
  isExpensesAppEnabled,
  isMultiFactorAuthEnabled,
  isCalendarAppEnabled,
  helpEmail,
  user
}) {
  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('')}
        <section class="flex justify-end mt-8 mb-4">
          <button class="button-secondary" type="submit">Change WebDav password</button>
        </section>
      </form>

      ${isExpensesAppEnabled ? html`
          <h2 class="text-2xl mb-4 text-left px-4 max-w-3xl mx-auto lg:min-w-96">Change your currency</h2>
          <p class="text-left mt-2 mb-6 px-4 max-w-3xl mx-auto lg:min-w-96">