<commit_before><template>

  <div>
    <!-- TODO should I try and use the baked in auth page? Does this have a URL-->
    <AuthMessage v-if="!isSuperuser" authorizedRole="superuser" />

    <h1 v-else-if="user === null">{{ $tr('userDoesNotExist') }}</h1>

    <template v-else>
      <div class="section user-info">
        <h1 dir="auto">
          {{ user.full_name }}
          <span v-if="isCurrentUser">
            ({{ $tr('you') }})
          </span>
        </h1>

        <table>
          <tr>
            <th scope="row">{{ $tr('usernameLabel') }}</th>
            <td>{{ user.username }}</td>
          </tr>

          <tr>
            <th scope="row">{{ $tr('userTypeLabel') }}</th>
            <td>
              <UserTypeDisplay :userType="UserType(user)" />
            </td>
          </tr>

          <tr>
            <th scope="row">{{ $tr('facilityLabel') }}</th>
            <td dir="auto">{{ facilityName }}</td>
          </tr>
        </table>

      </div>

      <div class="section superuser">
        <KCheckbox
          class="super-admin-checkbox"
          :disabled="superuserDisabled"
          :label="$tr('makeSuperAdmin')"
          :checked="superuserChecked"
          @change="superuserChecked=$event"
        />
        <PermissionsIcon permissionType="SUPERUSER" class="permissions-icon" />

        <ul
          class="checkbox-description"
          :style="{
            color: superuserDisabled ? $coreTextDisabled : $coreTextAnnotation
          }"
        >
          <li>{{ $tr('superAdminExplanation1') }}</li>
          <li>{{ $tr('superAdminExplanation2') }}</li>
        </ul>
      </div>

      <div class="section">
        <h2>{{ $tr('devicePermissions') }}</h2>
        <KCheckbox
          :disabled="devicePermissionsDisabled"
          :label="$tr('devicePermissionsDetails')"
          :checked="devicePermissionsChecked"
          @change="devicePermissionsChecked=$event"
        />
      </div>

      <div class="buttons">
        <KButton
          :disabled="saveDisabled"
          :text="$tr('saveButton')"
          class="no-margin"
          :primary="true"
          appearance="raised-button"
          @click="save()"
        />
        <KButton
          :disabled="uiBlocked"
          :text="$tr('cancelButton')"
          :primary="false"
          appearance="flat-button"
          @click="goBack()"
        />
      </div>
      <div v-show="uiBlocked">
        {{ progressNotification }}
      </div>
      <div v-show="saveProgress==='FAILURE'">
        {{ $tr('saveFailureNotification') }}
      </div>
    </template>

  </div>

</template>


<script>

  import { mapState, mapGetters, mapActions } from 'vuex';
  import themeMixin from 'kolibri.coreVue.mixins.themeMixin';
  import UserType from 'kolibri.utils.UserType';
  import KButton from 'kolibri.coreVue.components.KButton';
  import KCheckbox from 'kolibri.coreVue.components.KCheckbox';
  import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
  import PermissionsIcon from 'kolibri.coreVue.components.PermissionsIcon';
  import UserTypeDisplay from 'kolibri.coreVue.components.UserTypeDisplay';

  const SUCCESS = 'SUCCESS';
  const IN_PROGRESS = 'IN_PROGRESS';
  const FAILURE = 'FAILURE';

  export default {
    name: 'UserPermissionsPage',
    metaInfo() {
      return {
        title: this.$tr('documentTitle', { name: this.user.full_name }),
      };
    },
    components: {
      AuthMessage,
      KButton,
      KCheckbox,
      PermissionsIcon,
      UserTypeDisplay,
    },
    mixins: [themeMixin],
    data() {
      return {
        devicePermissionsChecked: undefined,
        saveProgress: undefined,
        superuserChecked: undefined,
        uiBlocked: false,
      };
    },
    computed: {
      ...mapGetters(['isSuperuser', 'facilities']),<commit_msg>In UserPermissionsPage, put a person icon next to a person’s name<commit_after><template>

  <div>
    <!-- TODO should I try and use the baked in auth page? Does this have a URL-->
    <AuthMessage v-if="!isSuperuser" authorizedRole="superuser" />

    <h1 v-else-if="user === null">{{ $tr('userDoesNotExist') }}</h1>

    <template v-else>
      <div class="section user-info">
        <h1 dir="auto">
          <KLabeledIcon>
            <KIcon slot="icon" person />
            {{ user.full_name }}
            <span v-if="isCurrentUser">
              ({{ $tr('you') }})
            </span>
          </KLabeledIcon>
        </h1>

        <table>
          <tr>
            <th scope="row">{{ $tr('usernameLabel') }}</th>
            <td>{{ user.username }}</td>
          </tr>

          <tr>
            <th scope="row">{{ $tr('userTypeLabel') }}</th>
            <td>
              <UserTypeDisplay :userType="UserType(user)" />
            </td>
          </tr>

          <tr>
            <th scope="row">{{ $tr('facilityLabel') }}</th>
            <td dir="auto">{{ facilityName }}</td>
          </tr>
        </table>

      </div>

      <div class="section superuser">
        <KCheckbox
          class="super-admin-checkbox"
          :disabled="superuserDisabled"
          :label="$tr('makeSuperAdmin')"
          :checked="superuserChecked"
          @change="superuserChecked=$event"
        />
        <PermissionsIcon permissionType="SUPERUSER" class="permissions-icon" />

        <ul
          class="checkbox-description"
          :style="{
            color: superuserDisabled ? $coreTextDisabled : $coreTextAnnotation
          }"
        >
          <li>{{ $tr('superAdminExplanation1') }}</li>
          <li>{{ $tr('superAdminExplanation2') }}</li>
        </ul>
      </div>

      <div class="section">
        <h2>{{ $tr('devicePermissions') }}</h2>
        <KCheckbox
          :disabled="devicePermissionsDisabled"
          :label="$tr('devicePermissionsDetails')"
          :checked="devicePermissionsChecked"
          @change="devicePermissionsChecked=$event"
        />
      </div>

      <div class="buttons">
        <KButton
          :disabled="saveDisabled"
          :text="$tr('saveButton')"
          class="no-margin"
          :primary="true"
          appearance="raised-button"
          @click="save()"
        />
        <KButton
          :disabled="uiBlocked"
          :text="$tr('cancelButton')"
          :primary="false"
          appearance="flat-button"
          @click="goBack()"
        />
      </div>
      <div v-show="uiBlocked">
        {{ progressNotification }}
      </div>
      <div v-show="saveProgress==='FAILURE'">
        {{ $tr('saveFailureNotification') }}
      </div>
    </template>

  </div>

</template>


<script>

  import { mapState, mapGetters, mapActions } from 'vuex';
  import themeMixin from 'kolibri.coreVue.mixins.themeMixin';
  import UserType from 'kolibri.utils.UserType';
  import KButton from 'kolibri.coreVue.components.KButton';
  import KCheckbox from 'kolibri.coreVue.components.KCheckbox';
  import KIcon from 'kolibri.coreVue.components.KIcon';
  import KLabeledIcon from 'kolibri.coreVue.components.KLabeledIcon';
  import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
  import PermissionsIcon from 'kolibri.coreVue.components.PermissionsIcon';
  import UserTypeDisplay from 'kolibri.coreVue.components.UserTypeDisplay';

  const SUCCESS = 'SUCCESS';
  const IN_PROGRESS = 'IN_PROGRESS';
  const FAILURE = 'FAILURE';

  export default {
    name: 'UserPermissionsPage',
    metaInfo() {
      return {
        title: this.$tr('documentTitle', { name: this.user.full_name }),
      };
    },
    components: {
      AuthMessage,
      KButton,
      KCheckbox,
      PermissionsIcon,
      UserTypeDisplay,
      KIcon,
      KLabeledIcon,
    },
    mixins: [themeMixin],
    data() {
      return {
        devicePermissionsChecked: undefined,
        saveProgress: undefined,
        superuserChecked: undefined,
        uiBlocked: false,
      };
    },
    computed: {
      ...mapGetters(['isSuperuser', 'facilities']),
{'fraction_non_alphanumeric': 0.15237260548391135, 'fraction_numerical': 0.002003255289846, 'mean_word_length': 2.1610605461020973, 'pattern_counts': {'":': 0, '<': 128, '<?xml version=': 0, '>': 128, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2408113', 'n_tokens_mistral': 2413, 'n_tokens_neox': 2399, 'n_words': 446}