Merge pull request #11655 from rtibbles/better_setup_wizard_error

Better setup wizard errors

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

@@ -9,6 +9,7 @@
     :maxlength="30"
     :invalid="Boolean(shownInvalidText)"
     :invalidText="shownInvalidText"
+    autocomplete="username"
     @blur="blurred = true"
     @input="handleInput"
   />

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

@@ -1,21 +1,23 @@
 <template>
 
   <div class="full-page">
-    <UiAlert
-      v-if="coreError"
-      :dismissible="false"
-      class="alert"
-      type="error"
+    <AppError v-if="coreError" :hideParagraphs="true">
+      <template #buttons>
+        <KButton
+          :text="coreString('startOverAction')"
+          @click="startOver"
+        />
+        <KButton
+          :primary="true"
+          :text="coreString('retryAction')"
+          @click="provisionDevice"
+        />
+      </template>
+    </AppError>
+    <main
+      v-else
+      class="content"
     >
-      <span>{{ coreError }}</span><br>
-      <KButton
-        v-if="restart"
-        appearance="basic-link"
-        :text="coreString('startOverAction')"
-        @click="startOver"
-      />
-    </UiAlert>
-    <main class="content">
       <KolibriLoadingSnippet />
       <h1 class="page-title">
         {{ $tr('pageTitle') }}
@@ -33,27 +35,22 @@
 
   import omitBy from 'lodash/omitBy';
   import get from 'lodash/get';
+  import AppError from 'kolibri-common/components/AppError';
   import { currentLanguage } from 'kolibri.utils.i18n';
   import { checkCapability } from 'kolibri.utils.appCapabilities';
   import redirectBrowser from 'kolibri.utils.redirectBrowser';
   import KolibriLoadingSnippet from 'kolibri.coreVue.components.KolibriLoadingSnippet';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import urls from 'kolibri.urls';
   import client from 'kolibri.client';
   import Lockr from 'lockr';
   import { DeviceTypePresets, UsePresets } from '../../constants';
 
   export default {
     name: 'SettingUpKolibri',
-    components: { UiAlert, KolibriLoadingSnippet },
+    components: { AppError, KolibriLoadingSnippet },
     inject: ['wizardService'],
     mixins: [commonCoreStrings],
-    data() {
-      return {
-        restart: false,
-      };
-    },
     computed: {
       coreError() {
         if (this.$store) {
@@ -166,7 +163,7 @@
         return this.wizardContext('onMyOwnOrGroup') == UsePresets.ON_MY_OWN;
       },
     },
-    mounted() {
+    created() {
       this.provisionDevice();
     },
     methods: {
@@ -179,6 +176,7 @@
         return this.wizardService.state.context[key];
       },
       provisionDevice() {
+        this.$store.dispatch('clearError');
         client({
           url: urls['kolibri:core:deviceprovision'](),
           method: 'POST',
@@ -192,7 +190,6 @@
             redirectBrowser();
           })
           .catch(e => {
-            this.restart = e.response.status === 400;
             this.$store.dispatch('handleApiError', { error: e });
           });
       },

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

@@ -12,11 +12,10 @@
   >
     <slot name="aboveform"></slot>
 
-    <!-- HACK in Import mode, this slot will be replaced by Password-only form -->
     <!-- VUE3-COMPAT: linter doesn't like that we are injecting "footer" slot from
          inside a slot default
     -->
-    <slot name="form">
+    <form>
       <!-- Hiding the fullname and username textboxes, but their values are filled in and presumed
            valid if we're given the user that we're taking credentials for (ie, just entering
            password for admin)
@@ -57,7 +56,7 @@
 
       <PrivacyLinkAndModal v-if="!hidePrivacyLink" />
 
-    </slot>
+    </form>
 
     <slot name="footer">
       <div class="reminder">
@@ -109,15 +108,15 @@
       },
       step: {
         type: Number,
-        required: true,
+        default: null,
       },
       steps: {
         type: Number,
-        required: true,
+        default: null,
       },
       footerMessageType: {
         type: String,
-        required: true,
+        default: null,
       },
       // A passthrough to the onboarding step base to hide "GO BACK" when needed
       noBackAction: {

packages/kolibri-common/components/AppError/index.vue

@@ -8,27 +8,26 @@
       {{ headerText }}
     </h1>
 
-    <template v-if="!hideParagraphs">
-      <p v-for="(paragraph, idx) in paragraphTexts" :key="idx">
-        {{ paragraph }}
-      </p>
-    </template>
+    <p v-for="paragraph in paragraphTexts" :key="paragraph">
+      {{ paragraph }}
+    </p>
 
     <p>
-      <slot name="buttons"></slot>
-      <KButtonGroup v-if="!$slots.buttons">
-        <KButton
-          v-if="!isPageNotFound"
-          :text="coreString('refresh')"
-          :primary="true"
-          @click="reloadPage"
-        />
-        <KButton
-          :primary="isPageNotFound"
-          appearance="raised-button"
-          :text="exitButtonLabel"
-          @click="handleClickBackToHome"
-        />
+      <KButtonGroup>
+        <slot name="buttons">
+          <KButton
+            v-if="!isPageNotFound"
+            :text="coreString('refresh')"
+            :primary="true"
+            @click="reloadPage"
+          />
+          <KButton
+            :primary="isPageNotFound"
+            appearance="raised-button"
+            :text="exitButtonLabel"
+            @click="handleClickBackToHome"
+          />
+        </slot>
       </KButtonGroup>
     </p>
 
@@ -89,6 +88,9 @@
         return this.$tr('defaultErrorHeader');
       },
       paragraphTexts() {
+        if (this.hideParagraphs) {
+          return [];
+        }
         if (this.isPageNotFound) {
           return [this.$tr('resourceNotFoundMessage')];
         }