Ensure Enter key works as continue button click on Setup Wizard

AUTHORS.md

@@ -101,3 +101,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Garvit Singhal | GarvitSinghal47 |
 | Adars T S | a6ar55 |
 | Shivang Rawat | ShivangRawat30 |
+| Alex Vélez | AlexVelezLl |

kolibri/core/assets/src/views/userAccounts/PasswordTextbox.vue

@@ -49,6 +49,10 @@
       shouldValidate: {
         type: Boolean,
       },
+      shouldValidateOnEnter: {
+        type: Boolean,
+        default: true,
+      },
       // Set to false if you just want one password field
       showConfirmationInput: {
         type: Boolean,
@@ -122,6 +126,9 @@
         this.$refs.password.focus();
       },
       checkErrorsAndSubmit(e) {
+        if (!this.shouldValidateOnEnter) {
+          return;
+        }
         if (this.valid) {
           this.$emit('submitNewPassword');
         } else {

kolibri/plugins/setup_wizard/assets/src/views/JoinOrNewLOD.vue

@@ -10,12 +10,14 @@
       :label="$tr('joinFacilityLabel')"
       :value="Options.JOIN"
       class="radio-button"
+      :autofocus="isJoinSetup"
     />
     <KRadioButton
       v-model="selected"
       :label="$tr('importFromFacilityLabel')"
       :value="Options.IMPORT"
       class="radio-button"
+      :autofocus="isImportSetup"
     />
     <SelectDeviceModalGroup
       v-if="showSelectAddressModal"
@@ -47,6 +49,14 @@
         showSelectAddressModal: false,
       };
     },
+    computed: {
+      isJoinSetup() {
+        return this.selected === Options.JOIN;
+      },
+      isImportSetup() {
+        return this.selected === Options.IMPORT;
+      },
+    },
     methods: {
       handleContinueImport(address) {
         this.wizardService.send({

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/CreateLearnerAccountForm.vue

@@ -15,13 +15,15 @@
       class="radio-button"
       :label="$tr('yesOptionLabel')"
       :value="true"
+      :autofocus="setting"
     />
     <KRadioButton
       ref="noRadio"
       v-model="setting"
       class="radio-button"
       :label="$tr('noOptionLabel')"
       :value="false"
+      :autofocus="!setting"
     />
     <p class="description">
       {{ getCommonSyncString('changeLater') }}

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue

@@ -9,12 +9,14 @@
       :label="$tr('fullDeviceLabel')"
       :value="Options.FULL"
       :description="$tr('fullDeviceDescription')"
+      :autofocus="isFullSetup"
     />
     <KRadioButton
       v-model="selected"
       :label="$tr('learnOnlyDeviceLabel')"
       :value="Options.LOD"
       :description="$tr('learnOnlyDeviceDescription')"
+      :autofocus="isLODSetup"
     />
   </OnboardingStepBase>
 
@@ -43,6 +45,14 @@
         selected,
       };
     },
+    computed: {
+      isFullSetup() {
+        return this.selected === Options.FULL;
+      },
+      isLODSetup() {
+        return this.selected === Options.LOD;
+      },
+    },
     methods: {
       handleContinue() {
         this.wizardService.send({ type: 'CONTINUE', value: this.selected });

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GuestAccessForm.vue

@@ -15,12 +15,14 @@
       v-model="setting"
       :label="$tr('yesOptionLabel')"
       :value="true"
+      :autofocus="setting"
     />
     <KRadioButton
       ref="noRadio"
       v-model="setting"
       :label="$tr('noOptionLabel')"
       :value="false"
+      :autofocus="!setting"
     />
     <p class="form">
       {{ $tr('changeLater') }}

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/HowAreYouUsingKolibri.vue

@@ -12,12 +12,14 @@
       :value="UsePresets.ON_MY_OWN"
       :label="$tr('onMyOwnLabel')"
       :description="getCommonSyncString('onMyOwn')"
+      :autofocus="isOnMyOwnSetup"
     />
     <KRadioButton
       v-model="selected"
       :value="UsePresets.GROUP"
       :label="$tr('groupLearningLabel')"
       :description="$tr('groupLearningDescription')"
+      :autofocus="isGroupSetup"
     />
   </OnboardingStepBase>
 
@@ -46,6 +48,9 @@
       isOnMyOwnSetup() {
         return this.selected === UsePresets.ON_MY_OWN;
       },
+      isGroupSetup() {
+        return this.selected === UsePresets.GROUP;
+      },
       UsePresets() {
         return UsePresets;
       },

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/RequirePasswordForLearnersForm.vue

@@ -14,13 +14,15 @@
       class="radio-button"
       :label="$tr('yesOptionLabel')"
       :value="true"
+      :autofocus="setting"
     />
     <KRadioButton
       ref="noRadio"
       v-model="setting"
       class="radio-button"
       :label="$tr('noOptionLabel')"
       :value="false"
+      :autofocus="!setting"
     />
     <p class="description">
       {{ getCommonSyncString('changeLater') }}

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/SetUpLearningFacilityForm.vue

@@ -10,12 +10,14 @@
       :label="$tr('createFacilityLabel')"
       :value="Options.NEW"
       class="radio-button"
+      :autofocus="isNewFacilitySetup"
     />
     <KRadioButton
       v-model="selected"
       :label="$tr('importFacilityLabel')"
       :value="Options.IMPORT"
       class="radio-button"
+      :autofocus="isImportFacilitySetup"
     />
     <SelectDeviceModalGroup
       v-if="showSelectAddressModal"
@@ -48,6 +50,14 @@
         showSelectAddressModal: false,
       };
     },
+    computed: {
+      isNewFacilitySetup() {
+        return this.selected === Options.NEW;
+      },
+      isImportFacilitySetup() {
+        return this.selected === Options.IMPORT;
+      },
+    },
     methods: {
       handleContinueImport(address) {
         this.wizardService.send({

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/UserCredentialsForm.vue

@@ -50,6 +50,7 @@
         :isValid.sync="passwordValid"
         :shouldValidate="formSubmitted"
         :showConfirmationInput="!selectedUser"
+        :shouldValidateOnEnter="false"
         autocomplete="new-password"
       />