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 {