chromium/chrome/browser/resources/ash/settings/os_people_page/os_sync_encryption_options.html

<style include="cr-shared-style settings-shared">
  #create-password-box {
    margin-bottom: 1em;
  }

  #create-password-box .list-item {
    margin-bottom: var(--cr-form-field-bottom-spacing);
  }

  cr-input {
    --cr-input-width: var(--cr-default-input-max-width);
  }

  .passphrase-reset-icon {
    margin-inline-end: 8px;
  }

  cr-radio-button[name='encrypt-with-passphrase'] {
    align-items: start;
  }
</style>

<template is="dom-if" if="[[!syncPrefs.passphraseRequired]]">
  <div id="encryptionRadioGroupContainer" class="list-frame">
    <cr-radio-group
        id="encryptionRadioGroup"
        selected="[[selectedEncryptionRadio_(syncPrefs)]]"
        on-selected-changed="onEncryptionRadioSelectionChanged_"
        disabled$="[[disableEncryptionOptions_]]">
      <cr-radio-button name="encrypt-with-google" class="list-item"
          aria-label="$i18n{encryptWithGoogleCredentialsLabel}">
        $i18n{encryptWithGoogleCredentialsLabel}
      </cr-radio-button>
      <cr-radio-button name="encrypt-with-passphrase"
          class="list-item">
        <span hidden="[[!existingPassphraseLabel]]">
          [[existingPassphraseLabel]]
        </span>
        <span on-click="onLearnMoreClick_"
            hidden="[[existingPassphraseLabel]]">
          $i18nRaw{encryptWithSyncPassphraseLabel}
        </span>
        <template is="dom-if" if="[[creatingNewPassphrase_]]" restamp>
          <div id="create-password-box">
            <div class="list-item">
              <span>$i18nRaw{passphraseExplanationText}</span>
            </div>
            <cr-input id="passphraseInput" type="password"
                value="{{passphrase_}}"
                placeholder="$i18n{passphrasePlaceholder}"
                error-message="$i18n{emptyPassphraseError}"
                on-keypress="onNewPassphraseInputKeypress_">
            </cr-input>
            <cr-input id="passphraseConfirmationInput" type="password"
                value="{{confirmation_}}"
                placeholder="$i18n{passphraseConfirmationPlaceholder}"
                error-message="$i18n{mismatchedPassphraseError}"
                on-keypress="onNewPassphraseInputKeypress_">
            </cr-input>
            <cr-button id="saveNewPassphrase"
                on-click="onSaveNewPassphraseClick_" class="action-button"
                disabled="[[!isSaveNewPassphraseEnabled_(
                              passphrase_, confirmation_)]]">
              $i18n{save}
            </cr-button>
          </div>
        </template>
      </cr-radio-button>
    </cr-radio-group>
  </div>
</template>