Add feedback for disabled/unauthorized users (#970)

swisstopo · Jan 19, 2024 · 94c1b3c · 94c1b3c
2 parents 6836920 + 8d2d762
commit 94c1b3c
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 13 deletions.
diff --git a/src/client/public/locale/common.json b/src/client/public/locale/common.json
@@ -351,6 +351,7 @@
   "user": "",
   "username": "",
   "usersMap": "",
+  "userUnauthorized": "",
   "validationErrorHeader": "",
   "version": "",
   "viewas": "",

diff --git a/src/client/public/locale/de/common.json b/src/client/public/locale/de/common.json
@@ -375,6 +375,7 @@
   "user": "Benutzer",
   "username": "Benutzername",
   "usersMap": "Karten für Benutzer",
+  "userUnauthorized": "Sie verfügen nicht über ausreichende Rechte, um die Applikation zu benutzen. Bitte melden Sie sich beim Administrator.",
   "validationErrorHeader": "Validierungsfehler",
   "version": "Version",
   "viewas": "Ansicht als",

diff --git a/src/client/public/locale/en/common.json b/src/client/public/locale/en/common.json
@@ -375,6 +375,7 @@
   "user": "User",
   "username": "Username",
   "usersMap": "Maps for users",
+  "userUnauthorized": "You do not have sufficient privileges to use the application. Please contact the administrator.",
   "validationErrorHeader": "Validation errors",
   "version": "Version",
   "viewas": "View as",

diff --git a/src/client/public/locale/fr/common.json b/src/client/public/locale/fr/common.json
@@ -375,6 +375,7 @@
   "user": "Utilisateur",
   "username": "Nom d'utilisateur",
   "usersMap": "Cartes pour les utilisateurs",
+  "userUnauthorized": "Vous n'avez pas les privilèges suffisants pour utiliser l'application. Veuillez contacter l'administrateur.",
   "validationErrorHeader": "Erreurs de validation",
   "version": "Version",
   "viewas": "Aperçu en tant que",

diff --git a/src/client/public/locale/it/common.json b/src/client/public/locale/it/common.json
@@ -375,6 +375,7 @@
   "user": "Utente",
   "username": "Nome utente",
   "usersMap": "Mappe dell'utente",
+  "userUnauthorized": "Non si dispone dei privilegi sufficienti per utilizzare l'applicazione. Si prega di contattare l'amministratore.",
   "validationErrorHeader": "Errori di convalida",
   "version": "Versione",
   "viewas": "Visualizza come",

diff --git a/src/client/src/api-lib/reducers/index.js b/src/client/src/api-lib/reducers/index.js
@@ -63,6 +63,7 @@ export function user() {
       case "GET_CONNECTION_ERROR": {
         let copy = {
           ...state,
+          error: action.error.response.status === 401 ? true : state.error,
           fcnt: state.fcnt + 1,
           isFetching: false,
           rtime: new Date().getTime() - state.rtime,

diff --git a/src/client/src/pages/settings/dataLoader.js b/src/client/src/pages/settings/dataLoader.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { withTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import Markdown from "markdown-to-jsx";
 import TranslationKeys from "../../commons/translationKeys";
 
 import { Button } from "semantic-ui-react";
+import Alert from "@mui/material/Alert";
 
 import {
   loadDomains,
@@ -60,10 +61,14 @@ class DataLoader extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
     const isLoading =
       !this.props.auth ||
       this.props.auth.isLoading ||
       this.props.user?.authentication;
+
+    const authorizationFailed =
+      this.props.user?.authentication && this.props.user.error;
     return (
       <div
         style={{
@@ -151,38 +156,53 @@ class DataLoader extends React.Component {
                 }}>
                 Sign in
               </div>
-              {isLoading ? (
+              {!(isLoading || authorizationFailed) ? (
                 <Button
-                  disabled
-                  color={"green"}
                   compact
-                  loading
+                  primary
                   content="Login"
                   fluid
+                  onClick={() => {
+                    this.props.auth.signinRedirect();
+                  }}
                   size="small"
                   style={{
                     marginTop: "1.5em",
                   }}
+                  data-cy="login-button"
                 />
-              ) : (
+              ) : null}
+              {isLoading && !authorizationFailed ? (
                 <Button
+                  disabled
+                  color={"green"}
                   compact
-                  primary
+                  loading
                   content="Login"
                   fluid
-                  onClick={() => {
-                    this.props.auth.signinRedirect();
-                  }}
                   size="small"
                   style={{
                     marginTop: "1.5em",
                   }}
-                  data-cy="login-button"
                 />
-              )}
+              ) : null}
+              {authorizationFailed ? (
+                <>
+                  <Alert severity="error">{t("userUnauthorized")}</Alert>
+                  <Button
+                    compact
+                    fluid
+                    color="red"
+                    content="Logout"
+                    onClick={() => this.props.auth.signoutRedirect()}
+                    style={{
+                      marginTop: "1em",
+                    }}
+                  />
+                </>
+              ) : null}
             </div>
           </div>
-
           <div
             style={{
               display: "flex",