Show registration button if registration allow list is used and improve

registration page

Closes #1102

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/assets/oruga-tailwindcss.css

@@ -2,6 +2,10 @@ body {
   @apply bg-body-background-color dark:bg-zinc-800 dark:text-white;
 }
 
+.out {
+  @apply underline hover:decoration-2 hover:decoration-mbz-yellow-alt-600;
+}
+
 /* Button */
 .btn {
   @apply font-bold py-2 px-4 bg-mbz-bluegreen hover:bg-mbz-bluegreen-600 text-white rounded h-10 outline-none focus:ring ring-offset-1 ring-offset-slate-50 ring-blue-300;

js/src/components/NavBar.vue

@@ -185,7 +185,11 @@
               >{{ t("Login") }}</router-link
             >
           </li>
-          <li v-if="!currentActor?.id">
+          <li
+            v-if="
+              !currentActor?.id && (registrationsOpen || registrationsAllowlist)
+            "
+          >
             <router-link
               :to="{ name: RouteName.REGISTER }"
               class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
@@ -387,6 +391,7 @@ import {
 import { useMutation } from "@vue/apollo-composable";
 import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
 import { changeIdentity } from "@/utils/identity";
+import { useRegistrationConfig } from "@/composition/apollo/config";
 // import { useRestrictions } from "@/composition/apollo/config";
 
 const { currentUser } = useCurrentUserClient();
@@ -399,6 +404,7 @@ const router = useRouter();
 // const route = useRoute();
 
 const { identities } = useCurrentUserIdentities();
+const { registrationsOpen, registrationsAllowlist } = useRegistrationConfig();
 
 // const mobileNavbarActive = ref(false);
 

js/src/composition/apollo/config.ts

@@ -11,6 +11,7 @@ import {
   GEOCODING_AUTOCOMPLETE,
   LOCATION,
   MAPS_TILES,
+  REGISTRATIONS,
   RESOURCE_PROVIDERS,
   RESTRICTIONS,
   ROUTING_TYPE,
@@ -204,3 +205,23 @@ export function useSearchConfig() {
   const searchConfig = computed(() => result.value?.config.search);
   return { searchConfig, error, loading, onResult };
 }
+
+export function useRegistrationConfig() {
+  const { result, error, loading, onResult } = useQuery<{
+    config: Pick<IConfig, "registrationsOpen" | "registrationsAllowlist">;
+  }>(REGISTRATIONS, undefined, { fetchPolicy: "cache-only" });
+
+  const registrationsOpen = computed(
+    () => result.value?.config.registrationsOpen
+  );
+  const registrationsAllowlist = computed(
+    () => result.value?.config.registrationsAllowlist
+  );
+  return {
+    registrationsOpen,
+    registrationsAllowlist,
+    error,
+    loading,
+    onResult,
+  };
+}

js/src/graphql/config.ts

@@ -444,3 +444,12 @@ export const SEARCH_CONFIG = gql`
     }
   }
 `;
+
+export const REGISTRATIONS = gql`
+  query Registrations {
+    config {
+      registrationsOpen
+      registrationsAllowlist
+    }
+  }
+`;

js/src/views/User/RegisterView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto pt-6">
+  <div class="container mx-auto py-6">
     <section class="">
       <h1>
         {{
@@ -123,7 +123,7 @@
             />
           </o-field>
 
-          <div class="flex items-start mb-6">
+          <div class="flex items-start mb-6 mt-2">
             <div class="flex items-center h-5">
               <input
                 type="checkbox"
@@ -155,7 +155,7 @@
             </label>
           </div>
 
-          <p class="create-account control has-text-centered">
+          <p>
             <o-button
               variant="primary"
               size="large"
@@ -166,19 +166,19 @@
             </o-button>
           </p>
 
-          <p class="control has-text-centered">
-            <router-link
-              class="button is-text"
+          <p class="my-6">
+            <o-button
+              tag="router-link"
+              variant="text"
               :to="{
                 name: RouteName.RESEND_CONFIRMATION,
                 params: { email: credentials.email },
               }"
-              >{{ t("Didn't receive the instructions?") }}</router-link
+              >{{ t("Didn't receive the instructions?") }}</o-button
             >
-          </p>
-          <p class="control has-text-centered">
-            <router-link
-              class="button is-text"
+            <o-button
+              tag="router-link"
+              variant="text"
               :to="{
                 name: RouteName.LOGIN,
                 params: {
@@ -186,7 +186,7 @@
                   password: credentials.password,
                 },
               }"
-              >{{ t("Login") }}</router-link
+              >{{ t("Login") }}</o-button
             >
           </p>
 
@@ -252,13 +252,13 @@ const title = computed((): string => {
   if (config.value) {
     return t("Register an account on {instanceName}!", {
       instanceName: config.value?.name,
-    }) as string;
+    });
   }
   return "";
 });
 
 useHead({
-  title: title.value,
+  title: () => title.value,
 });
 
 const { onDone, onError, mutate } = useMutation(CREATE_USER);