mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat: First Time Setup Wizard (#3204)
* extract user registration form into a composable * added base wizard component * added partial setup implementation * removed unused attrs * added setup bypass * made setup page more readable * add checkbox hints to autoform * added common settings pages and initial submit logic * bypass setup in demo * add full name to user registration * added fullname and pw handling to setup * fixed wizard indentation * added post-setup suggestions * added tests for backend changes * renamed Wizard to BaseWizard * lint fixes * pass hardcoded default password instead of backend nonsense * removed old test * fix e2e * added setup skip to e2e testing for all admin users --------- Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Michael Genson
GitHub
parent
430e1d7d4e
commit
403038a5b2
25 changed files with 1103 additions and 141 deletions
160
frontend/components/Domain/User/UserRegistrationForm.vue
Normal file
160
frontend/components/Domain/User/UserRegistrationForm.vue
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card-title>
|
||||
<v-icon large class="mr-3"> {{ $globals.icons.user }}</v-icon>
|
||||
<span class="headline"> {{ $t("user-registration.account-details") }}</span>
|
||||
</v-card-title>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<v-form ref="domAccountForm" @submit.prevent>
|
||||
<v-text-field
|
||||
v-model="accountDetails.username.value"
|
||||
autofocus
|
||||
v-bind="inputAttrs"
|
||||
:label="$tc('user.username')"
|
||||
:prepend-icon="$globals.icons.user"
|
||||
:rules="[validators.required]"
|
||||
:error-messages="usernameErrorMessages"
|
||||
@blur="validateUsername"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="accountDetails.fullName.value"
|
||||
v-bind="inputAttrs"
|
||||
:label="$tc('user.full-name')"
|
||||
:prepend-icon="$globals.icons.user"
|
||||
:rules="[validators.required]"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="accountDetails.email.value"
|
||||
v-bind="inputAttrs"
|
||||
:prepend-icon="$globals.icons.email"
|
||||
:label="$tc('user.email')"
|
||||
:rules="[validators.required, validators.email]"
|
||||
:error-messages="emailErrorMessages"
|
||||
@blur="validateEmail"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="credentials.password1.value"
|
||||
v-bind="inputAttrs"
|
||||
:type="pwFields.inputType.value"
|
||||
:append-icon="pwFields.passwordIcon.value"
|
||||
:prepend-icon="$globals.icons.lock"
|
||||
:label="$tc('user.password')"
|
||||
:rules="[validators.required, validators.minLength(8), validators.maxLength(258)]"
|
||||
@click:append="pwFields.togglePasswordShow"
|
||||
/>
|
||||
|
||||
<UserPasswordStrength :value="credentials.password1.value" />
|
||||
|
||||
<v-text-field
|
||||
v-model="credentials.password2.value"
|
||||
v-bind="inputAttrs"
|
||||
:type="pwFields.inputType.value"
|
||||
:append-icon="pwFields.passwordIcon.value"
|
||||
:prepend-icon="$globals.icons.lock"
|
||||
:label="$tc('user.confirm-password')"
|
||||
:rules="[validators.required, credentials.passwordMatch]"
|
||||
@click:append="pwFields.togglePasswordShow"
|
||||
/>
|
||||
<div class="px-2">
|
||||
<v-checkbox
|
||||
v-model="accountDetails.advancedOptions.value"
|
||||
:label="$tc('user.enable-advanced-content')"
|
||||
/>
|
||||
<p class="text-caption mt-n4">
|
||||
{{ $tc("user.enable-advanced-content-description") }}
|
||||
</p>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { useDark } from "@vueuse/core";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
|
||||
import { usePasswordField } from "~/composables/use-passwords";
|
||||
import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
|
||||
|
||||
const inputAttrs = {
|
||||
filled: true,
|
||||
rounded: true,
|
||||
validateOnBlur: true,
|
||||
class: "rounded-lg",
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: { UserPasswordStrength },
|
||||
layout: "blank",
|
||||
setup() {
|
||||
const isDark = useDark();
|
||||
const langDialog = ref(false);
|
||||
|
||||
const pwFields = usePasswordField();
|
||||
const {
|
||||
accountDetails,
|
||||
credentials,
|
||||
emailErrorMessages,
|
||||
usernameErrorMessages,
|
||||
validateUsername,
|
||||
validateEmail,
|
||||
domAccountForm,
|
||||
} = useUserRegistrationForm();
|
||||
return {
|
||||
accountDetails,
|
||||
credentials,
|
||||
emailErrorMessages,
|
||||
inputAttrs,
|
||||
isDark,
|
||||
langDialog,
|
||||
pwFields,
|
||||
usernameErrorMessages,
|
||||
validators,
|
||||
// Validators
|
||||
validateUsername,
|
||||
validateEmail,
|
||||
// Dom Refs
|
||||
domAccountForm,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.icon-primary {
|
||||
fill: var(--v-primary-base);
|
||||
}
|
||||
|
||||
.icon-white {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.icon-divider {
|
||||
width: 100%;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
border: 2px;
|
||||
}
|
||||
|
||||
.bg-off-white {
|
||||
background: #f5f8fa;
|
||||
}
|
||||
|
||||
.preferred-width {
|
||||
width: 840px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,12 +15,22 @@
|
|||
v-if="inputField.type === fieldTypes.BOOLEAN"
|
||||
v-model="value[inputField.varName]"
|
||||
class="my-0 py-0"
|
||||
:label="inputField.label"
|
||||
:name="inputField.varName"
|
||||
:hint="inputField.hint || ''"
|
||||
:disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
|
||||
@change="emitBlur"
|
||||
/>
|
||||
>
|
||||
<template #label>
|
||||
<div>
|
||||
<v-card-text class="text-body-1 my-0 py-0">
|
||||
{{ inputField.label }}
|
||||
</v-card-text>
|
||||
<v-card-text v-if="inputField.hint" class="text-caption my-0 py-0">
|
||||
{{ inputField.hint }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
|
||||
|
||||
<!-- Text Field -->
|
||||
<v-text-field
|
||||
|
|
|
|||
259
frontend/components/global/BaseWizard.vue
Normal file
259
frontend/components/global/BaseWizard.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<div :style="`width: ${width}; height: 100%;`">
|
||||
<LanguageDialog v-model="langDialog" />
|
||||
<v-card>
|
||||
<div>
|
||||
<v-toolbar width="100%" color="primary" class="d-flex justify-center" style="margin-bottom: 4rem" dark>
|
||||
<v-toolbar-title class="headline text-h4"> Mealie </v-toolbar-title>
|
||||
</v-toolbar>
|
||||
|
||||
<div class="icon-container">
|
||||
<v-divider class="icon-divider"></v-divider>
|
||||
<v-avatar class="pa-2 icon-avatar" color="primary" size="75">
|
||||
<svg class="icon-white" style="width: 75" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
|
||||
/>
|
||||
</svg>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-center grow items-center my-4">
|
||||
<slot :width="pageWidth"></slot>
|
||||
</div>
|
||||
<div class="mx-2 my-4">
|
||||
<v-progress-linear
|
||||
v-if="value > 0"
|
||||
:value="Math.ceil((value/maxPageNumber)*100)"
|
||||
striped
|
||||
height="10"
|
||||
/>
|
||||
</div>
|
||||
<v-divider class="ma-2" />
|
||||
<v-card-actions width="100%">
|
||||
<v-btn
|
||||
v-if="prevButtonShow"
|
||||
:disabled="!prevButtonEnable"
|
||||
:color="prevButtonColor"
|
||||
@click="decrementPage"
|
||||
>
|
||||
<v-icon v-if="prevButtonIconRef">
|
||||
{{ prevButtonIconRef }}
|
||||
</v-icon>
|
||||
{{ prevButtonTextRef }}
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
v-if="nextButtonShow"
|
||||
:disabled="!nextButtonEnable"
|
||||
:color="nextButtonColorRef"
|
||||
@click="incrementPage"
|
||||
>
|
||||
<div v-if="isSubmitting">
|
||||
<v-progress-circular indeterminate color="white" size="24" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-icon v-if="nextButtonIconRef && !nextButtonIconAfter">
|
||||
{{ nextButtonIconRef }}
|
||||
</v-icon>
|
||||
{{ nextButtonTextRef }}
|
||||
<v-icon v-if="nextButtonIconRef && nextButtonIconAfter">
|
||||
{{ nextButtonIconRef }}
|
||||
</v-icon>
|
||||
</div>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-actions class="justify-center flex-column py-8">
|
||||
<BaseButton large color="primary" @click="langDialog = true">
|
||||
<template #icon> {{ $globals.icons.translate }}</template>
|
||||
{{ $t("language-dialog.choose-language") }}
|
||||
</BaseButton>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
minPageNumber: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
maxPageNumber: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: "1200px",
|
||||
},
|
||||
pageWidth: {
|
||||
type: [String, Number],
|
||||
default: "600px",
|
||||
},
|
||||
prevButtonText: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
prevButtonIcon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
prevButtonColor: {
|
||||
type: String,
|
||||
default: "grey-darken-3",
|
||||
},
|
||||
prevButtonShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
prevButtonEnable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
nextButtonText: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
nextButtonIcon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
nextButtonIconAfter: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
nextButtonColor: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
nextButtonShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
nextButtonEnable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
nextButtonIsSubmit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
isSubmitting: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
const { $globals, i18n } = useContext();
|
||||
const ready = ref(false);
|
||||
const langDialog = ref(false);
|
||||
|
||||
const prevButtonTextRef = computed(() => props.prevButtonText || i18n.tc("general.back"));
|
||||
const prevButtonIconRef = computed(() => props.prevButtonIcon || $globals.icons.back);
|
||||
const nextButtonTextRef = computed(
|
||||
() => props.nextButtonText || (
|
||||
props.nextButtonIsSubmit ? i18n.tc("general.submit") : i18n.tc("general.next")
|
||||
)
|
||||
);
|
||||
const nextButtonIconRef = computed(
|
||||
() => props.nextButtonIcon || (
|
||||
props.nextButtonIsSubmit ? $globals.icons.createAlt : $globals.icons.forward
|
||||
)
|
||||
);
|
||||
const nextButtonColorRef = computed(
|
||||
() => props.nextButtonColor || (props.nextButtonIsSubmit ? "success" : "info")
|
||||
);
|
||||
|
||||
function goToPage(page: number) {
|
||||
if (page < props.minPageNumber) {
|
||||
goToPage(props.minPageNumber);
|
||||
return;
|
||||
} else if (page > props.maxPageNumber) {
|
||||
goToPage(props.maxPageNumber);
|
||||
return;
|
||||
}
|
||||
|
||||
context.emit("input", page);
|
||||
}
|
||||
|
||||
function decrementPage() {
|
||||
goToPage(props.value - 1);
|
||||
}
|
||||
|
||||
function incrementPage() {
|
||||
if (props.nextButtonIsSubmit) {
|
||||
context.emit("submit", props.value);
|
||||
} else {
|
||||
goToPage(props.value + 1);
|
||||
}
|
||||
}
|
||||
|
||||
ready.value = true;
|
||||
|
||||
return {
|
||||
ready,
|
||||
langDialog,
|
||||
prevButtonTextRef,
|
||||
prevButtonIconRef,
|
||||
nextButtonTextRef,
|
||||
nextButtonIconRef,
|
||||
nextButtonColorRef,
|
||||
decrementPage,
|
||||
incrementPage,
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.icon-primary {
|
||||
fill: var(--v-primary-base);
|
||||
}
|
||||
|
||||
.icon-white {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.icon-divider {
|
||||
width: 100%;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
border: 2px;
|
||||
}
|
||||
|
||||
.bg-off-white {
|
||||
background: #f5f8fa;
|
||||
}
|
||||
|
||||
.preferred-width {
|
||||
width: 840px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue