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

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

js/src/views/Settings/AccountSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="loggedUser">
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
@@ -24,6 +24,13 @@
       >
         <b slot="email">{{ loggedUser.email }}</b>
       </i18n>
+      <b-message v-if="!canChangeEmail" type="is-warning" :closable="false">
+        {{
+          $t("Your email address was automatically set based on your {provider} account.", {
+            provider: providerName(loggedUser.provider),
+          })
+        }}
+      </b-message>
       <b-notification
         type="is-danger"
         has-icon
@@ -33,7 +40,7 @@
         v-for="error in changeEmailErrors"
         >{{ error }}</b-notification
       >
-      <form @submit.prevent="resetEmailAction" ref="emailForm" class="form">
+      <form @submit.prevent="resetEmailAction" ref="emailForm" class="form" v-if="canChangeEmail">
         <b-field :label="$t('New email')">
           <b-input aria-required="true" required type="email" v-model="newEmail" />
         </b-field>
@@ -58,6 +65,13 @@
       <div class="setting-title">
         <h2>{{ $t("Password") }}</h2>
       </div>
+      <b-message v-if="!canChangePassword" type="is-warning" :closable="false">
+        {{
+          $t("You can't change your password because you are registered through {provider}.", {
+            provider: providerName(loggedUser.provider),
+          })
+        }}
+      </b-message>
       <b-notification
         type="is-danger"
         has-icon
@@ -67,7 +81,12 @@
         v-for="error in changePasswordErrors"
         >{{ error }}</b-notification
       >
-      <form @submit.prevent="resetPasswordAction" ref="passwordForm" class="form">
+      <form
+        @submit.prevent="resetPasswordAction"
+        ref="passwordForm"
+        class="form"
+        v-if="canChangePassword"
+      >
         <b-field :label="$t('Old password')">
           <b-input
             aria-required="true"
@@ -124,11 +143,11 @@
                     <br />
                     <b>{{ $t("There will be no way to recover your data.") }}</b>
                   </p>
-                  <p class="content">
+                  <p class="content" v-if="hasUserGotAPassword">
                     {{ $t("Please enter your password to confirm this action.") }}
                   </p>
                   <form @submit.prevent="deleteAccount">
-                    <b-field>
+                    <b-field v-if="hasUserGotAPassword">
                       <b-input
                         type="password"
                         v-model="passwordForAccountDeletion"
@@ -160,8 +179,8 @@
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { ICurrentUser } from "../../types/current-user.model";
-import { logout } from "../../utils/auth";
+import { IUser, IAuthProvider } from "../../types/current-user.model";
+import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
 
 @Component({
   apollo: {
@@ -171,7 +190,7 @@ import { logout } from "../../utils/auth";
 export default class AccountSettings extends Vue {
   @Ref("passwordForm") readonly passwordForm!: HTMLElement;
 
-  loggedUser!: ICurrentUser;
+  loggedUser!: IUser;
 
   passwordForEmailChange = "";
 
@@ -243,7 +262,7 @@ export default class AccountSettings extends Vue {
       await this.$apollo.mutate({
         mutation: DELETE_ACCOUNT,
         variables: {
-          password: this.passwordForAccountDeletion,
+          password: this.hasUserGotAPassword ? this.passwordForAccountDeletion : null,
         },
       });
       await logout(this.$apollo.provider.defaultClient);
@@ -260,6 +279,28 @@ export default class AccountSettings extends Vue {
     }
   }
 
+  get canChangePassword() {
+    return !this.loggedUser.provider;
+  }
+
+  get canChangeEmail() {
+    return !this.loggedUser.provider;
+  }
+
+  providerName(id: string) {
+    if (SELECTED_PROVIDERS[id]) {
+      return SELECTED_PROVIDERS[id];
+    }
+    return id;
+  }
+
+  get hasUserGotAPassword(): boolean {
+    return (
+      this.loggedUser &&
+      (this.loggedUser.provider == null || this.loggedUser.provider == IAuthProvider.LDAP)
+    );
+  }
+
   private handleErrors(type: string, err: any) {
     console.error(err);
 

js/src/views/Settings/Notifications.vue

@@ -95,10 +95,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import {
-  ICurrentUser,
-  INotificationPendingParticipationEnum,
-} from "../../types/current-user.model";
+import { IUser, INotificationPendingParticipationEnum } from "../../types/current-user.model";
 import RouteName from "../../router/name";
 
 @Component({
@@ -107,7 +104,7 @@ import RouteName from "../../router/name";
   },
 })
 export default class Notifications extends Vue {
-  loggedUser!: ICurrentUser;
+  loggedUser!: IUser;
 
   notificationOnDay = true;
 

js/src/views/Settings/Preferences.vue

@@ -52,7 +52,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import { TIMEZONES } from "../../graphql/config";
 import { USER_SETTINGS, SET_USER_SETTINGS, UPDATE_USER_LOCALE } from "../../graphql/user";
 import { IConfig } from "../../types/config.model";
-import { ICurrentUser } from "../../types/current-user.model";
+import { IUser } from "../../types/current-user.model";
 import langs from "../../i18n/langs.json";
 import RouteName from "../../router/name";
 
@@ -65,7 +65,7 @@ import RouteName from "../../router/name";
 export default class Preferences extends Vue {
   config!: IConfig;
 
-  loggedUser!: ICurrentUser;
+  loggedUser!: IUser;
 
   selectedTimezone: string | null = null;
 
@@ -74,7 +74,7 @@ export default class Preferences extends Vue {
   RouteName = RouteName;
 
   @Watch("loggedUser")
-  setSavedTimezone(loggedUser: ICurrentUser) {
+  setSavedTimezone(loggedUser: IUser) {
     if (loggedUser && loggedUser.settings.timezone) {
       this.selectedTimezone = loggedUser.settings.timezone;
     } else {

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;