Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better setup wizard errors #11655

Merged
merged 5 commits into from
Jan 5, 2024
Merged

Better setup wizard errors #11655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c0c721b
Add autocomplete attribute to username component.
rtibbles Dec 15, 2023
a1abca0
Prevent vue prop warnings and form warnings for user credentials form.
rtibbles Dec 15, 2023
1a95d79
Simplify AppError component.
rtibbles Dec 15, 2023
1b8ae36
Revert previous suggestion to use UIAlert directly.
rtibbles Dec 15, 2023
8e7aa55
Restore conditional display of errors.
rtibbles Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions kolibri/core/assets/src/views/userAccounts/UsernameTextbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
:maxlength="30"
:invalid="Boolean(shownInvalidText)"
:invalidText="shownInvalidText"
autocomplete="username"
@blur="blurred = true"
@input="handleInput"
/>
Expand Down
43 changes: 20 additions & 23 deletions kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/SettingUpKolibri.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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') }}
Expand All @@ -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) {
Expand Down Expand Up @@ -166,7 +163,7 @@
return this.wizardContext('onMyOwnOrGroup') == UsePresets.ON_MY_OWN;
},
},
mounted() {
created() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious why the change from mounted -> created?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Do you need to access the DOM? If no, don't use mounted." - past Richard (to me)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well from the look of it, we are not manipulating the DOM(at least not directly) so it justifies the change.

this.provisionDevice();
},
methods: {
Expand All @@ -179,6 +176,7 @@
return this.wizardService.state.context[key];
},
provisionDevice() {
this.$store.dispatch('clearError');
client({
url: urls['kolibri:core:deviceprovision'](),
method: 'POST',
Expand All @@ -192,7 +190,6 @@
redirectBrowser();
})
.catch(e => {
this.restart = e.response.status === 400;
this.$store.dispatch('handleApiError', { error: e });
});
},
Expand Down
11 changes: 5 additions & 6 deletions kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/UserCredentialsForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -57,7 +56,7 @@

<PrivacyLinkAndModal v-if="!hidePrivacyLink" />

</slot>
</form>

<slot name="footer">
<div class="reminder">
Expand Down Expand Up @@ -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: {
Expand Down
40 changes: 21 additions & 19 deletions packages/kolibri-common/components/AppError/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Comment on lines +16 to +17
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice <3

<KButton
v-if="!isPageNotFound"
:text="coreString('refresh')"
:primary="true"
@click="reloadPage"
/>
<KButton
:primary="isPageNotFound"
appearance="raised-button"
:text="exitButtonLabel"
@click="handleClickBackToHome"
/>
</slot>
</KButtonGroup>
</p>

Expand Down Expand Up @@ -89,6 +88,9 @@
return this.$tr('defaultErrorHeader');
},
paragraphTexts() {
if (this.hideParagraphs) {
return [];
}
if (this.isPageNotFound) {
return [this.$tr('resourceNotFoundMessage')];
}
Expand Down
Loading