<commit_before><template>

  <div class="user-edit-modal">
    <modal v-ref:modal btntext="Edit">

      <h1 slot="header" class="header">Edit Account Info</h1>

      <div @keyup.enter="editUser" v-if="!usr_delete && !pw_reset" slot="body">

        <div class="user-field">
          <label for="username">Full Name</label>:
          <input type="text" class="edit-form edit-fullname" aria-label="fullname" id="name" v-model="fullName_new">
        </div>

        <div class="user-field">
          <label for="name">Username</label>:
          <input type="text" class="edit-form edit-username" aria-label="username" id="username" v-model="username_new">
        </div>

        <div class="user-field">
          <label for="user-role"><span class="visuallyhidden">User Role</span></label>
          <select v-model="role_new" id="user-role">
            <option :selected="role_new == admin ? true : false" v-if="role_new" value="learner"> Learner </option>
            <option :selected="role_new == admin ? true : false" value="admin"> Admin </option>
          </select>
        </div>

        <div class="advanced-options" v-if="!pw_reset && !usr_delete">
          <button @click="pw_reset=!pw_reset"> Reset Password </button>
          <button @click="usr_delete=!usr_delete"> Delete User</button>
        </div>

        <hr class="end-modal">

      </div>

      <div v-if="pw_reset" slot="body">
        <p>
          <b>Password reset for: {{username_new}}</b>
        </p>
        <div class="user-field">
          <label for="password"> Reset Password</label>:
          <input type="password" class="edit-form" id="password" required v-model="password_new">
        </div>

        <div class="user-field">
          <label for="password-confirm"> Confirm Reset Pasword</label>:
          <input type="password" class="edit-form" id="password-confirm" required v-model="password_new_confirm">
        </div>
      </div>

      <div v-if="usr_delete" slot="body">
        <div class="user-field">
          <p> Are you sure you want to delete {{username_new}}? </p>
        </div>
      </div>

      <div slot="footer">
        <p class="error" v-if="error_message"> {{error_message}} </p>
        <button class="cancel-btn" type="button" @click="cancel">
          <!-- For reset option -->
          <template v-if="pw_reset"> Back </template>
          <!-- For delete option -->
          <template v-if="usr_delete"> No </template>
          <!-- For main window -->
          <template v-if="!pw_reset && !usr_delete"> Cancel </template>
        </button>

        <button class="confirm-btn" type="button" @click="editUser">
          <template v-if="pw_reset"> Save </template>
          <template v-if="usr_delete"> Yes </template>
          <template v-if="!pw_reset && !usr_delete"> Confirm </template>
        </button>
        <br>

      </div>

      <button class="no-border" slot="openbtn">
        <span class="visuallyhidden">Edit Account Info</span>
        <svg class="manage-edit" src="../icons/pencil.svg"></svg>
      </button>

    </modal>

  </div>

</template>


<script>

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

  module.exports = {
    components: {
      modal: require('../modal'),
    },
    props: [
      'userid', 'username', 'fullname', 'roles',
    ],
    data() {
      return {
        username_new: this.username,
        password_new: '',
        password_new_confirm: '',
        fullName_new: this.fullname,
        role_new: this.roles.length ? this.roles[0].kind : 'learner',
        usr_delete: false,
        pw_reset: false,
        error_message: '',
      };
    },
    methods: {
      editUser() {
        // delete the user if that's the option selected
        if (this.usr_delete) {
          this.deleteUser(this.userid);
        } else {
          const payload = {
            username: this.username_new,
            full_name: this.fullName_new,
            facility: this.facility,
          };

          // check to see if there's a new password
          if (this.password_new) {
            // make sure passwords match
            if (this.password_new === this.password_new_confirm) {
              payload.password = <PASSWORD>;
              this.clearErrorMessage();
            } else {
              this.error_message = 'Passwords must match';
            }
          }

          // save user changes
          this.updateUser(this.userid, payload, this.role_new);
          // do not close if in either of the advanced options
          if (!(this.usr_delete || this.pw_reset)) {
            this.$refs.modal.closeModal();
          }
          this.clearErrorMessage();
        }
      },
      cancel() {
        if (this.usr_delete || this.pw_reset) {
          this.usr_delete = this.pw_reset = false;
        } else {
          this.$refs.modal.closeModal();
        }

        this.clearErrorMessage();
      },
      clearErrorMessage() {
        this.error_message = '';
      },
    },
    vuex: {
      actions: {
        updateUser: actions.updateUser,
        deleteUser: actions.deleteUser,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'

  .title
    display: inline

  .no-border
    border: none

  .confirm-btn, .cancel-btn
    width: 48%

  .confirm-btn
    float: right
    background-color: $core-action-normal
    color: white
    &:hover
      border-color: $core-action-normal

  .cancel-btn
    float:left

  .delete-btn
    width: 100%

  .open-btn
    background-color: $core-bg-light

  .user-field
    padding-bottom: 5%
    input
      width: 100%
      height: 40px
      font-weight: bold
      border: none
      border-bottom: 1px solid #3a3a3a
    label
      position: relative
    select
      -webkit-appearance: menulist-button
      width: 100%
      height: 40px
      font-weight: bold
      background-color: transparent

  .edit-form
    width: 200px
    margin: 0 auto
    display: block
    padding: 5px 10px
    letter-spacing: 0.08em
    border: none
    border-bottom: 1px solid $core-text-default
    height: 30px
    &:focus
      outline: none
      border-bottom: 3px solid $core-action-normal

  .header
    text-align: center

  .manage-edit
    fill: $core-action-normal
    cursor: pointer

  .advanced-options
    padding-bottom: 5%
    button
      display: block
      border: none<commit_msg>adding line in the main edit modal<commit_after><template>

  <div class="user-edit-modal">
    <modal v-ref:modal btntext="Edit">

      <h1 slot="header" class="header">Edit Account Info</h1>

      <div @keyup.enter="editUser" v-if="!usr_delete && !pw_reset" slot="body">

        <div class="user-field">
          <label for="username">Full Name</label>:
          <input type="text" class="edit-form edit-fullname" aria-label="fullname" id="name" v-model="fullName_new">
        </div>

        <div class="user-field">
          <label for="name">Username</label>:
          <input type="text" class="edit-form edit-username" aria-label="username" id="username" v-model="username_new">
        </div>

        <div class="user-field">
          <label for="user-role"><span class="visuallyhidden">User Role</span></label>
          <select v-model="role_new" id="user-role">
            <option :selected="role_new == admin ? true : false" v-if="role_new" value="learner"> Learner </option>
            <option :selected="role_new == admin ? true : false" value="admin"> Admin </option>
          </select>
        </div>

        <div class="advanced-options" v-if="!pw_reset && !usr_delete">
          <button @click="pw_reset=!pw_reset"> Reset Password </button>
          <button @click="usr_delete=!usr_delete"> Delete User</button>
        </div>

        <hr class="end-modal">

      </div>

      <div v-if="pw_reset" slot="body">
        <p>Username: <b>{{username_new}}</b></p>
        <div class="user-field">
          <label for="password">Enter new password</label>:
          <input type="password" class="edit-form" id="password" required v-model="password_new">
        </div>

        <div class="user-field">
          <label for="password-confirm">Confirm new password</label>:
          <input type="password" class="edit-form" id="password-confirm" required v-model="password_new_confirm">
        </div>
      </div>

      <div v-if="usr_delete" slot="body">
        <div class="user-field">
          <p> Are you sure you want to delete {{username_new}}? </p>
        </div>
      </div>

      <div slot="footer">
        <p class="error" v-if="error_message"> {{error_message}} </p>
        <button class="cancel-btn" type="button" @click="cancel">
          <!-- For reset option -->
          <template v-if="pw_reset"> Back </template>
          <!-- For delete option -->
          <template v-if="usr_delete"> No </template>
          <!-- For main window -->
          <template v-if="!pw_reset && !usr_delete"> Cancel </template>
        </button>

        <button class="confirm-btn" type="button" @click="editUser">
          <template v-if="pw_reset"> Save </template>
          <template v-if="usr_delete"> Yes </template>
          <template v-if="!pw_reset && !usr_delete"> Confirm </template>
        </button>
        <br>

      </div>

      <button class="no-border" slot="openbtn">
        <span class="visuallyhidden">Edit Account Info</span>
        <svg class="manage-edit" src="../icons/pencil.svg"></svg>
      </button>

    </modal>

  </div>

</template>


<script>

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

  module.exports = {
    components: {
      modal: require('../modal'),
    },
    props: [
      'userid', 'username', 'fullname', 'roles',
    ],
    data() {
      return {
        username_new: this.username,
        password_new: '',
        password_new_confirm: '',
        fullName_new: this.fullname,
        role_new: this.roles.length ? this.roles[0].kind : 'learner',
        usr_delete: false,
        pw_reset: false,
        error_message: '',
      };
    },
    methods: {
      editUser() {
        // delete the user if that's the option selected
        if (this.usr_delete) {
          this.deleteUser(this.userid);
        } else {
          const payload = {
            username: this.username_new,
            full_name: this.fullName_new,
            facility: this.facility,
          };

          // check to see if there's a new password
          if (this.password_new) {
            console.log('New Password');
            // make sure passwords match
            if (this.password_new === this.password_new_confirm) {
              console.log('Passwords Match');
              payload.password = <PASSWORD>;
              this.clearErrorMessage();
            } else {
              console.log('Passwords Match');
              this.error_message = 'Passwords must match';
            }
          }

          // save user changes
          this.updateUser(this.userid, payload, this.role_new);
          // do not close if in either of the advanced options
          if (!(this.usr_delete || this.pw_reset)) {
            this.$refs.modal.closeModal();
          }
          this.clearErrorMessage();
        }
      },
      cancel() {
        if (this.usr_delete || this.pw_reset) {
          this.usr_delete = this.pw_reset = false;
        } else {
          this.$refs.modal.closeModal();
        }

        this.clearErrorMessage();
      },
      clearErrorMessage() {
        this.error_message = '';
      },
    },
    vuex: {
      actions: {
        updateUser: actions.updateUser,
        deleteUser: actions.deleteUser,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'

  .title
    display: inline

  .no-border
    border: none

  .confirm-btn, .cancel-btn
    width: 48%

  .confirm-btn
    float: right
    background-color: $core-action-normal
    color: white
    &:hover
      border-color: $core-action-normal

  .cancel-btn
    float:left

  .delete-btn
    width: 100%

  .open-btn
    background-color: $core-bg-light

  .user-field
    padding-bottom: 5%
    input
      width: 100%
      height: 40px
      font-weight: bold
      border: none
      border-bottom: 1px solid #3a3a3a
    label
      position: relative
    select
      -webkit-appearance: menulist-button
      width: 100%
      height: 40px
      font-weight: bold
      background-color: transparent
    p
      text-align: center

  .edit-form
    width: 200px
    margin: 0 auto
    display: block
    padding: 5px 10px
    letter-spacing: 0.08em
    border: none
    border-bottom: 1px solid $core-text-default
    height: 30px
    &:focus
      outline: none
      border-bottom: 3px solid $core-action-normal

  .header
    text-align: center

  .manage-edit
    fill: $core-action-normal
    cursor: pointer

  .advanced-options
    padding-bottom: 5%
    button
      display: block
      border: none
{'fraction_non_alphanumeric': 0.14625115705029312, 'fraction_numerical': 0.005862388151804999, 'mean_word_length': 2.0642874025053177, 'pattern_counts': {'":': 0, '<': 193, '<?xml version=': 0, '>': 193, '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': '2016670', 'n_tokens_mistral': 4042, 'n_tokens_neox': 3872, 'n_words': 873}