Fix/fix block registration (#1059)

* fix disable button

* add backend env for restricting registration

* update state management

* add allow_signup to app info

* move allow_signup to backend only

* cleanup docker-compose

* potential darkmode fix

* fix missing variable

* add banner on login page

* use random bools for tests

* fix initial state bug

* fix state reset

frontend/composables/api/index.ts

@@ -1,2 +1,3 @@
+export { useAppInfo } from "./use-app-info";
 export { useStaticRoutes } from "./static-routes";
 export { useAdminApi, useUserApi } from "./api-client";

frontend/composables/api/use-app-info.ts

@@ -0,0 +1,11 @@
+import { Ref, useAsync } from "@nuxtjs/composition-api";
+import { useAsyncKey } from "../use-utils";
+import { AppInfo } from "~/types/api-types/admin";
+
+export function useAppInfo(): Ref<AppInfo | null> {
+  return useAsync(async () => {
+    // We use fetch here to reduce need for additional dependencies
+    const data = await fetch("/api/app/about").then((res) => res.json());
+    return data as AppInfo;
+  }, useAsyncKey());
+}

frontend/layouts/blank.vue

@@ -2,6 +2,12 @@
   <v-app dark>
     <TheSnackbar />
 
+    <v-banner v-if="isDemo" sticky>
+      <div class="text-center">
+        <b> This is a Demo for version: {{ version }} </b> | Username: changeme@email.com | Password: demo
+      </div>
+    </v-banner>
+
     <v-main>
       <v-scroll-x-transition>
         <Nuxt />
@@ -11,9 +17,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
+import { useAppInfo } from "~/composables/api";
 export default defineComponent({
   components: { TheSnackbar },
+  setup() {
+    const appInfo = useAppInfo();
+
+    const isDemo = computed(() => appInfo?.value?.demoStatus || false);
+
+    const version = computed(() => appInfo?.value?.version || "unknown");
+
+    return {
+      appInfo,
+      isDemo,
+      version,
+    };
+  },
 });
 </script>

frontend/nuxt.config.js

@@ -26,7 +26,6 @@ export default {
 
   env: {
     GLOBAL_MIDDLEWARE: process.env.GLOBAL_MIDDLEWARE || null,
-    ALLOW_SIGNUP: process.env.ALLOW_SIGNUP || true,
   },
 
   router: {
@@ -220,10 +219,6 @@ export default {
 
   publicRuntimeConfig: {
     GLOBAL_MIDDLEWARE: process.env.GLOBAL_MIDDLEWARE || null,
-    ALLOW_SIGNUP: process.env.ALLOW_SIGNUP || true,
-    envProps: {
-      allowSignup: process.env.ALLOW_SIGNUP || true,
-    },
     SUB_PATH: process.env.SUB_PATH || "",
     axios: {
       browserBaseURL: process.env.SUB_PATH || "",

frontend/pages/login.vue

@@ -4,7 +4,7 @@
     fluid
     class="d-flex justify-center align-center"
     :class="{
-      'bg-off-white': !$vuetify.theme.dark,
+      'bg-off-white': !$vuetify.theme.dark && !isDark,
     }"
   >
     <v-card tag="section" class="d-flex flex-column align-center" width="600px">
@@ -108,6 +108,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, useContext, computed, reactive } from "@nuxtjs/composition-api";
+import { useDark } from "@vueuse/core";
+import { useAppInfo } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useToggleDarkMode } from "~/composables/use-utils";
 export default defineComponent({
@@ -115,9 +117,9 @@ export default defineComponent({
 
   setup() {
     const toggleDark = useToggleDarkMode();
+    const isDark = useDark();
 
     const { $auth } = useContext();
-    const context = useContext();
 
     const form = reactive({
       email: "",
@@ -127,7 +129,9 @@ export default defineComponent({
 
     const loggingIn = ref(false);
 
-    const allowSignup = computed(() => context.env.ALLOW_SIGNUP as boolean);
+    const appInfo = useAppInfo();
+
+    const allowSignup = computed(() => appInfo.value?.allowSignup || false);
 
     async function authenticate() {
       if (form.email.length === 0 || form.password.length === 0) {
@@ -148,6 +152,7 @@ export default defineComponent({
         // See https://github.com/nuxt-community/axios-module/issues/550
         // Import $axios from useContext()
         // if ($axios.isAxiosError(error) && error.response?.status === 401) {
+        // @ts-ignore - see above
         if (error.response?.status === 401) {
           alert.error("Invalid Credentials");
         } else {
@@ -158,6 +163,7 @@ export default defineComponent({
     }
 
     return {
+      isDark,
       form,
       loggingIn,
       allowSignup,

frontend/pages/register.vue

@@ -6,8 +6,8 @@
         <v-form ref="domRegisterForm" @submit.prevent="register()">
           <div class="d-flex justify-center my-2">
             <v-btn-toggle v-model="joinGroup" mandatory tile group color="primary">
-              <v-btn :value="false" small @click="joinGroup = false"> Create a Group </v-btn>
-              <v-btn :value="true" small @click="joinGroup = true"> Join a Group </v-btn>
+              <v-btn :value="false" small @click="toggleJoinGroup"> Create a Group </v-btn>
+              <v-btn :value="true" small @click="toggleJoinGroup"> Join a Group </v-btn>
             </v-btn-toggle>
           </div>
           <v-text-field
@@ -99,12 +99,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, toRefs, ref, useRouter, watch } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
 import { validators } from "@/composables/use-validators";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
-import { useRouterQuery } from "@/composables/use-router";
-import { VForm} from "~/types/vuetify";
+import { useRouteQuery } from "@/composables/use-router";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   layout: "basic",
@@ -117,18 +117,22 @@ export default defineComponent({
     });
     const allowSignup = computed(() => process.env.AllOW_SIGNUP);
 
-    const token = useRouterQuery("token");
+    const token = useRouteQuery("token");
 
-    watch(token, (newToken) => {
-      if (newToken) {
-        form.groupToken = newToken;
-      }
-    });
-
-    if (token) {
+    if (token.value) {
       state.joinGroup = true;
     }
 
+    function toggleJoinGroup() {
+      if (state.joinGroup) {
+        state.joinGroup = false;
+        token.value = "";
+      } else {
+        state.joinGroup = true;
+        form.group = "";
+      }
+    }
+
     const domRegisterForm = ref<VForm | null>(null);
 
     const form = reactive({
@@ -163,6 +167,7 @@ export default defineComponent({
 
     return {
       token,
+      toggleJoinGroup,
       domRegisterForm,
       validators,
       allowSignup,

frontend/types/api-types/admin.ts

@@ -9,6 +9,7 @@ export interface AdminAboutInfo {
   production: boolean;
   version: string;
   demoStatus: boolean;
+  allowSignup: boolean;
   versionLatest: string;
   apiPort: number;
   apiDocs: boolean;
@@ -29,6 +30,7 @@ export interface AppInfo {
   production: boolean;
   version: string;
   demoStatus: boolean;
+  allowSignup: boolean;
 }
 export interface AppStatistics {
   totalRecipes: number;

frontend/types/api-types/response.ts

@@ -11,9 +11,12 @@ export interface ErrorResponse {
   exception?: string;
 }
 export interface FileTokenResponse {
-  file_token: string;
+  fileToken: string;
 }
 export interface SuccessResponse {
   message: string;
   error?: boolean;
 }
+export interface ValidationResponse {
+  valid?: boolean;
+}