<commit_before><template>

  <div class="profile-page">
    <div v-if="hasPrivilege('username')" class="input-field">
      <label>Username</label>
      <input autocomplete="username" id="username" type="text"/>
    </div>
    <div v-if="hasPrivilege('name')" class="input-field">
      <label>Name</label>
      <input autocomplete="name" id="name" type="text"/>
    </div>
    <div v-if="hasPrivilege('password')"  class="input-field">
      <label>Password</label>
      <input autocomplete="new-password" id="password" type="password"/>
    </div>
    <div v-if="hasPrivilege('password')"  class="input-field">
      <label>Confirm Password</label>
      <input autocomplete="new-password" id="confirm-password" type="password"/>
    </div>
    <div v-if="hasPrivilege('delete')"  class="input-field">
      <span class="advanced-option">Delete Account</span>
    </div>
    <div class="input-field">
      <button>Update Profile</button>
    </div>
  </div>

</template>


<script>

  module.exports = {
    name: 'profile-page',
    data: () => ({
      username: '',
      name: '',
      password: '',
    }),
    methods: {
      hasPrivilege(privilege) {
        return this.privileges[privilege];
      },
    },
    vuex: {
      getters: {
        privileges: state => state.core.learnerPrivileges,
      },
      actions: {
        editProfile: state => state.core.learnerPrivileges,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.coreTheme'

  $input-width = 20em
  $input-vertical-spacing = 1rem

  .profile-page
    position: relative
    top: 50%
    transform: translateY(-50%)

  .input-field
    width: $input-width
    margin-left: auto
    margin-right: auto
    margin-bottom: $input-vertical-spacing

    @media(max-width: $portrait-breakpoint)
      width: 100%

    label
      clear: both
      display: block
      font-size: 0.7em
      margin-bottom: ($input-vertical-spacing / 2)
    input
      width: 100%

    .advanced-option
      color: $core-action-light
      width: 100%
      display: inline-block
      font-size: 0.9em

    button
      width: ($input-width * 0.9)
      height: 3em
      display: block
      margin: auto

</style>
<commit_msg>Setting data to use a normal (non-arrow) function so that it can use vue's context<commit_after><template>

  <div class="profile-page">
    <section v-if="session.id">
      <div v-if="hasPrivilege('username')" class="input-field">
        <label>Username</label>
        <input autocomplete="username" id="username" type="text"/>
      </div>
      <div v-if="hasPrivilege('name')" class="input-field">
        <label>Name</label>
        <input autocomplete="name" id="name" type="text"/>
      </div>
      <div v-if="hasPrivilege('password')"  class="input-field">
        <label>Password</label>
        <input autocomplete="new-password" id="password" type="password"/>
      </div>
      <div v-if="hasPrivilege('password')"  class="input-field">
        <label>Confirm Password</label>
        <input autocomplete="new-password" id="confirm-password" type="password"/>
      </div>
      <div v-if="hasPrivilege('delete')"  class="input-field">
        <span class="advanced-option">Delete Account</span>
      </div>
      <div class="input-field">
        <button>Update Profile</button>
      </div>
    </section>

    <div v-else>
      Please sign in to view this page
    </div>
  </div>

</template>


<script>

  module.exports = {
    name: 'profile-page',
    data() {
      return {
        username: this.session.username,
        name: this.session.full_name,
        password: '',
        cofirm_password: '',
      };
    },
    methods: {
      hasPrivilege(privilege) {
        return this.privileges[privilege];
      },
    },
    vuex: {
      getters: {
        privileges: state => state.core.learnerPrivileges,
        session: state => state.core.session,
      },
      actions: {
        editProfile: state => state.core.learnerPrivileges,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.coreTheme'

  $input-width = 20em
  $input-vertical-spacing = 1rem

  .profile-page
    position: relative
    top: 50%
    transform: translateY(-50%)

  .input-field
    width: $input-width
    margin-left: auto
    margin-right: auto
    margin-bottom: $input-vertical-spacing

    @media(max-width: $portrait-breakpoint)
      width: 100%

    label
      clear: both
      display: block
      font-size: 0.7em
      margin-bottom: ($input-vertical-spacing / 2)
    input
      width: 100%

    .advanced-option
      color: $core-action-light
      width: 100%
      display: inline-block
      font-size: 0.9em

    button
      width: ($input-width * 0.9)
      height: 3em
      display: block
      margin: auto

</style>

{'fraction_non_alphanumeric': 0.15553257497414685, 'fraction_numerical': 0.009927611168562564, 'mean_word_length': 2.464183381088825, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 85, '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': '2889351', 'n_tokens_mistral': 1644, 'n_tokens_neox': 1559, 'n_words': 310}