parse google user data and use it to provide customized feedback on login

2 files changed, 41 insertions, 8 deletions

diff --git a/src/client/apis/GoogleAuthenticationManager.scss b/src/client/apis/GoogleAuthenticationManager.scss
index 5efb3ab3b..13bde822d 100644
--- a/src/client/apis/GoogleAuthenticationManager.scss
+++ b/src/client/apis/GoogleAuthenticationManager.scss
@@ -1,3 +1,19 @@
-.paste-target {
-    padding: 5px;
+.authorize-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .paste-target {
+        padding: 5px;
+        width: 100%;
+    }
+
+    .avatar {
+        border-radius: 50%;
+    }
+
+    .welcome {
+        font-style: italic;
+        margin-top: 15px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/apis/GoogleAuthenticationManager.tsx b/src/client/apis/GoogleAuthenticationManager.tsx
index d143d8273..01dac3996 100644
--- a/src/client/apis/GoogleAuthenticationManager.tsx
+++ b/src/client/apis/GoogleAuthenticationManager.tsx
@@ -19,6 +19,8 @@ export default class GoogleAuthenticationManager extends React.Component<{}> {
     @observable private clickedState = false;
     @observable private success: Opt<boolean> = undefined;
     @observable private displayLauncher = true;
+    @observable private avatar: Opt<string> = undefined;
+    @observable private username: Opt<string> = undefined;
 
     private set isOpen(value: boolean) {
         runInAction(() => this.openState = value);
@@ -40,10 +42,14 @@ export default class GoogleAuthenticationManager extends React.Component<{}> {
                     authenticationCode => {
                         if (authenticationCode) {
                             Identified.PostToServer(RouteStore.writeGoogleAccessToken, { authenticationCode }).then(
-                                token => {
+                                ({ access_token, avatar, name }) => {
+                                    runInAction(() => {
+                                        this.avatar = avatar;
+                                        this.username = name;
+                                    });
                                     this.beginFadeout();
                                     disposer();
-                                    resolve(token);
+                                    resolve(access_token);
                                 },
                                 action(() => {
                                     this.hasBeenClicked = false;
@@ -61,15 +67,18 @@ export default class GoogleAuthenticationManager extends React.Component<{}> {
 
     beginFadeout = action(() => {
         this.success = true;
+        this.authenticationCode = undefined;
+        this.displayLauncher = false;
+        this.hasBeenClicked = false;
         setTimeout(action(() => {
             this.isOpen = false;
-            this.displayLauncher = false;
             setTimeout(action(() => {
                 this.success = undefined;
                 this.displayLauncher = true;
-                this.hasBeenClicked = false;
+                this.avatar = undefined;
+                this.username = undefined;
             }), 500);
-        }), 2000);
+        }), 3000);
     });
 
     constructor(props: {}) {
@@ -88,7 +97,7 @@ export default class GoogleAuthenticationManager extends React.Component<{}> {
 
     private get renderPrompt() {
         return (
-            <div style={{ display: "flex", flexDirection: "column" }}>
+            <div className={'authorize-container'}>
                 {this.displayLauncher ? <button
                     className={"dispatch"}
                     onClick={this.handleClick}
@@ -99,6 +108,14 @@ export default class GoogleAuthenticationManager extends React.Component<{}> {
                     onChange={this.handlePaste}
                     placeholder={prompt}
                 /> : (null)}
+                {this.avatar ? <img
+                    className={'avatar'}
+                    src={this.avatar}
+                /> : (null)}
+                {this.username ? <span
+                    className={'welcome'}
+                >Welcome to Dash, {this.username}
+                </span> : (null)}
             </div>
         );
     }