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;
}
.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;

View file

@ -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);

View file

@ -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,
};
}

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>
<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);