<commit_before><template>

  <div class="user-edit-modal">
    <modal btntext="Edit">
      <div class="title" slot="header">User edit</div>
      <div slot="body">
        <br>Username: <input type="text" v-model="username" placeholder="Please type in your username."><br>
        <br>Password: <input type="text" v-model="password" placeholder="Please type in your password."><br>
        <br>First name: <input type="text" v-model="firstName" placeholder="Please type in your first name."><br>
        <br>Last name: <input type="text" v-model="lastName" placeholder="Please type in your last name."><br>
        <!-- radio buttons for selecting role -->
        <br>Learner <input type="radio" value="learner" v-model="role"><br>
        <br>Admin <input type="radio" value="admin" v-model="role"><br>
      </div>
      <div slot="footer">
        <button class="confirm-btn" type="button" @click="editUser">Confirm</button>
      </div>
    </modal>
  </div>

</template>


<script>

  const actions = require('../actions');

  module.exports = {
    components: {
      modal: require('./modal.vue'),
    },
    props: [
      'userid', 'username', 'firstname', 'lastname', 'roles',
    ],
    data() {
      return {
        username: this.username,
        password: '',
        firstName: this.firstname,
        lastName: this.lastname,
        role: this.roles.length ? this.roles[0].kind : 'learner',
      };
    },
    methods: {
      editUser() {
        const payload = {
          password: <PASSWORD>,
          username: this.username,
          first_name: this.firstName,
          last_name: this.lastName,
          facility: this.facility,
        };
        this.updateUser(this.userid, payload, this.role);
      },
    },
    vuex: {
      getters: {
        facility: state => state.facility,
      },
      actions: {
        updateUser: actions.updateUser,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  .title
    display: inline

  .confirm-btn
    float: right

</style>
<commit_msg>make sure props and data have different names<commit_after><template>

  <div class="user-edit-modal">
    <modal btntext="Edit">
      <div class="title" slot="header">User edit</div>
      <div slot="body">
        <br>Username: <input type="text" v-model="username_new" placeholder="Please type in your username."><br>
        <br>Password: <input type="text" v-model="password_new" placeholder="Please type in your password."><br>
        <br>First name: <input type="text" v-model="firstName_new" placeholder="Please type in your first name."><br>
        <br>Last name: <input type="text" v-model="lastName_new" placeholder="Please type in your last name."><br>
        <!-- radio buttons for selecting role -->
        <br>Learner <input type="radio" value="learner" v-model="role_new"><br>
        <br>Admin <input type="radio" value="admin" v-model="role_new"><br>
      </div>
      <div slot="footer">
        <button class="confirm-btn" type="button" @click="editUser">Confirm</button>
      </div>
    </modal>
  </div>

</template>


<script>

  const actions = require('../actions');

  module.exports = {
    components: {
      modal: require('./modal.vue'),
    },
    props: [
      'userid', 'username', 'firstname', 'lastname', 'roles',
    ],
    data() {
      return {
        username_new: this.username,
        password_new: '',
        firstName_new: this.firstname,
        lastName_new: this.lastname,
        role_new: this.roles.length ? this.roles[0].kind : 'learner',
      };
    },
    methods: {
      editUser() {
        const payload = {
          password: <PASSWORD>,
          username: this.username_new,
          first_name: this.firstName_new,
          last_name: this.lastName_new,
          facility: this.facility,
        };
        this.updateUser(this.userid, payload, this.role_new);
      },
    },
    vuex: {
      getters: {
        facility: state => state.facility,
      },
      actions: {
        updateUser: actions.updateUser,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  .title
    display: inline

  .confirm-btn
    float: right

</style>

{'fraction_non_alphanumeric': 0.1603456553048488, 'fraction_numerical': 0.00048007681228996637, 'mean_word_length': 2.5134907251264758, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 81, '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': '2767464', 'n_tokens_mistral': 1304, 'n_tokens_neox': 1289, 'n_words': 287}