Unauthorized page is no longer blank (#528)

Co-authored-by: Ramaiah <[email protected]>

Author: ReshmaRamaiah10

.gitignore

@@ -166,3 +166,4 @@ Desktop.ini
 /src/test/javascript/screenshots/diff
 # Sentry Config File
 .env.sentry-build-plugin
+.vscode/settings.json

README.md

@@ -7,7 +7,7 @@
 
    1. [Docker](https://www.docker.com/get-started).
    2. [mysql 8](https://dev.mysql.com/doc/mysql-installation-excerpt/8.0/en/).
-   3. [Java 11](https://dev.java/download/) SDK.
+   3. [Java 17](https://dev.java/download/) SDK.
    4. [Node.js](https://nodejs.org): We use Node to run a development web server
       and build the project. Depending on your system, you can install Node either
       from source or as a pre-packaged bundle. The version of node we are using can
@@ -24,7 +24,13 @@
 
    5. [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
 
-2. After installing Node and yarn, you should be able to run the following command
+2. Run the brew command for the Mac in the [compiling section](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling) of the node-canvas readme. For other systems, please see [compiling section](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling) for instructions.
+
+```sh
+brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
+```
+
+3. After installing Node and yarn, you should be able to run the following command
    to install development tools. You will only need to run this command when
    dependencies change in [package.json](package.json).
 
@@ -34,7 +40,7 @@
 
    We use yarn scripts and [Webpack](https://webpack.js.org/) as our build system.
 
-3. If you are using redis as a cache, you will have to launch a cache server.
+4. If you are using redis as a cache, you will have to launch a cache server (Optional).
 
    - To start your cache server, run:
 
@@ -53,7 +59,7 @@
    See [here](https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-caching.html#boot-features-caching-provider-none)
    for details.
 
-4. Configure Keycloak and Google SSO
+5. Configure Keycloak and Google SSO
 
    To log in to your app, you'll need to have [Keycloak](https://keycloak.org)
    up and running.
@@ -114,7 +120,7 @@
                   scope: openid,profile,email
       ```
 
-5. Configure Firebase
+6. Configure Firebase
 
    1. Go to [Firebase Console](https://console.firebase.google.com/) and create
       a new project
@@ -155,7 +161,7 @@
    17. Expand **Build** and click **Authentication**
    18. Click the **Sign-in method** section and add email/password provider
 
-6. Verify that your mysql configuration in [application-dev.yaml](src/main/resources/config/application-dev.yml)
+7. Verify that your mysql configuration in [application-dev.yaml](src/main/resources/config/application-dev.yml)
    is correct for you mysql server instance.
 
    ```yaml
@@ -166,7 +172,7 @@
        password: root
    ```
 
-7. Run the application (Don't login just yet)
+8. Run the application (Don't login just yet)
 
    - Note your a oncokb_curation schema will be created in your mysql database.
      Data will also be seeded for it.
@@ -175,40 +181,40 @@
    ./mvnw
    ```
 
-8. Wait until the server is listening to requests and is able to redirect you to
+9. Wait until the server is listening to requests and is able to redirect you to
    the login screen. (server url defaults to `http://localhost:9090`)
 
-9. Add a login for yourself into your mysql instance. Replace <your_email>
-   with your gmail email address.
-
-   ```sql
-   INSERT INTO `oncokb_curation`.`user`
-   (
-       `login`,
-       `email`,
-       `created_by`,
-       `activated`)
-   VALUES
-       ('<your_email>',
-        '<your_email>',
-        'SYSTEM',
-        1);
-
-   SET @UserID = (SELECT Id
-       FROM `oncokb_curation`.`user`
-       WHERE email = '<your_email>');
-
-   INSERT INTO `oncokb_curation`.`user_authority`
-       (user_id, authority_name)
-       VALUES
-       (@UserId, 'ROLE_ADMIN'),
-       (@UserId, 'ROLE_DEV'),
-       (@UserId, 'ROLE_CURATOR'),
-       (@UserId, 'ROLE_USER');
+10. Add a login for yourself into your mysql instance. Replace <your_email>
+    with your gmail email address.
+
+```sql
+INSERT INTO `oncokb_curation`.`user`
+(
+    `login`,
+    `email`,
+    `created_by`,
+    `activated`)
+VALUES
+    ('<your_email>',
+     '<your_email>',
+     'SYSTEM',
+     1);
+
+SET @UserID = (SELECT Id
+    FROM `oncokb_curation`.`user`
+    WHERE email = '<your_email>');
+
+INSERT INTO `oncokb_curation`.`user_authority`
+    (user_id, authority_name)
+    VALUES
+    (@UserId, 'ROLE_ADMIN'),
+    (@UserId, 'ROLE_DEV'),
+    (@UserId, 'ROLE_CURATOR'),
+    (@UserId, 'ROLE_USER');
 
-   ```
+```
 
-10. Login to curation!
+11. Login to curation!
 
 ## Building for production
 

src/main/webapp/app/pages/login/logout.tsx

@@ -48,7 +48,15 @@ export const Logout = (props: ILogoutProps) => {
   }
 
   if (unauthorizedAccess) {
-    return <></>;
+    return (
+      <>
+        <h2>Your account is not authorized to access this application.</h2>
+        <p>Please log in with an authorized google account or contact support for access.</p>
+        <Link to={PAGE_ROUTE.OAUTH} className="login-link">
+          ← Go back to Login
+        </Link>
+      </>
+    );
   }
 
   const unauthorizedAccessContent = (

src/main/webapp/app/stores/authentication.store.ts

@@ -4,6 +4,7 @@ import BaseStore from 'app/shared/util/base-store';
 import { IRootStore } from 'app/stores/createStore';
 import { OncoKBError } from 'app/oncokb-commons/components/alert/ErrorAlertUtils';
 import { defaultValue as USER_DEFAULT_VALUE, IUser } from 'app/shared/model/user.model';
+import { notifyError } from 'app/oncokb-commons/components/util/NotificationUtils';
 
 export const AUTH_TOKEN_KEY = 'jhi-authenticationToken';
 
@@ -120,7 +121,7 @@ export class AuthStore extends BaseStore {
       this.loginError = e as Error;
       this.loading = false;
       if (!axios.isAxiosError(e) || (e as AxiosError).response?.status !== 401) {
-        throw e;
+        notifyError(e, 'Network error while authenticating');
       }
     }
   }