Show registration button if registration allow list is used and improve

registration page

Closes #1102

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-28 12:58:52 +02:00
parent e420713a6f
commit fc5b6882ae
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
5 changed files with 55 additions and 15 deletions

View File

@ -2,6 +2,10 @@ body {
@apply bg-body-background-color dark:bg-zinc-800 dark:text-white; @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 */ /* Button */
.btn { .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; @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;

View File

@ -185,7 +185,11 @@
>{{ t("Login") }}</router-link >{{ t("Login") }}</router-link
> >
</li> </li>
<li v-if="!currentActor?.id"> <li
v-if="
!currentActor?.id && (registrationsOpen || registrationsAllowlist)
"
>
<router-link <router-link
:to="{ name: RouteName.REGISTER }" :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" 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 { useMutation } from "@vue/apollo-composable";
import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor"; import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
import { changeIdentity } from "@/utils/identity"; import { changeIdentity } from "@/utils/identity";
import { useRegistrationConfig } from "@/composition/apollo/config";
// import { useRestrictions } from "@/composition/apollo/config"; // import { useRestrictions } from "@/composition/apollo/config";
const { currentUser } = useCurrentUserClient(); const { currentUser } = useCurrentUserClient();
@ -399,6 +404,7 @@ const router = useRouter();
// const route = useRoute(); // const route = useRoute();
const { identities } = useCurrentUserIdentities(); const { identities } = useCurrentUserIdentities();
const { registrationsOpen, registrationsAllowlist } = useRegistrationConfig();
// const mobileNavbarActive = ref(false); // const mobileNavbarActive = ref(false);

View File

@ -11,6 +11,7 @@ import {
GEOCODING_AUTOCOMPLETE, GEOCODING_AUTOCOMPLETE,
LOCATION, LOCATION,
MAPS_TILES, MAPS_TILES,
REGISTRATIONS,
RESOURCE_PROVIDERS, RESOURCE_PROVIDERS,
RESTRICTIONS, RESTRICTIONS,
ROUTING_TYPE, ROUTING_TYPE,
@ -204,3 +205,23 @@ export function useSearchConfig() {
const searchConfig = computed(() => result.value?.config.search); const searchConfig = computed(() => result.value?.config.search);
return { searchConfig, error, loading, onResult }; 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,
};
}

View File

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

View File

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