feat(backend): ✨ migrate site-settings to groups (#673)

* feat(frontend): ✨ add user registration page (WIP)

* feat(backend): ✨ add user registration (WIP)

* test(backend): ✅ add validator testing for registration schema

* feat(backend): ✨ continued work on user sign-up

* feat(backend): ✨ add signup flow and user/group settings

* test(backend): ✅ user-creation tests and small refactor of existing tests

* fix(backend): ✅ fix failing group tests

* style: 🎨 fix lint issues

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/pages/admin/backups.vue

@@ -95,8 +95,8 @@
 </template>
 
 <script lang="ts">
-import AdminBackupImportOptions from "@/components/Domain/Admin/AdminBackupImportOptions.vue";
 import { defineComponent, reactive, toRefs, useContext, ref } from "@nuxtjs/composition-api";
+import AdminBackupImportOptions from "@/components/Domain/Admin/AdminBackupImportOptions.vue";
 import { useBackups } from "~/composables/use-backups";
 
 export default defineComponent({

frontend/pages/cookbooks/_slug.vue

@@ -23,8 +23,8 @@
 </template>
 
 <script lang="ts">
-import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
 import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
+import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
 import { useCookbook } from "~/composables/use-group-cookbooks";
 export default defineComponent({
   components: { RecipeCardSection },

frontend/pages/login.vue

@@ -178,10 +178,9 @@
           </v-btn>
         </v-form>
       </v-card-text>
-      <v-btn v-if="$config.ALLOW_SIGNUP" class="mx-auto" text to="/user/sign-up"> Sign Up </v-btn>
+      <v-btn v-if="$config.ALLOW_SIGNUP" class="mx-auto" text to="/register"> Register </v-btn>
       <v-btn v-else class="mx-auto" text disabled> Invite Only </v-btn>
     </v-card>
-    <!-- <v-col class="fill-height"> </v-col> -->
   </v-container>
 </template>
 

frontend/pages/register.vue

@@ -0,0 +1,170 @@
+<template>
+  <v-container fill-height fluid class="d-flex justify-center align-start narrow-container">
+    <v-card color="background d-flex flex-column align-center" flat width="700px">
+      <v-card-title class="headline"> User Registration </v-card-title>
+      <v-card-text>
+        <v-form ref="domRegisterForm" @submit.prevent="register()">
+          <ToggleState>
+            <template #activator="{ toggle }">
+              <div class="d-flex justify-center my-2">
+                <v-btn-toggle tile mandatory group color="primary">
+                  <v-btn small @click="toggle(false)"> Create a Group </v-btn>
+                  <v-btn small @click="toggle(true)"> Join a Group </v-btn>
+                </v-btn-toggle>
+              </div>
+            </template>
+            <template #default="{ state }">
+              <v-text-field
+                v-if="!state"
+                v-model="form.group"
+                filled
+                rounded
+                autofocus
+                validate-on-blur
+                class="rounded-lg"
+                :prepend-icon="$globals.icons.group"
+                :rules="[tokenOrGroup]"
+                label="New Group Name"
+              />
+              <v-text-field
+                v-else
+                v-model="form.groupToken"
+                filled
+                rounded
+                validate-on-blur
+                :rules="[tokenOrGroup]"
+                class="rounded-lg"
+                :prepend-icon="$globals.icons.group"
+                label="Group Token"
+              />
+            </template>
+          </ToggleState>
+          <v-text-field
+            v-model="form.email"
+            filled
+            rounded
+            class="rounded-lg"
+            validate-on-blur
+            :prepend-icon="$globals.icons.email"
+            label="Email"
+            :rules="[validators.required, validators.email]"
+          />
+          <v-text-field
+            v-model="form.username"
+            filled
+            rounded
+            class="rounded-lg"
+            :prepend-icon="$globals.icons.user"
+            label="Username"
+            :rules="[validators.required]"
+          />
+          <v-text-field
+            v-model="form.password"
+            filled
+            rounded
+            class="rounded-lg"
+            :prepend-icon="$globals.icons.lock"
+            name="password"
+            label="Password"
+            type="password"
+            :rules="[validators.required]"
+          />
+          <v-text-field
+            v-model="form.passwordConfirm"
+            filled
+            rounded
+            validate-on-blur
+            class="rounded-lg"
+            :prepend-icon="$globals.icons.lock"
+            name="password"
+            label="Confirm Password"
+            type="password"
+            :rules="[validators.required, passwordMatch]"
+          />
+          <div class="mt-n4 px-8">
+            <v-checkbox v-model="form.private" label="Keep My Recipes Private"></v-checkbox>
+            <p class="text-caption mt-n4">
+              Sets your group and all recipes defaults to private. You can always change this later.
+            </p>
+            <v-checkbox v-model="form.advanced" label="Enable Advanced Content"></v-checkbox>
+            <p class="text-caption mt-n4">
+              Enables advanced features like Recipe Scaling, API keys, Webhooks, and Data Management. Don't worry, you
+              can always change this later
+            </p>
+          </div>
+          <div class="d-flex flex-column justify-center">
+            <v-btn :loading="loggingIn" color="primary" type="submit" large rounded class="rounded-xl" block>
+              Register
+            </v-btn>
+            <v-btn class="mx-auto my-2" text to="/login"> Login </v-btn>
+          </div>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
+import { validators } from "@/composables/use-validators";
+import { useApiSingleton } from "~/composables/use-api";
+import { alert } from "~/composables/use-toast";
+
+export default defineComponent({
+  layout: "basic",
+  setup() {
+    const api = useApiSingleton();
+    const state = reactive({
+      loggingIn: false,
+      success: false,
+    });
+    const allowSignup = computed(() => process.env.AllOW_SIGNUP);
+
+    const router = useRouter();
+
+    // @ts-ignore
+    const domRegisterForm = ref<VForm>(null);
+
+    const form = reactive({
+      group: "",
+      groupToken: "",
+      email: "",
+      username: "",
+      password: "",
+      passwordConfirm: "",
+      advanced: false,
+      private: false,
+    });
+
+    const passwordMatch = () => form.password === form.passwordConfirm || "Passwords do not match";
+    const tokenOrGroup = () => form.group !== "" || form.groupToken !== "" || "Group name or token must be given";
+
+    async function register() {
+      if (!domRegisterForm.value?.validate()) {
+        return;
+      }
+
+      const { data, response } = await api.register.register(form);
+
+      if (response?.status === 201) {
+        state.success = true;
+        alert.success("Registration Success");
+        router.push("/user/login");
+      }
+
+      console.log(data, response);
+    }
+
+    return {
+      domRegisterForm,
+      validators,
+      allowSignup,
+      form,
+      ...toRefs(state),
+      passwordMatch,
+      tokenOrGroup,
+      register,
+    };
+  },
+});
+</script>

frontend/pages/user/group/cookbooks.vue

@@ -50,8 +50,8 @@
     
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
-import { useCookbooks } from "@/composables/use-group-cookbooks";
 import draggable from "vuedraggable";
+import { useCookbooks } from "@/composables/use-group-cookbooks";
 
 export default defineComponent({
   components: { draggable },

frontend/pages/user/group/index.vue

@@ -1,39 +1,139 @@
 <template>
-  <v-container>
-    <BasePageTitle divider>
+  <v-container class="narrow-container">
+    <BasePageTitle class="mb-5">
       <template #header>
         <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
       </template>
       <template #title> Group Settings </template>
       These items are shared within your group. Editing one of them will change it for the whole group!
     </BasePageTitle>
-    <v-card tag="section" outlined>
-      <v-card-text>
-        <BaseCardSectionTitle title="Mealplan Categories">
-          Set the categories below for the ones that you want to be included in your mealplan random generation.
-          <div class="mt-2">
-            <BaseButton save @click="actions.updateAll()" />
-          </div>
-        </BaseCardSectionTitle>
-        <DomainRecipeCategoryTagSelector v-if="categories" v-model="categories" />
-      </v-card-text>
-    </v-card>
+    <section>
+      <BaseCardSectionTitle title="Mealplan Categories">
+        Set the categories below for the ones that you want to be included in your mealplan random generation.
+      </BaseCardSectionTitle>
+      <DomainRecipeCategoryTagSelector v-if="categories" v-model="categories" />
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <BaseButton save @click="actions.updateAll()" />
+      </v-card-actions>
+    </section>
+
+    <section v-if="group">
+      <BaseCardSectionTitle class="mt-10" title="Group Preferences"></BaseCardSectionTitle>
+      <v-checkbox
+        v-model="group.preferences.privateGroup"
+        class="mt-n4"
+        label="Private Group"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+      <v-select
+        v-model="group.preferences.firstDayOfWeek"
+        :prepend-icon="$globals.icons.calendarWeekBegin"
+        :items="allDays"
+        item-text="name"
+        item-value="value"
+        :label="$t('settings.first-day-of-week')"
+        @change="groupActions.updatePreferences()"
+      />
+    </section>
+
+    <section v-if="group">
+      <BaseCardSectionTitle class="mt-10" title="Default Recipe Preferences">
+        These are the default settings when a new recipe is created in your group. These can be changed for indivdual
+        recipes in the recipe settings menu.
+      </BaseCardSectionTitle>
+
+      <v-checkbox
+        v-model="group.preferences.recipePublic"
+        class="mt-n4"
+        label="Allow users outside of your group to see your recipes"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+      <v-checkbox
+        v-model="group.preferences.recipeShowNutrition"
+        class="mt-n4"
+        label="Show nutrition information"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+      <v-checkbox
+        v-model="group.preferences.recipeShowAssets"
+        class="mt-n4"
+        label="Show recipe assets"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+      <v-checkbox
+        v-model="group.preferences.recipeLandscapeView"
+        class="mt-n4"
+        label="Default to landscape view"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+      <v-checkbox
+        v-model="group.preferences.recipeDisableComments"
+        class="mt-n4"
+        label="Allow recipe comments from users in your group"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+      <v-checkbox
+        v-model="group.preferences.recipeDisableAmount"
+        class="mt-n4"
+        label="Enable organizing recipe ingredients by units and food"
+        @change="groupActions.updatePreferences()"
+      ></v-checkbox>
+    </section>
   </v-container>
 </template>
     
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-import { useGroup } from "~/composables/use-groups";
+import { defineComponent, useContext } from "@nuxtjs/composition-api";
+import { useGroupCategories, useGroupSelf } from "~/composables/use-groups";
 
 export default defineComponent({
   setup() {
-    const { categories, actions } = useGroup();
+    const { categories, actions } = useGroupCategories();
+    const { group, actions: groupActions } = useGroupSelf();
+
+    const { i18n } = useContext();
+
+    const allDays = [
+      {
+        name: i18n.t("general.sunday"),
+        value: 0,
+      },
+      {
+        name: i18n.t("general.monday"),
+        value: 1,
+      },
+      {
+        name: i18n.t("general.tuesday"),
+        value: 2,
+      },
+      {
+        name: i18n.t("general.wednesday"),
+        value: 3,
+      },
+      {
+        name: i18n.t("general.thursday"),
+        value: 4,
+      },
+      {
+        name: i18n.t("general.friday"),
+        value: 5,
+      },
+      {
+        name: i18n.t("general.saturday"),
+        value: 6,
+      },
+    ];
 
     return {
       categories,
       actions,
+      group,
+      groupActions,
+      allDays,
     };
   },
 });
 </script>
     
+

frontend/pages/user/profile/edit.vue

@@ -82,6 +82,18 @@
         </template>
       </ToggleState>
     </section>
+    <section>
+      <BaseCardSectionTitle class="mt-10" title="Preferences"> </BaseCardSectionTitle>
+      <v-checkbox
+        v-model="userCopy.advanced"
+        class="mt-n4"
+        label="Show advanced features (API Keys, Webhooks, and Data Management)"
+        @change="updateUser"
+      ></v-checkbox>
+      <div class="d-flex justify-center mt-5">
+        <v-btn outlined class="rounded-xl" to="/user/group"> Looking for Privacy Settings? </v-btn>
+      </div>
+    </section>
   </v-container>
 </template>
     

frontend/pages/user/profile/index.vue

@@ -27,6 +27,7 @@
         </v-col>
         <v-col cols="12" sm="12" md="6">
           <UserProfileLinkCard
+            v-if="user.advanced"
             :link="{ text: 'Manage Your API Tokens', to: '/user/profile/api-tokens' }"
             :image="require('~/static/svgs/manage-api-tokens.svg')"
           >
@@ -63,6 +64,7 @@
         </v-col>
         <v-col cols="12" sm="12" md="6">
           <UserProfileLinkCard
+            v-if="user.advanced"
             :link="{ text: 'Manage Webhooks', to: '/user/group/webhooks' }"
             :image="require('~/static/svgs/manage-webhooks.svg')"
           >