<commit_before><template>

  <OnboardingForm
    :header="$tr('adminAccountCreationHeader')"
    :description="$tr('adminAccountCreationDescription')"
    :submitText="submitText"
    @submit="submitForm"
  >
    <FullNameTextbox
      ref="fullNameTextbox"
      :value.sync="fullName"
      :isValid.sync="fullNameValid"
      :shouldValidate="formSubmitted"
      :autofocus="true"
      autocomplete="name"
    />

    <UsernameTextbox
      ref="usernameTextbox"
      :value.sync="username"
      :isValid.sync="usernameValid"
      :shouldValidate="formSubmitted"
    />

    <PasswordTextbox
      ref="passwordTextbox"
      :value.sync="password"
      :isValid.sync="passwordValid"
      :shouldValidate="formSubmitted"
      autocomplete="new-password"
    />

    <BirthYearSelect
      :value.sync="birthYear"
      class="select"
    />

    <GenderSelect
      :value.sync="gender"
      class="select"
    />

    <div slot="footer" class="reminder">
      <div class="icon">
        <mat-svg category="alert" name="warning" />
      </div>
      <p class="text">
        {{ $tr('rememberThisAccountInformation') }}
      </p>
    </div>
  </OnboardingForm>

</template>


<script>

  import { mapMutations } from 'vuex';
  import every from 'lodash/every';
  import FullNameTextbox from 'kolibri.coreVue.components.FullNameTextbox';
  import UsernameTextbox from 'kolibri.coreVue.components.UsernameTextbox';
  import PasswordTextbox from 'kolibri.coreVue.components.PasswordTextbox';
  import BirthYearSelect from 'kolibri.coreVue.components.BirthYearSelect';
  import GenderSelect from 'kolibri.coreVue.components.GenderSelect';
  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
  import OnboardingForm from './OnboardingForm';

  export default {
    name: 'SuperuserCredentialsForm',
    components: {
      OnboardingForm,
      FullNameTextbox,
      UsernameTextbox,
      PasswordTextbox,
      BirthYearSelect,
      GenderSelect,
    },
    mixins: [commonCoreStrings],
    props: {
      submitText: {
        type: String,
        required: true,
      },
    },
    data() {
      const { superuser } = this.$store.state.onboardingData;
      return {
        fullName: superuser.full_name,
        fullNameValid: false,
        username: superuser.username,
        usernameValid: false,
        password: <PASSWORD>,
        passwordValid: false,
        birthYear: superuser.birth_year,
        gender: superuser.gender,
        formSubmitted: false,
      };
    },
    computed: {
      formIsValid() {
        return every([this.usernameValid, this.fullNameValid, this.passwordValid]);
      },
    },
    beforeDestroy() {
      // saves data if going backwards in wizard
      this.saveSuperuserCredentials();
    },
    methods: {
      ...mapMutations({
        setSuperuser: 'SET_SU',
      }),
      saveSuperuserCredentials() {
        this.setSuperuser({
          full_name: this.fullName,
          username: this.username,
          password: <PASSWORD>,
          birth_year: this.birthYear,
          gender: this.gender,
        });
      },
      submitForm() {
        this.formSubmitted = true;
        // Have to wait a tick to let inputs react to this.formSubmitted
        this.$nextTick().then(() => {
          if (this.formIsValid) {
            this.saveSuperuserCredentials();
            this.$emit('submit');
          } else {
            this.focusOnInvalidField();
          }
        });
      },
      focusOnInvalidField() {
        this.$nextTick().then(() => {
          if (!this.fullNameValid) {
            this.$refs.fullNameTextbox.focus();
          } else if (!this.usernameValid) {
            this.$refs.usernameTextbox.focus();
          } else if (!this.passwordValid) {
            this.$refs.passwordTextbox.focus();
          }<commit_msg>Superuser can defer providing demographic info<commit_after><template>

  <OnboardingForm
    :header="$tr('adminAccountCreationHeader')"
    :description="$tr('adminAccountCreationDescription')"
    :submitText="submitText"
    @submit="submitForm"
  >
    <FullNameTextbox
      ref="fullNameTextbox"
      :value.sync="fullName"
      :isValid.sync="fullNameValid"
      :shouldValidate="formSubmitted"
      :autofocus="true"
      autocomplete="name"
    />

    <UsernameTextbox
      ref="usernameTextbox"
      :value.sync="username"
      :isValid.sync="usernameValid"
      :shouldValidate="formSubmitted"
    />

    <PasswordTextbox
      ref="passwordTextbox"
      :value.sync="password"
      :isValid.sync="passwordValid"
      :shouldValidate="formSubmitted"
      autocomplete="new-password"
    />

    <BirthYearSelect
      :value.sync="birthYear"
      class="select"
    />

    <GenderSelect
      :value.sync="gender"
      class="select"
    />

    <div slot="footer" class="reminder">
      <div class="icon">
        <mat-svg category="alert" name="warning" />
      </div>
      <p class="text">
        {{ $tr('rememberThisAccountInformation') }}
      </p>
    </div>
  </OnboardingForm>

</template>


<script>

  import { mapMutations } from 'vuex';
  import every from 'lodash/every';
  import FullNameTextbox from 'kolibri.coreVue.components.FullNameTextbox';
  import UsernameTextbox from 'kolibri.coreVue.components.UsernameTextbox';
  import PasswordTextbox from 'kolibri.coreVue.components.PasswordTextbox';
  import BirthYearSelect from 'kolibri.coreVue.components.BirthYearSelect';
  import GenderSelect from 'kolibri.coreVue.components.GenderSelect';
  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
  import OnboardingForm from './OnboardingForm';

  export default {
    name: 'SuperuserCredentialsForm',
    components: {
      OnboardingForm,
      FullNameTextbox,
      UsernameTextbox,
      PasswordTextbox,
      BirthYearSelect,
      GenderSelect,
    },
    mixins: [commonCoreStrings],
    props: {
      submitText: {
        type: String,
        required: true,
      },
    },
    data() {
      const { superuser } = this.$store.state.onboardingData;
      return {
        fullName: superuser.full_name,
        fullNameValid: false,
        username: superuser.username,
        usernameValid: false,
        password: <PASSWORD>,
        passwordValid: false,
        birthYear: superuser.birth_year,
        gender: superuser.gender,
        formSubmitted: false,
      };
    },
    computed: {
      formIsValid() {
        return every([this.usernameValid, this.fullNameValid, this.passwordValid]);
      },
    },
    beforeDestroy() {
      // saves data if going backwards in wizard
      this.saveSuperuserCredentials();
    },
    methods: {
      ...mapMutations({
        setSuperuser: 'SET_SU',
      }),
      saveSuperuserCredentials() {
        this.setSuperuser({
          full_name: this.fullName,
          username: this.username,
          password: <PASSWORD>,
          birth_year: this.birthYear || 'DEFER',
          gender: this.gender || 'DEFER',
        });
      },
      submitForm() {
        this.formSubmitted = true;
        // Have to wait a tick to let inputs react to this.formSubmitted
        this.$nextTick().then(() => {
          if (this.formIsValid) {
            this.saveSuperuserCredentials();
            this.$emit('submit');
          } else {
            this.focusOnInvalidField();
          }
        });
      },
      focusOnInvalidField() {
        this.$nextTick().then(() => {
          if (!this.fullNameValid) {
            this.$refs.fullNameTextbox.focus();
          } else if (!this.usernameValid) {
            this.$refs.usernameTextbox.focus();
          } else if (!this.passwordValid) {
            this.$refs.passwordTextbox.focus();
          }
{'fraction_non_alphanumeric': 0.1227278587082635, 'fraction_numerical': 0.0, 'mean_word_length': 2.4357838795394153, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 45, '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': '6821096', 'n_tokens_mistral': 2281, 'n_tokens_neox': 2237, 'n_words': 387}