better authentication feedback, cleanup

7 files changed, 50 insertions, 26 deletions

diff --git a/src/client/apis/GoogleAuthenticationManager.scss b/src/client/apis/GoogleAuthenticationManager.scss
new file mode 100644
index 000000000..5efb3ab3b
--- /dev/null
+++ b/src/client/apis/GoogleAuthenticationManager.scss
@@ -0,0 +1,3 @@
+.paste-target {
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/src/client/apis/AuthenticationManager.tsx b/src/client/apis/GoogleAuthenticationManager.tsx
index d8f6b675b..1ab6380ef 100644
--- a/src/client/apis/AuthenticationManager.tsx
+++ b/src/client/apis/GoogleAuthenticationManager.tsx
@@ -4,17 +4,21 @@ import * as React from "react";
 import MainViewModal from "../views/MainViewModal";
 import { Opt } from "../../new_fields/Doc";
 import { Identified } from "../Network";
+import { RouteStore } from "../../server/RouteStore";
+import "./GoogleAuthenticationManager.scss";
 
 const AuthenticationUrl = "https://accounts.google.com/o/oauth2/v2/auth";
-const prompt = "Please paste the external authetication code here...";
+const prompt = "Paste authorization code here...";
 
 @observer
-export default class AuthenticationManager extends React.Component<{}> {
-    public static Instance: AuthenticationManager;
+export default class GoogleAuthenticationManager extends React.Component<{}> {
+    public static Instance: GoogleAuthenticationManager;
     @observable private openState = false;
     private authenticationLink: Opt<string> = undefined;
     @observable private authenticationCode: Opt<string> = undefined;
     @observable private clickedState = false;
+    @observable private success: Opt<boolean> = undefined;
+    @observable private displayLauncher = true;
 
     private set isOpen(value: boolean) {
         runInAction(() => this.openState = value);
@@ -24,8 +28,8 @@ export default class AuthenticationManager extends React.Component<{}> {
         runInAction(() => this.clickedState = value);
     }
 
-    public executeFullRoutine = async (service: string) => {
-        let response = await Identified.FetchFromServer(`/read${service}AccessToken`);
+    public fetchOrGenerateAccessToken = async () => {
+        let response = await Identified.FetchFromServer(RouteStore.readGoogleAccessToken);
         // if this is an authentication url, activate the UI to register the new access token
         if (new RegExp(AuthenticationUrl).test(response)) {
             this.isOpen = true;
@@ -35,12 +39,26 @@ export default class AuthenticationManager extends React.Component<{}> {
                     () => this.authenticationCode,
                     authenticationCode => {
                         if (authenticationCode) {
-                            Identified.PostToServer(`/write${service}AccessToken`, { authenticationCode }).then(token => {
-                                this.isOpen = false;
-                                this.hasBeenClicked = false;
-                                resolve(token);
-                                disposer();
-                            });
+                            Identified.PostToServer(RouteStore.writeGoogleAccessToken, { authenticationCode }).then(
+                                token => {
+                                    runInAction(() => this.success = true);
+                                    setTimeout(() => {
+                                        this.isOpen = false;
+                                        runInAction(() => this.displayLauncher = false);
+                                        setTimeout(() => {
+                                            runInAction(() => this.success = undefined);
+                                            runInAction(() => this.displayLauncher = true);
+                                            this.hasBeenClicked = false;
+                                        }, 500);
+                                    }, 1000);
+                                    disposer();
+                                    resolve(token);
+                                },
+                                () => {
+                                    this.hasBeenClicked = false;
+                                    runInAction(() => this.success = false);
+                                }
+                            );
                         }
                     }
                 );
@@ -52,12 +70,12 @@ export default class AuthenticationManager extends React.Component<{}> {
 
     constructor(props: {}) {
         super(props);
-        AuthenticationManager.Instance = this;
+        GoogleAuthenticationManager.Instance = this;
     }
 
     private handleClick = () => {
         window.open(this.authenticationLink);
-        this.hasBeenClicked = true;
+        setTimeout(() => this.hasBeenClicked = true, 500);
     }
 
     private handlePaste = action((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,8 +85,12 @@ export default class AuthenticationManager extends React.Component<{}> {
     private get renderPrompt() {
         return (
             <div style={{ display: "flex", flexDirection: "column" }}>
-                <button onClick={this.handleClick}>Please click here to authorize a Google account...</button>
+                {this.displayLauncher ? <button
+                    className={"dispatch"}
+                    onClick={this.handleClick}
+                >Authorize a Google account...</button> : (null)}
                 {this.clickedState ? <input
+                    className={'paste-target'}
                     onChange={this.handlePaste}
                     placeholder={prompt}
                     style={{ marginTop: 15 }}
@@ -83,6 +105,8 @@ export default class AuthenticationManager extends React.Component<{}> {
                 isDisplayed={this.openState}
                 interactive={true}
                 contents={this.renderPrompt}
+                overlayDisplayedOpacity={0.9}
+                dialogueBoxStyle={{ borderColor: this.success === undefined ? "black" : this.success ? "green" : "red" }}
             />
         );
     }
diff --git a/src/client/apis/google_docs/GooglePhotosClientUtils.ts b/src/client/apis/google_docs/GooglePhotosClientUtils.ts
index 8e88040db..e93fa6eb4 100644
--- a/src/client/apis/google_docs/GooglePhotosClientUtils.ts
+++ b/src/client/apis/google_docs/GooglePhotosClientUtils.ts
@@ -14,14 +14,11 @@ import { NewMediaItemResult, MediaItem } from "../../../server/apis/google/Share
 import { AssertionError } from "assert";
 import { DocumentView } from "../../views/nodes/DocumentView";
 import { Identified } from "../../Network";
-import AuthenticationManager from "../AuthenticationManager";
-import { List } from "../../../new_fields/List";
+import GoogleAuthenticationManager from "../GoogleAuthenticationManager";
 
 export namespace GooglePhotos {
 
-    const endpoint = async () => {
-        return new Photos(await AuthenticationManager.Instance.executeFullRoutine("GooglePhotos"));
-    };
+    const endpoint = async () => new Photos(await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken());
 
     export enum MediaType {
         ALL_MEDIA = 'ALL_MEDIA',
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 91c8c572d..1541cd6b2 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -218,7 +218,7 @@ export default class SharingManager extends React.Component<{}> {
         if (!metadata) {
             return SharingPermissions.None;
         }
-        return StrCast(metadata.permissions, SharingPermissions.None)!;
+        return StrCast(metadata.permissions, SharingPermissions.None);
     }
 
     private get sharingInterface() {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 12578e5b8..ba4224875 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,7 +39,7 @@ import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { FilterBox } from './search/FilterBox';
 import { OverlayView } from './OverlayView';
-import AuthenticationManager from '../apis/AuthenticationManager';
+import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
 
 @observer
 export class MainView extends React.Component {
@@ -678,7 +678,7 @@ export class MainView extends React.Component {
             <div id="main-div">
                 {this.dictationOverlay}
                 <SharingManager />
-                <AuthenticationManager />
+                <GoogleAuthenticationManager />
                 <DocumentDecorations />
                 {this.mainContent}
                 <PreviewCursor />
diff --git a/src/server/RouteStore.ts b/src/server/RouteStore.ts
index 23fdbc53d..391d9dc0c 100644
--- a/src/server/RouteStore.ts
+++ b/src/server/RouteStore.ts
@@ -32,8 +32,8 @@ export enum RouteStore {
     // APIS
     cognitiveServices = "/cognitiveservices",
     googleDocs = "/googleDocs",
-    readGooglePhotosAccessToken = "/readGooglePhotosAccessToken",
-    writeGooglePhotosAccessToken = "/writeGooglePhotosAccessToken",
+    readGoogleAccessToken = "/readGoogleAccessToken",
+    writeGoogleAccessToken = "/writeGoogleAccessToken",
     googlePhotosMediaUpload = "/googlePhotosMediaUpload",
     googlePhotosMediaDownload = "/googlePhotosMediaDownload",
     googleDocsGet = "/googleDocsGet"
diff --git a/src/server/index.ts b/src/server/index.ts
index 5da05d9a7..dd44a0ce8 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -862,7 +862,7 @@ app.post(RouteStore.googleDocs + "/:sector/:action", (req, res) => {
     });
 });
 
-app.get(RouteStore.readGooglePhotosAccessToken, async (req, res) => {
+app.get(RouteStore.readGoogleAccessToken, async (req, res) => {
     const userId = req.header("userId")!;
     const token = await Database.Auxiliary.GoogleAuthenticationToken.Fetch(userId);
     const information = { credentialsPath, userId };
@@ -872,7 +872,7 @@ app.get(RouteStore.readGooglePhotosAccessToken, async (req, res) => {
     GoogleApiServerUtils.RetrieveAccessToken(information).then(token => res.send(token));
 });
 
-app.post(RouteStore.writeGooglePhotosAccessToken, async (req, res) => {
+app.post(RouteStore.writeGoogleAccessToken, async (req, res) => {
     const userId = req.header("userId")!;
     const information = { credentialsPath, userId };
     const { token } = await GoogleApiServerUtils.ProcessClientSideCode(information, req.body.authenticationCode);