Introduce support for 3rd-party auth (OAuth2 & LDAP)

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

js/src/views/User/Login.vue

@@ -10,6 +10,26 @@
           :aria-close-label="$t('Close')"
           >{{ $t("You need to login.") }}</b-message
         >
+        <b-message
+          v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
+          type="is-danger"
+          :aria-close-label="$t('Close')"
+          >{{
+            $t("Error while login with {provider}. Retry or login another way.", {
+              provider: $route.query.provider,
+            })
+          }}</b-message
+        >
+        <b-message
+          v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
+          type="is-danger"
+          :aria-close-label="$t('Close')"
+          >{{
+            $t("Error while login with {provider}. This login provider doesn't exist.", {
+              provider: $route.query.provider,
+            })
+          }}</b-message
+        >
         <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
           <span v-if="error === LoginError.USER_NOT_CONFIRMED">
             <span>
@@ -60,6 +80,11 @@
           <p class="control has-text-centered">
             <button class="button is-primary is-large">{{ $t("Login") }}</button>
           </p>
+
+          <div class="control" v-if="config && config.auth.oauthProviders.length > 0">
+            <auth-providers :oauthProviders="config.auth.oauthProviders" />
+          </div>
+
           <p class="control">
             <router-link
               class="button is-text"
@@ -103,6 +128,7 @@ import { LoginErrorCode, LoginError } from "../../types/login-error-code.model";
 import { ICurrentUser } from "../../types/current-user.model";
 import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
+import AuthProviders from "../../components/User/AuthProviders.vue";
 
 @Component({
   apollo: {
@@ -113,6 +139,9 @@ import { IConfig } from "../../types/config.model";
       query: CURRENT_USER_CLIENT,
     },
   },
+  components: {
+    AuthProviders,
+  },
   metaInfo() {
     return {
       // if no subcomponents specify a metaInfo.title, this title will be used

js/src/views/User/ProviderValidation.vue

@@ -0,0 +1,64 @@
+<template> </template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT, LOGGED_USER } from "../../graphql/user";
+import RouteName from "../../router/name";
+import { saveUserData, changeIdentity } from "../../utils/auth";
+import { ILogin } from "../../types/login.model";
+import { ICurrentUserRole, ICurrentUser, IUser } from "../../types/current-user.model";
+import { IDENTITIES } from "../../graphql/actor";
+
+@Component
+export default class ProviderValidate extends Vue {
+  async mounted() {
+    const accessToken = this.getValueFromMeta("auth-access-token");
+    const refreshToken = this.getValueFromMeta("auth-refresh-token");
+    const userId = this.getValueFromMeta("auth-user-id");
+    const userEmail = this.getValueFromMeta("auth-user-email");
+    const userRole = this.getValueFromMeta("auth-user-role") as ICurrentUserRole;
+    const userActorId = this.getValueFromMeta("auth-user-actor-id");
+
+    if (!(userId && userEmail && userRole && accessToken && refreshToken)) {
+      return this.$router.push("/");
+    }
+    const login = {
+      user: { id: userId, email: userEmail, role: userRole, isLoggedIn: true },
+      accessToken,
+      refreshToken,
+    };
+    saveUserData(login);
+    await this.$apollo.mutate({
+      mutation: UPDATE_CURRENT_USER_CLIENT,
+      variables: {
+        id: userId,
+        email: userEmail,
+        isLoggedIn: true,
+        role: ICurrentUserRole.USER,
+      },
+    });
+    const { data } = await this.$apollo.query<{ loggedUser: IUser }>({
+      query: LOGGED_USER,
+    });
+    const { loggedUser } = data;
+
+    if (loggedUser.defaultActor) {
+      await changeIdentity(this.$apollo.provider.defaultClient, loggedUser.defaultActor);
+      await this.$router.push({ name: RouteName.HOME });
+    } else {
+      // If the user didn't register any profile yet, let's create one for them
+      await this.$router.push({
+        name: RouteName.REGISTER_PROFILE,
+        params: { email: loggedUser.email, userAlreadyActivated: "true" },
+      });
+    }
+  }
+
+  getValueFromMeta(name: string) {
+    const element = document.querySelector(`meta[name="${name}"]`);
+    if (element && element.getAttribute("content")) {
+      return element.getAttribute("content");
+    }
+    return null;
+  }
+}
+</script>

js/src/views/User/Register.vue

@@ -96,6 +96,7 @@
                 {{ $t("Register") }}
               </b-button>
             </p>
+
             <p class="control">
               <router-link
                 class="button is-text"
@@ -113,6 +114,11 @@
                 >{{ $t("Login") }}</router-link
               >
             </p>
+
+            <hr />
+            <div class="control" v-if="config && config.auth.oauthProviders.length > 0">
+              <auth-providers :oauthProviders="config.auth.oauthProviders" />
+            </div>
           </form>
 
           <div v-if="errors.length > 0">
@@ -131,9 +137,10 @@ import RouteName from "../../router/name";
 import { IConfig } from "../../types/config.model";
 import { CONFIG } from "../../graphql/config";
 import Subtitle from "../../components/Utils/Subtitle.vue";
+import AuthProviders from "../../components/User/AuthProviders.vue";
 
 @Component({
-  components: { Subtitle },
+  components: { Subtitle, AuthProviders },
   metaInfo() {
     return {
       // if no subcomponents specify a metaInfo.title, this title will be used

js/src/views/User/Validate.vue

@@ -18,7 +18,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { saveUserData, changeIdentity } from "../../utils/auth";
+import { saveUserData, saveTokenData, changeIdentity } from "../../utils/auth";
 import { ILogin } from "../../types/login.model";
 import { ICurrentUserRole } from "../../types/current-user.model";
 
@@ -45,6 +45,7 @@ export default class Validate extends Vue {
 
       if (data) {
         saveUserData(data.validateUser);
+        saveTokenData(data.validateUser);
 
         const { user } = data.validateUser;