preferences-account.htm

<div id="preferences-account" class="preferences-page preferences-account" data-bind="with: $root.preferencesAccount, removed_from_view: $root.preferencesAccount.removedFromView">
  <div class="preferences-titlebar" data-bind="text: t('preferencesAccount')"></div>
  <div class="preferences-content" data-bind="fadingscrollbar">
    <section class="preferences-section preferences-section-account-profile">
      <div class="preferences-account-user-data" data-bind="css: {'preferences-account-user-data-temporary': !isActivatedAccount()}">
        <!-- ko if: isActivatedAccount() -->
          <div class="preferences-account-name-wrapper">
            <input class="preferences-account-name preferences-account-input"
                   id="name" type="text"
                   data-bind="value: name, event: {blur: resetNameInput}, enter: changeName, attr: {placeholder: t('preferencesAccountUsernamePlaceholder'), readonly: !canEditProfile(selfUser())}"
                   data-uie-name="enter-name"
                   maxlength="64"
                   spellcheck="false" />
            <!-- ko if: canEditProfile(selfUser()) -->
              <!-- ko if: nameSaved() -->
                <animated-check-icon data-uie-name="enter-name-icon-check"></animated-check-icon>
              <!-- /ko -->
              <!-- ko ifnot: nameSaved() -->
                <edit-icon data-uie-name="enter-name-icon"></edit-icon>
              <!-- /ko -->
            <!-- /ko -->
          </div>

          <!-- ko if: isTeam() -->
            <availability-state class="preferences-account-availability"
                                data-bind="click: clickOnAvailability"
                                data-uie-name="status-availability-in-profile"
                                params="availability: availability, label: availabilityLabel, showArrow: true">
            </availability-state>
          <!-- /ko -->

          <div class="preferences-account-username-wrapper">
            <span class="preferences-account-username-atsign">@</span>
            <input class="preferences-account-username preferences-account-input"
                   id="username" type="text"
                   data-bind="textInput: username,
                     event: {input: verifyUsername, keypress: checkUsernameInput, blur: resetUsernameInput},
                     enter: changeUsername,
                     hasFocus: shouldFocusUsername(),
                     attr: {readonly: !canEditProfile(selfUser())}"
                   data-uie-name="enter-username"
                   maxlength="21"
                   spellcheck="false"
                   autocomplete="off" />
            <!-- ko if: canEditProfile(selfUser()) -->
              <!-- ko if: usernameSaved() -->
                <animated-check-icon data-uie-name="enter-username-icon-check"></animated-check-icon>
              <!-- /ko -->
              <!-- ko ifnot: usernameSaved() -->
                <edit-icon data-uie-name="enter-username-icon"></edit-icon>
              <!-- /ko -->
            <!-- /ko -->
            <!-- ko ifnot: usernameState() -->
              <div class="preferences-account-username-hint text-foreground font-size-xs"
                   data-bind="text: t('preferencesAccountUsernameHint')"></div>
            <!-- /ko -->
            <!-- ko if: usernameState() === UserNameState.AVAILABLE -->
              <div class="preferences-account-username-error font-size-xs"
                   data-bind="text: t('preferencesAccountUsernameAvailable')"></div>
            <!-- /ko -->
            <!-- ko if: usernameState() === UserNameState.TAKEN -->
              <div class="preferences-account-username-error font-size-xs"
                   data-bind="text: t('preferencesAccountUsernameErrorTaken'), css: {'text-red': submittedUsername() === enteredUsername()}"></div>
            <!-- /ko -->
          </div>

          <!-- ko if: isTeam() -->
            <div class="preferences-account-team preferences-section-account-space-after" data-bind="html: teamName()" data-uie-name="status-team"></div>
          <!-- /ko -->

          <div class="preferences-account-email-wrapper">
            <input class="preferences-account-email preferences-account-input"
                   id="email" type="text"
                   data-bind="value: email, event: {blur: resetEmailInput}, enter: changeEmail, attr: {placeholder: t('preferencesAccountEmailPlaceholder'), readonly: !canEditProfile(selfUser())}"
                   data-uie-name="enter-email"
                   spellcheck="false" />
            <!-- ko if: canEditProfile(selfUser()) -->
              <edit-icon data-uie-name="enter-email-icon"></edit-icon>
            <!-- /ko -->
          </div>
          <div class="preferences-account-phone" data-bind="text: selfUser().phone()" data-uie-name="enter-phone"></div>

          <!-- ko if: canEditProfile(selfUser()) -->
            <accent-color-picker class="preferences-account-accent-color preferences-section-account-space-before" params="user: selfUser(), selected: changeAccentColor" data-uie-name="enter-accent-color"></accent-color-picker>
          <!-- /ko -->
        <!-- /ko -->

        <!-- ko ifnot: isActivatedAccount() -->
          <div class="preferences-account-name-wrapper">
            <div class="preferences-account-name" data-bind="text: name" data-uie-name="status-name"></div>
          </div>
          <hr class="preferences-separator">
          <div class="preferences-link accent-text" data-bind="click: clickOnLeaveGuestRoom, text: t('preferencesAccountLeaveGuestRoom')" data-uie-name="do-leave-guest-room"></div>
          <div class="preferences-leave-disclaimer" data-bind="text: t('preferencesAccountLeaveGuestRoomDescription')"></div>
        <!-- /ko -->
      </div>

      <!-- ko if: isActivatedAccount() -->
        <label class="preferences-account-picture-button" for="self-upload-file-input" data-bind="attr: {title: t('tooltipPreferencesPicture')}">
          <participant-avatar params="participant: selfUser, size: ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
          <input id="self-upload-file-input"
                 type="file"
                 data-bind="attr: {accept: Config.PROFILE_IMAGE.FILE_TYPES.join(',')}, file_select: clickOnChangePicture"
                 data-uie-name="do-select-picture"/>
          <span class="icon-camera"></span>
        </label>
      <!-- /ko -->

      <!-- ko ifnot: isActivatedAccount() -->
        <div>
          <participant-avatar params="participant: selfUser, size: ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
        </div>
      <!-- /ko -->
    </section>

    <section class="preferences-section preferences-section-info" data-uie-name="preferences-info-section" data-bind="visible: richProfileFields().length > 0">
      <hr class="preferences-separator">
      <header class="preferences-header" data-bind="text: t('preferencesAccountInfo')"></header>
      <enriched-fields params="user: selfUser, onFieldsLoaded: richProfileFields"></enriched-fields>
    </section>

    <!-- ko if: isConsentCheckEnabled() -->
      <section class="preferences-section preferences-section-data-usage">
        <hr class="preferences-separator">
        <header class="preferences-header" data-bind="text: t('preferencesAccountData')"></header>

        <!-- ko if: canSendAnalytics() -->
          <div class="preferences-option">
            <div class="preferences-option-icon checkbox accent-text" data-bind="attr: {'data-uie-value': optionPrivacy}" data-uie-name="status-preference-privacy">
              <input type="checkbox" id="privacy-checkbox" data-bind="checked: optionPrivacy">
              <label class="preferences-options-checkbox-label" for="privacy-checkbox" data-bind="text: t('preferencesAccountDataCheckbox')"></label>
            </div>
          </div>
          <div class="preferences-detail" data-bind="text: t('preferencesAccountDataDetail', brandName)"></div>
        <!-- /ko -->

        <!-- ko if: isActivatedAccount() -->
          <div class="preferences-option">
            <div class="preferences-option-icon checkbox accent-text" data-bind="attr: {'data-uie-value': optionMarketingConsent}" data-uie-name="status-preference-marketing">
              <input type="checkbox" id="marketing-checkbox" data-bind="checked: optionMarketingConsent, event: {change: onMarketingConsentChange}">
              <label class="preferences-options-checkbox-label" for="marketing-checkbox" data-bind="text: t('preferencesAccountMarketingConsentCheckbox')"></label>
            </div>
          </div>
          <div class="preferences-detail" data-bind="text: t('preferencesAccountMarketingConsentDetail', brandName)"></div>
        <!-- /ko -->
      </section>
    <!-- /ko -->

    <section class="preferences-section preferences-section-privacy">
      <hr class="preferences-separator">
      <header class="preferences-header" data-bind="text: t('preferencesAccountPrivacy')"></header>
      <div class="preferences-option">
        <div class="preferences-option-icon checkbox accent-text" data-uie-name="status-preference-read-receipts">
          <input type="checkbox" id="read-receipts-checkbox" data-bind="checked: optionReadReceipts, event: {change: onReadReceiptsChange}">
          <label class="preferences-options-checkbox-label" for="read-receipts-checkbox" data-bind="text: t('preferencesAccountReadReceiptsCheckbox')"></label>
        </div>
      </div>
      <div class="preferences-detail" data-bind="text: t('preferencesAccountReadReceiptsDetail')"></div>
    </section>

    <!-- ko if: isActivatedAccount() -->
      <!-- ko if: !isTemporaryAndNonPersistent -->
        <section class="preferences-section preferences-section-conversation-history">
          <hr class="preferences-separator">
          <header class="preferences-header" data-bind="text: t('preferencesOptionsBackupHeader')"></header>
          <div class="preferences-link accent-text" data-bind="click: clickOnBackupExport, text: t('preferencesOptionsBackupExportHeadline')" data-uie-name="do-backup-export"></div>
          <div class="preferences-detail" data-bind="text: t('preferencesOptionsBackupExportSecondary', brandName)"></div>
          <label class="preferences-link accent-text preferences-history-backup-import-field" data-uie-name="do-backup-import">
            <span data-bind="text: t('preferencesOptionsBackupImportHeadline')"></span>
            <input type="file" data-bind="event: {change: onImportFileChange}, attr: {accept: `.${fileExtension}`}" data-uie-name="input-import-file"/>
          </label>
          <div class="preferences-detail" data-bind="text: t('preferencesOptionsBackupImportSecondary')"></div>
        </section>
      <!-- /ko -->

      <section class="preferences-section preferences-section-account-security">
        <hr class="preferences-separator">

        <!-- ko if: z.userPermission().canManageTeam() && !!manageTeamUrl -->
          <div class="preferences-link accent-text" data-bind="click: clickOpenManageTeam, text: t('preferencesAccountManageTeam')" data-uie-name="do-manage-team"></div>
        <!-- /ko -->

        <!-- ko if: !isMacOsWrapper && !!createTeamUrl -->
          <a class="preferences-link accent-text" data-bind="attr: {href: createTeamUrl}, text: t('preferencesAccountCreateTeam')" rel="nofollow noopener noreferrer" target="_blank" data-uie-name="do-create-team"></a>
        <!-- /ko -->

        <!-- ko if: optionResetAppLock -->
          <div class="preferences-link accent-text" data-bind="click: clickOnResetAppLockPassphrase, text: t('preferencesAccountResetAppLockPassphrase')" data-uie-name="do-reset-app-lock"></div>
        <!-- /ko -->

        <!-- ko ifnot: selfUser().isSingleSignOn -->
          <div class="preferences-link accent-text" data-bind="click: clickOnResetPassword, text: t('preferencesAccountResetPassword'), attr: {title: t('tooltipPreferencesPassword')}" data-uie-name="do-reset-password"></div>
        <!-- /ko -->

        <!-- ko ifnot: isTeam() -->
          <div class="preferences-link accent-text" data-bind="click: clickOnDeleteAccount, text: t('preferencesAccountDelete')" data-uie-name="go-delete-account"></div>
        <!-- /ko -->
      </section>
    <!-- /ko -->

    <!-- ko if: isActivatedAccount() && !isDesktop -->
      <section class="preferences-section">
        <div class="preferences-link accent-text" data-bind="click: clickOnLogout, text: t('preferencesAccountLogOut')" data-uie-name="do-logout"></div>
      </section>
    <!-- /ko -->
  </div>
</div>