2019-01-21 15:08:22 +01:00
|
|
|
<template>
|
2019-12-20 13:04:34 +01:00
|
|
|
<section class="section container" v-if="!currentUser.isLoggedIn">
|
|
|
|
<div class="columns is-mobile is-centered">
|
|
|
|
<div class="column is-half-desktop">
|
2020-02-18 08:57:00 +01:00
|
|
|
<h1 class="title">{{ $t("Welcome back!") }}</h1>
|
|
|
|
<b-message
|
|
|
|
v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN"
|
|
|
|
title="Info"
|
|
|
|
type="is-info"
|
|
|
|
:aria-close-label="$t('Close')"
|
|
|
|
>{{ $t("You need to login.") }}</b-message
|
|
|
|
>
|
2020-06-27 19:12:45 +02:00
|
|
|
<b-message
|
|
|
|
v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
|
|
|
|
type="is-danger"
|
|
|
|
:aria-close-label="$t('Close')"
|
|
|
|
>{{
|
2020-11-30 10:24:11 +01:00
|
|
|
$t(
|
|
|
|
"Error while login with {provider}. Retry or login another way.",
|
|
|
|
{
|
|
|
|
provider: $route.query.provider,
|
|
|
|
}
|
|
|
|
)
|
2020-06-27 19:12:45 +02:00
|
|
|
}}</b-message
|
|
|
|
>
|
|
|
|
<b-message
|
|
|
|
v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
|
|
|
|
type="is-danger"
|
|
|
|
:aria-close-label="$t('Close')"
|
|
|
|
>{{
|
2020-11-30 10:24:11 +01:00
|
|
|
$t(
|
|
|
|
"Error while login with {provider}. This login provider doesn't exist.",
|
|
|
|
{
|
|
|
|
provider: $route.query.provider,
|
|
|
|
}
|
|
|
|
)
|
2020-06-27 19:12:45 +02:00
|
|
|
}}</b-message
|
|
|
|
>
|
2020-11-30 10:24:11 +01:00
|
|
|
<b-message
|
|
|
|
:title="$t('Error')"
|
|
|
|
type="is-danger"
|
|
|
|
v-for="error in errors"
|
|
|
|
:key="error"
|
|
|
|
>
|
2020-09-29 09:53:48 +02:00
|
|
|
{{ error }}
|
2019-12-20 13:04:34 +01:00
|
|
|
</b-message>
|
|
|
|
<form @submit="loginAction">
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-field :label="$t('Email')" label-for="email">
|
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
id="email"
|
|
|
|
type="email"
|
|
|
|
v-model="credentials.email"
|
|
|
|
/>
|
2019-12-20 13:04:34 +01:00
|
|
|
</b-field>
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-field :label="$t('Password')" label-for="password">
|
2019-12-20 13:04:34 +01:00
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
2020-02-18 08:57:00 +01:00
|
|
|
id="password"
|
2019-12-20 13:04:34 +01:00
|
|
|
required
|
|
|
|
type="password"
|
|
|
|
password-reveal
|
|
|
|
v-model="credentials.password"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2020-09-29 09:53:48 +02:00
|
|
|
<p class="control has-text-centered" v-if="!submitted">
|
2021-04-16 14:49:43 +02:00
|
|
|
<button type="submit" class="button is-primary is-large">
|
2020-11-30 10:24:11 +01:00
|
|
|
{{ $t("Login") }}
|
|
|
|
</button>
|
2019-12-20 13:04:34 +01:00
|
|
|
</p>
|
2020-09-29 09:53:48 +02:00
|
|
|
<b-loading :is-full-page="false" v-model="submitted" />
|
2020-06-27 19:12:45 +02:00
|
|
|
|
2020-11-30 10:24:11 +01:00
|
|
|
<div
|
|
|
|
class="control"
|
|
|
|
v-if="config && config.auth.oauthProviders.length > 0"
|
|
|
|
>
|
2020-06-27 19:12:45 +02:00
|
|
|
<auth-providers :oauthProviders="config.auth.oauthProviders" />
|
|
|
|
</div>
|
|
|
|
|
2019-12-20 13:04:34 +01:00
|
|
|
<p class="control">
|
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
2020-11-30 10:24:11 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.SEND_PASSWORD_RESET,
|
|
|
|
params: { email: credentials.email },
|
|
|
|
}"
|
2020-02-18 08:57:00 +01:00
|
|
|
>{{ $t("Forgot your password ?") }}</router-link
|
2019-12-20 13:04:34 +01:00
|
|
|
>
|
|
|
|
</p>
|
2020-06-18 16:01:14 +02:00
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
2020-11-30 10:24:11 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.RESEND_CONFIRMATION,
|
|
|
|
params: { email: credentials.email },
|
|
|
|
}"
|
2020-10-01 12:38:59 +02:00
|
|
|
>{{ $t("Didn't receive the instructions?") }}</router-link
|
2020-06-18 16:01:14 +02:00
|
|
|
>
|
2019-12-20 13:04:34 +01:00
|
|
|
<p class="control" v-if="config && config.registrationsOpen">
|
|
|
|
<router-link
|
|
|
|
class="button is-text"
|
2020-02-18 08:57:00 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.REGISTER,
|
|
|
|
params: {
|
|
|
|
default_email: credentials.email,
|
|
|
|
default_password: credentials.password,
|
|
|
|
},
|
|
|
|
}"
|
2020-10-12 08:50:51 +02:00
|
|
|
>{{ $t("Create an account") }}</router-link
|
2019-12-20 13:04:34 +01:00
|
|
|
>
|
|
|
|
</p>
|
|
|
|
</form>
|
2019-01-21 15:08:22 +01:00
|
|
|
</div>
|
2019-12-20 13:04:34 +01:00
|
|
|
</div>
|
|
|
|
</section>
|
2019-01-21 15:08:22 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2021-08-09 08:59:46 +02:00
|
|
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
2020-09-29 09:53:48 +02:00
|
|
|
import { Route } from "vue-router";
|
2020-11-27 19:27:44 +01:00
|
|
|
import { ICurrentUser } from "@/types/current-user.model";
|
|
|
|
import { LoginError, LoginErrorCode } from "@/types/enums";
|
2020-02-18 08:57:00 +01:00
|
|
|
import { LOGIN } from "../../graphql/auth";
|
2020-11-30 10:24:11 +01:00
|
|
|
import {
|
|
|
|
validateEmailField,
|
|
|
|
validateRequiredField,
|
|
|
|
} from "../../utils/validators";
|
|
|
|
import {
|
|
|
|
initializeCurrentActor,
|
|
|
|
NoIdentitiesException,
|
|
|
|
saveUserData,
|
|
|
|
} from "../../utils/auth";
|
2020-02-18 08:57:00 +01:00
|
|
|
import { ILogin } from "../../types/login.model";
|
2020-11-30 10:24:11 +01:00
|
|
|
import {
|
|
|
|
CURRENT_USER_CLIENT,
|
|
|
|
UPDATE_CURRENT_USER_CLIENT,
|
|
|
|
} from "../../graphql/user";
|
2020-02-18 08:57:00 +01:00
|
|
|
import RouteName from "../../router/name";
|
|
|
|
import { CONFIG } from "../../graphql/config";
|
|
|
|
import { IConfig } from "../../types/config.model";
|
2020-06-27 19:12:45 +02:00
|
|
|
import AuthProviders from "../../components/User/AuthProviders.vue";
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2019-03-22 13:58:19 +01:00
|
|
|
@Component({
|
|
|
|
apollo: {
|
|
|
|
config: {
|
2019-04-03 17:29:03 +02:00
|
|
|
query: CONFIG,
|
2019-04-01 11:49:54 +02:00
|
|
|
},
|
|
|
|
currentUser: {
|
2019-04-03 17:29:03 +02:00
|
|
|
query: CURRENT_USER_CLIENT,
|
|
|
|
},
|
2019-10-10 16:47:38 +02:00
|
|
|
},
|
2020-06-27 19:12:45 +02:00
|
|
|
components: {
|
|
|
|
AuthProviders,
|
|
|
|
},
|
2019-10-10 16:47:38 +02:00
|
|
|
metaInfo() {
|
|
|
|
return {
|
2020-02-18 08:57:00 +01:00
|
|
|
title: this.$t("Login on Mobilizon!") as string,
|
|
|
|
titleTemplate: "%s | Mobilizon",
|
2021-11-03 09:47:10 +01:00
|
|
|
meta: [{ name: "robots", content: "noindex" }],
|
2019-10-10 16:47:38 +02:00
|
|
|
};
|
2019-04-03 17:29:03 +02:00
|
|
|
},
|
2019-03-22 13:58:19 +01:00
|
|
|
})
|
2019-01-21 15:08:22 +01:00
|
|
|
export default class Login extends Vue {
|
2020-02-18 08:57:00 +01:00
|
|
|
@Prop({ type: String, required: false, default: "" }) email!: string;
|
|
|
|
|
|
|
|
@Prop({ type: String, required: false, default: "" }) password!: string;
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2019-04-01 11:49:54 +02:00
|
|
|
LoginErrorCode = LoginErrorCode;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-10-15 18:13:05 +02:00
|
|
|
LoginError = LoginError;
|
2019-04-01 11:49:54 +02:00
|
|
|
|
|
|
|
errorCode: LoginErrorCode | null = null;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-03-22 13:58:19 +01:00
|
|
|
config!: IConfig;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-04-01 11:49:54 +02:00
|
|
|
currentUser!: ICurrentUser;
|
|
|
|
|
2019-10-03 12:32:20 +02:00
|
|
|
RouteName = RouteName;
|
|
|
|
|
2019-01-21 15:08:22 +01:00
|
|
|
credentials = {
|
2020-02-18 08:57:00 +01:00
|
|
|
email: "",
|
|
|
|
password: "",
|
2019-01-21 15:08:22 +01:00
|
|
|
};
|
2019-04-01 11:49:54 +02:00
|
|
|
|
2019-01-21 15:08:22 +01:00
|
|
|
errors: string[] = [];
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-01-21 15:08:22 +01:00
|
|
|
rules = {
|
|
|
|
required: validateRequiredField,
|
2019-03-22 10:57:14 +01:00
|
|
|
email: validateEmailField,
|
2019-01-21 15:08:22 +01:00
|
|
|
};
|
|
|
|
|
2020-09-29 09:53:48 +02:00
|
|
|
submitted = false;
|
|
|
|
|
|
|
|
mounted(): void {
|
2019-01-21 15:08:22 +01:00
|
|
|
this.credentials.email = this.email;
|
|
|
|
this.credentials.password = this.password;
|
2019-04-01 11:49:54 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
const { query } = this.$route;
|
|
|
|
this.errorCode = query.code as LoginErrorCode;
|
2019-01-21 15:08:22 +01:00
|
|
|
}
|
|
|
|
|
2020-09-29 09:53:48 +02:00
|
|
|
async loginAction(e: Event): Promise<Route | void> {
|
2019-01-21 15:08:22 +01:00
|
|
|
e.preventDefault();
|
2020-09-29 09:53:48 +02:00
|
|
|
if (this.submitted) {
|
|
|
|
return;
|
|
|
|
}
|
2019-04-01 11:49:54 +02:00
|
|
|
|
|
|
|
this.errors = [];
|
2019-01-21 15:08:22 +01:00
|
|
|
|
|
|
|
try {
|
2020-09-29 09:53:48 +02:00
|
|
|
this.submitted = true;
|
2019-09-02 18:52:23 +02:00
|
|
|
const { data } = await this.$apollo.mutate<{ login: ILogin }>({
|
2019-01-21 15:08:22 +01:00
|
|
|
mutation: LOGIN,
|
|
|
|
variables: {
|
|
|
|
email: this.credentials.email,
|
2019-03-22 10:57:14 +01:00
|
|
|
password: this.credentials.password,
|
|
|
|
},
|
2019-01-21 15:08:22 +01:00
|
|
|
});
|
2019-09-02 18:52:23 +02:00
|
|
|
if (data == null) {
|
2020-02-18 08:57:00 +01:00
|
|
|
throw new Error("Data is undefined");
|
2019-09-02 18:52:23 +02:00
|
|
|
}
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2019-09-02 18:52:23 +02:00
|
|
|
saveUserData(data.login);
|
2021-04-16 14:49:43 +02:00
|
|
|
await this.setupClientUserAndActors(data.login);
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2020-11-06 11:34:32 +01:00
|
|
|
if (this.$route.query.redirect) {
|
|
|
|
this.$router.push(this.$route.query.redirect as string);
|
|
|
|
return;
|
2019-04-01 11:49:54 +02:00
|
|
|
}
|
2021-04-16 14:49:43 +02:00
|
|
|
if (window.localStorage) {
|
|
|
|
window.localStorage.setItem("welcome-back", "yes");
|
|
|
|
}
|
2020-10-29 10:24:39 +01:00
|
|
|
this.$router.push({ name: RouteName.HOME });
|
2020-11-06 11:34:32 +01:00
|
|
|
return;
|
2021-09-29 18:20:33 +02:00
|
|
|
} catch (err: any) {
|
2020-09-29 09:53:48 +02:00
|
|
|
this.submitted = false;
|
2021-04-16 14:49:43 +02:00
|
|
|
if (err.graphQLErrors) {
|
|
|
|
err.graphQLErrors.forEach(({ message }: { message: string }) => {
|
|
|
|
this.errors.push(message);
|
|
|
|
});
|
|
|
|
} else if (err.networkError) {
|
|
|
|
this.errors.push(err.networkError.message);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private async setupClientUserAndActors(login: ILogin): Promise<void> {
|
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: UPDATE_CURRENT_USER_CLIENT,
|
|
|
|
variables: {
|
|
|
|
id: login.user.id,
|
|
|
|
email: this.credentials.email,
|
|
|
|
isLoggedIn: true,
|
|
|
|
role: login.user.role,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
try {
|
|
|
|
await initializeCurrentActor(this.$apollo.provider.defaultClient);
|
2021-09-29 18:20:33 +02:00
|
|
|
} catch (err: any) {
|
2021-04-16 14:49:43 +02:00
|
|
|
if (err instanceof NoIdentitiesException) {
|
2021-08-03 15:01:22 +02:00
|
|
|
await this.$router.push({
|
2021-04-16 14:49:43 +02:00
|
|
|
name: RouteName.REGISTER_PROFILE,
|
|
|
|
params: {
|
|
|
|
email: this.currentUser.email,
|
|
|
|
userAlreadyActivated: "true",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2019-01-21 15:08:22 +01:00
|
|
|
}
|
|
|
|
}
|
2021-08-09 08:59:46 +02:00
|
|
|
|
|
|
|
@Watch("currentUser")
|
|
|
|
redirectToHomepageIfAlreadyLoggedIn(): Promise<Route> | void {
|
|
|
|
if (this.currentUser.isLoggedIn) {
|
|
|
|
return this.$router.push("/");
|
|
|
|
}
|
|
|
|
}
|
2019-01-21 15:08:22 +01:00
|
|
|
}
|
|
|
|
</script>
|
2019-10-10 14:20:09 +02:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2020-02-18 08:57:00 +01:00
|
|
|
.container .columns {
|
|
|
|
margin: 1rem auto 3rem;
|
|
|
|
}
|
2019-11-21 16:07:43 +01:00
|
|
|
</style>
|