<commit_before><template>

  <core-modal
    title="Add New Account"
    :has-error="errorMessage ? true : false"
    @enter="createNewUser"
    @cancel="close"
  >
    <div>
      <!-- Fields for the user to fill out -->
      <section class="user-fields">
        <div class="user-field">
          <label for="name">Name</label>
          <input @focus="clearErrorMessage" type="text" class="add-form" id="name" autocomplete="name"  autofocus="true" required v-model="full_name">
        </div>

        <div class="user-field">
          <label for="username">Username</label>
          <input @focus="clearErrorMessage" type="text" class="add-form" autocomplete="username" id="username" required v-model="username">
        </div>

        <div class="user-field">
          <label for="password">Password</label>
          <input @focus="clearErrorMessage" type="password" class="add-form" id="password" required v-model="password">
        </div>

        <div class="user-field">
          <label for="confirm-password">Confirm Password</label>
          <input @focus="clearErrorMessage" type="password" class="add-form" id="confirm-password" required v-model="passwordConfirm">
        </div>

        <div class="user-field">
          <label for="user-kind"><span class="visuallyhidden">User Kind</span></label>
          <select @focus="clearErrorMessage" v-model="kind" id="user-kind">
            <option :value="LEARNER"> Learner </option>
            <option :value="COACH"> Coach </option>
            <option :value="ADMIN"> Admin </option>
          </select>
        </div>
      </section>

      <!-- Button Options at footer of modal -->
      <section class="footer">
        <p class="error" v-if="errorMessage" aria-live="polite">{{errorMessage}}</p>
        <icon-button
          class="create-btn"
          text="Create Account"
          @click="createNewUser">
        </icon-button>
      </section>
    </div>
  </core-modal>

</template>


<script>

  const actions = require('../../actions');
  const UserKinds = require('kolibri.coreVue.vuex.constants').UserKinds;

  module.exports = {
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
    },
    data() {
      return {
        username: '',
        password: '',
        passwordConfirm: '',
        full_name: '',
        kind: UserKinds.LEARNER,
        errorMessage: '',
      };
    },
    mounted() {
      // clear form on load
      Object.assign(this.$data, this.$options.data());
    },
    computed: {
      LEARNER() {
        return UserKinds.LEARNER;
      },
      COACH() {
        return UserKinds.COACH;
      },
      ADMIN() {
        return UserKinds.ADMIN;
      },
    },
    methods: {
      createNewUser() {
        const newUser = {
          username: this.username,
          full_name: this.full_name,
          facility_id: this.facility,
          kind: this.kind,
        };

        // check for all fields populated
        if (!(this.username && this.password && this.full_name && this.kind)) {
          this.errorMessage = 'All fields are required';
        // check for password confirmation match
        } else if (!(this.password === this.passwordConfirm)) {
          this.errorMessage = 'Passwords do not match.';
        // create user
        } else {
          newUser.password = <PASSWORD>;

          // loading message
          this.confirmation_message = 'Loading...';
          // using promise to ensure that the user is created before closing
          this.createUser(newUser).then(
            () => {
              this.close();
            },
            (error) => {
              if (error.status.code === 400) {
                // access the first error message
                this.errorMessage = error.entity[Object.keys(error.entity)[0]];
              } else if (error.status.code === 403) {
                this.errorMessage = error.entity;
              } else {
                this.errorMessage = `Whoops! Something went wrong.`;
              }
            });
        }
      },
      clearErrorMessage() {
        this.errorMessage = '';
      },
      close() {
        this.$emit('close'); // signal parent to close
      },
    },
    vuex: {
      getters: {
        facility: state => state.facility,
      },
      actions: {
        createUser: actions.createUser,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.coreTheme'

  $button-content-size = 1em

  .user-field
    padding-bottom: 5%
    input
      width: 100%<commit_msg>Reenabling loading message using computer props to have a `status message` rather than just an `error message`. Error handling in modal + styling all still valid.<commit_after><template>

  <core-modal
    title="Add New Account"
    :has-error="errorMessage ? true : false"
    @enter="createNewUser"
    @cancel="close"
  >
    <div>
      <!-- Fields for the user to fill out -->
      <section class="user-fields">
        <div class="user-field">
          <label for="name">Name</label>
          <input @focus="clearStatus" type="text" class="add-form" id="name" autocomplete="name"  autofocus="true" required v-model="full_name">
        </div>

        <div class="user-field">
          <label for="username">Username</label>
          <input @focus="clearStatus" type="text" class="add-form" autocomplete="username" id="username" required v-model="username">
        </div>

        <div class="user-field">
          <label for="password">Password</label>
          <input @focus="clearStatus" type="password" class="add-form" id="password" required v-model="password">
        </div>

        <div class="user-field">
          <label for="confirm-password">Confirm Password</label>
          <input @focus="clearStatus" type="password" class="add-form" id="confirm-password" required v-model="passwordConfirm">
        </div>

        <div class="user-field">
          <label for="user-kind"><span class="visuallyhidden">User Kind</span></label>
          <select @focus="clearStatus" v-model="kind" id="user-kind">
            <option :value="LEARNER"> Learner </option>
            <option :value="COACH"> Coach </option>
            <option :value="ADMIN"> Admin </option>
          </select>
        </div>
      </section>

      <!-- Button Options at footer of modal -->
      <section class="footer">
        <p :class="{error: errorMessage}" v-if="statusMessage" aria-live="polite">{{statusMessage}}</p>
        <icon-button
          class="create-btn"
          text="Create Account"
          @click="createNewUser">
        </icon-button>
      </section>
    </div>
  </core-modal>

</template>


<script>

  const actions = require('../../actions');
  const UserKinds = require('kolibri.coreVue.vuex.constants').UserKinds;

  module.exports = {
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
    },
    data() {
      return {
        username: '',
        password: '',
        passwordConfirm: '',
        full_name: '',
        kind: UserKinds.LEARNER,
        errorMessage: '',
        confirmationMessage: '',
      };
    },
    mounted() {
      // clear form on load
      Object.assign(this.$data, this.$options.data());
    },
    computed: {
      LEARNER() {
        return UserKinds.LEARNER;
      },
      COACH() {
        return UserKinds.COACH;
      },
      ADMIN() {
        return UserKinds.ADMIN;
      },
      statusMessage() {
        if (this.errorMessage) {
          return this.errorMessage;
        } else if (this.confirmationMessage) {
          return this.confirmationMessage;
        }
        return false;
      },
    },
    methods: {
      createNewUser() {
        const newUser = {
          username: this.username,
          full_name: this.full_name,
          facility_id: this.facility,
          kind: this.kind,
        };

        // check for all fields populated
        if (!(this.username && this.password && this.full_name && this.kind)) {
          this.errorMessage = 'All fields are required';
        // check for password confirmation match
        } else if (!(this.password === this.passwordConfirm)) {
          this.errorMessage = 'Passwords do not match.';
        // create user
        } else {
          newUser.password = <PASSWORD>;

          // loading message
          this.confirmationMessage = 'Loading...';
          // using promise to ensure that the user is created before closing
          this.createUser(newUser).then(
            () => {
              this.close();
            },
            (error) => {
              if (error.status.code === 400) {
                // access the first error message
                this.errorMessage = error.entity[Object.keys(error.entity)[0]];
              } else if (error.status.code === 403) {
                this.errorMessage = error.entity;
              } else {
                this.errorMessage = `Whoops! Something went wrong.`;
              }
            });
        }
      },
      clearStatus() {
        this.errorMessage = this.confirmationMessage = '';
      },
      close() {
        this.$emit('close'); // signal parent to close
      },
    },
    vuex: {
      getters: {
        facility: state => state.facility,
      },
      actions: {
        createUser: actions.createUser,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.coreTheme'

  $button-content-size = 1em

  .user-field
    padding-bottom: 5%
    input
      width: 100%
{'fraction_non_alphanumeric': 0.14661379526244392, 'fraction_numerical': 0.002504434936867369, 'mean_word_length': 1.983810709838107, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 117, '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': '2499118', 'n_tokens_mistral': 2756, 'n_tokens_neox': 2688, 'n_words': 582}