Respect default activity

frontend/pages/login.vue

@@ -1,18 +1,8 @@
 <template>
-  <v-container
+  <v-container fluid class="d-flex justify-center align-center flex-column fill-height" :class="{
-    fluid
+    'bg-off-white': !$vuetify.theme.current.dark && !isDark,
-    class="d-flex justify-center align-center flex-column fill-height"
+  }">
-    :class="{
+    <v-alert v-if="isFirstLogin" class="my-4" type="info" :icon="$globals.icons.information" :style="{ flex: 'none' }">
-      'bg-off-white': !$vuetify.theme.current.dark && !isDark,
-    }"
-  >
-    <v-alert
-      v-if="isFirstLogin"
-      class="my-4"
-      type="info"
-      :icon="$globals.icons.information"
-      :style="{ flex: 'none' }"
-    >
       <div>
         <p class="mb-3">
           {{ $t('user.it-looks-like-this-is-your-first-time-logging-in') }}
@@ -28,16 +18,8 @@
         </p>
       </div>
     </v-alert>
-    <v-card
+    <v-card tag="section" class="d-flex flex-column align-center w-100" max-width="600">
-      tag="section"
+      <v-toolbar color="primary" class="d-flex justify-center mb-4" dark>
-      class="d-flex flex-column align-center w-100"
-      max-width="600"
-    >
-      <v-toolbar
-        color="primary"
-        class="d-flex justify-center mb-4"
-        dark
-      >
         <v-toolbar-title class="text-h4 text-center">
           Mealie
         </v-toolbar-title>
@@ -45,19 +27,10 @@
 
       <div class="icon-container">
         <v-divider class="icon-divider" />
-        <v-avatar
+        <v-avatar class="pa-2 icon-avatar" color="primary" size="100">
-          class="pa-2 icon-avatar"
+          <svg class="icon-white" style="width: 100px; height: 100px" viewBox="0 0 24 24">
-          color="primary"
-          size="100"
-        >
-          <svg
-            class="icon-white"
-            style="width: 100px; height: 100px"
-            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"
+              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>
@@ -67,88 +40,37 @@
       </v-card-title>
       <v-card-text class="w-100">
         <v-form @submit.prevent="authenticate">
-          <v-text-field
+          <v-text-field v-if="allowPasswordLogin" v-model="form.email" :prepend-inner-icon="$globals.icons.email"
-            v-if="allowPasswordLogin"
+            variant="solo-filled" flat width="100%" autofocus autocomplete="username" name="login"
-            v-model="form.email"
+            :label="$t('user.email-or-username')" type="text" />
-            :prepend-inner-icon="$globals.icons.email"
+          <v-text-field v-if="allowPasswordLogin" id="password" v-model="form.password"
-            variant="solo-filled"
+            :prepend-inner-icon="$globals.icons.lock" :append-inner-icon="passwordIcon" variant="solo-filled" flat
-            flat
+            autocomplete="current-password" name="password" :label="$t('user.password')" :type="inputType"
-            width="100%"
+            @click:append-inner="togglePasswordShow" />
-            autofocus
+          <v-checkbox v-if="allowPasswordLogin" v-model="form.remember" class="ml-2 mt-n2"
-            autocomplete="username"
+            :label="$t('user.remember-me')" />
-            name="login"
-            :label="$t('user.email-or-username')"
-            type="text"
-          />
-          <v-text-field
-            v-if="allowPasswordLogin"
-            id="password"
-            v-model="form.password"
-            :prepend-inner-icon="$globals.icons.lock"
-            :append-inner-icon="passwordIcon"
-            variant="solo-filled"
-            flat
-            autocomplete="current-password"
-            name="password"
-            :label="$t('user.password')"
-            :type="inputType"
-            @click:append-inner="togglePasswordShow"
-          />
-          <v-checkbox
-            v-if="allowPasswordLogin"
-            v-model="form.remember"
-            class="ml-2 mt-n2"
-            :label="$t('user.remember-me')"
-          />
           <v-card-actions v-if="allowPasswordLogin" class="justify-center pt-0">
             <div class="max-button">
-              <v-btn
+              <v-btn :loading="loggingIn" :disabled="oidcLoggingIn" variant="elevated" color="primary" type="submit"
-                :loading="loggingIn"
+                size="large" rounded class="rounded-xl" block>
-                :disabled="oidcLoggingIn"
-                variant="elevated"
-                color="primary"
-                type="submit"
-                size="large"
-                rounded
-                class="rounded-xl"
-                block
-              >
                 {{ $t("user.login") }}
               </v-btn>
             </div>
           </v-card-actions>
 
-          <div
+          <div v-if="allowOidc && allowPasswordLogin" class="d-flex my-4 justify-center align-center" width="80%">
-            v-if="allowOidc && allowPasswordLogin"
-            class="d-flex my-4 justify-center align-center"
-            width="80%"
-          >
             <v-divider class="div-width" />
-            <span
+            <span class="absolute px-2" :class="{
-              class="absolute px-2"
+              'bg-white': !$vuetify.theme.current.dark && !isDark,
-              :class="{
+              'bg-grey-darken-4': $vuetify.theme.current.dark || isDark,
-                'bg-white': !$vuetify.theme.current.dark && !isDark,
+            }">
-                'bg-grey-darken-4': $vuetify.theme.current.dark || isDark,
-              }"
-            >
               {{ $t("user.or") }}
             </span>
           </div>
-          <v-card-actions
+          <v-card-actions v-if="allowOidc" class="justify-center">
-            v-if="allowOidc"
-            class="justify-center"
-          >
             <div class="max-button">
-              <v-btn
+              <v-btn :loading="oidcLoggingIn" color="primary" size="large" variant="elevated" rounded class="rounded-xl"
-                :loading="oidcLoggingIn"
+                block @click="() => oidcAuthenticate()">
-                color="primary"
-                size="large"
-                variant="elevated"
-                rounded
-                class="rounded-xl"
-                block
-                @click="() => oidcAuthenticate()"
-              >
                 {{ $t("user.login-oidc") }} {{ oidcProviderName }}
               </v-btn>
             </div>
@@ -156,57 +78,36 @@
         </v-form>
       </v-card-text>
       <v-card-actions class="d-flex justify-center flex-column flex-sm-row">
-        <v-btn
+        <v-btn v-if="allowSignup && allowPasswordLogin" variant="text" to="/register">
-          v-if="allowSignup && allowPasswordLogin"
-          variant="text"
-          to="/register"
-        >
           {{ $t("user.register") }}
         </v-btn>
-        <v-btn
+        <v-btn v-else variant="text" disabled>
-          v-else
-          variant="text"
-          disabled
-        >
           {{ $t("user.invite-only") }}
         </v-btn>
-        <v-btn
+        <v-btn v-if="allowPasswordLogin" class="mr-auto" variant="text" to="/forgot-password">
-          v-if="allowPasswordLogin"
-          class="mr-auto"
-          variant="text"
-          to="/forgot-password"
-        >
           {{ $t("user.reset-password") }}
         </v-btn>
       </v-card-actions>
 
       <v-card-text class="d-flex justify-center flex-column flex-sm-row">
-        <div
+        <div v-for="link in [
-          v-for="link in [
+          {
-            {
+            text: $t('about.sponsor'),
-              text: $t('about.sponsor'),
+            icon: $globals.icons.heart,
-              icon: $globals.icons.heart,
+            href: 'https://github.com/sponsors/hay-kot',
-              href: 'https://github.com/sponsors/hay-kot',
+          },
-            },
+          {
-            {
+            text: $t('about.github'),
-              text: $t('about.github'),
+            icon: $globals.icons.github,
-              icon: $globals.icons.github,
+            href: 'https://github.com/mealie-recipes/mealie',
-              href: 'https://github.com/mealie-recipes/mealie',
+          },
-            },
+          {
-            {
+            text: $t('about.docs'),
-              text: $t('about.docs'),
+            icon: $globals.icons.folderOutline,
-              icon: $globals.icons.folderOutline,
+            href: 'https://docs.mealie.io/',
-              href: 'https://docs.mealie.io/',
+          },
-            },
+        ]" :key="link.text" class="text-center">
-          ]"
+          <v-btn variant="text" :href="link.href" target="_blank">
-          :key="link.text"
-          class="text-center"
-        >
-          <v-btn
-            variant="text"
-            :href="link.href"
-            target="_blank"
-          >
             <v-icon start>
               {{ link.icon }}
             </v-icon>
@@ -264,8 +165,9 @@ export default defineNuxtComponent({
       () => {
         if (!isDemo.value && isFirstLogin.value && $auth.user.value?.admin) {
           router.push("/admin/setup");
-        }
+        } else if ($auth.user?.defaultActivity) {
-        else {
+          router.push($auth.user.defaultActivity)
+        } else {
           router.push(`/g/${groupSlug.value || ""}`);
         }
       },