From 0eddf9619f2a3f7dd5f84eb8f6b1fc0da27d723f Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Mon, 12 Aug 2019 15:03:09 -0600
Subject: [PATCH] Center sign in popovers over the browser window so they are
 easily visible (#2457)

* Center sign in popovers in the browser window so they are always visible

* Set popover window feature by default using interfaced parameters

* Update snapshots to account for feature parameters on popup windows

* Lowercase the bar in menubar for Popup so it matches window api

* fix: externalized feature reconciliation
---
 .../common/UserBox/UserBoxContainer.tsx       |  1 -
 .../UserBoxContainer.spec.tsx.snap            |  3 --
 .../Settings/ChangePasswordContainer.tsx      |  1 -
 src/core/client/ui/components/Popup/Popup.ts  | 52 +++++++++++++++++--
 4 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/core/client/stream/common/UserBox/UserBoxContainer.tsx b/src/core/client/stream/common/UserBox/UserBoxContainer.tsx
index 33c3c7620..b90716408 100644
--- a/src/core/client/stream/common/UserBox/UserBoxContainer.tsx
+++ b/src/core/client/stream/common/UserBox/UserBoxContainer.tsx
@@ -127,7 +127,6 @@ export class UserBoxContainer extends Component<Props> {
         <Popup
           href={this.authUrl}
           title="Coral Auth"
-          features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
diff --git a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxContainer.spec.tsx.snap
index 7c03e129a..0da3cdc34 100644
--- a/src/core/client/stream/common/UserBox/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/common/UserBox/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders fully 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -27,7 +26,6 @@ exports[`renders sso only without logout button 1`] = `null`;
 exports[`renders without logout button 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -47,7 +45,6 @@ exports[`renders without logout button 1`] = `
 exports[`renders without register button 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangePasswordContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangePasswordContainer.tsx
index c9bd6f93b..6cf9814f4 100644
--- a/src/core/client/stream/tabs/Profile/Settings/ChangePasswordContainer.tsx
+++ b/src/core/client/stream/tabs/Profile/Settings/ChangePasswordContainer.tsx
@@ -53,7 +53,6 @@ const ChangePasswordContainer: FunctionComponent<Props> = ({
       <Popup
         href={`${urls.embed.auth}?view=${view}`}
         title="Coral Auth"
-        features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
         open={open}
         focus={focus}
         onFocus={onFocus}
diff --git a/src/core/client/ui/components/Popup/Popup.ts b/src/core/client/ui/components/Popup/Popup.ts
index 2a48e44d3..fb395cf8f 100644
--- a/src/core/client/ui/components/Popup/Popup.ts
+++ b/src/core/client/ui/components/Popup/Popup.ts
@@ -1,5 +1,13 @@
 import { Component } from "react";
 
+interface WindowFeatures {
+  resizable: number;
+  menubar: number;
+  width: number;
+  height: number;
+  centered: boolean;
+}
+
 interface PopupProps {
   open?: boolean;
   focus?: boolean;
@@ -9,10 +17,35 @@ interface PopupProps {
   onUnload?: (e: Event) => void;
   onClose?: () => void;
   href: string;
-  features?: string;
+  features?: Partial<WindowFeatures>;
   title?: string;
 }
 
+function reconcileFeatures({ centered, ...options }: WindowFeatures): string {
+  const features: Record<string, any> = {
+    ...options,
+    left: 0,
+    top: 0,
+  };
+  if (centered) {
+    const winLeft =
+      window.screenLeft !== undefined ? window.screenLeft : window.screenX;
+    const winTop =
+      window.screenTop !== undefined ? window.screenTop : window.screenY;
+
+    // If we're centered, then apply the features left/right flags.
+    features.left = winLeft + window.outerWidth / 2 - options.width / 2;
+    features.top = winTop + 100;
+  }
+
+  return Object.keys(features)
+    .reduce(
+      (acc, key) => acc.concat([`${key}=${features[key]}`]),
+      [] as string[]
+    )
+    .join(",");
+}
+
 export default class Popup extends Component<PopupProps> {
   private ref: Window | null = null;
   private detectCloseInterval: any = null;
@@ -26,8 +59,21 @@ export default class Popup extends Component<PopupProps> {
     }
   }
 
-  private openWindow(props = this.props) {
-    this.ref = window.open(props.href, props.title, props.features);
+  public static defaultFeatures: WindowFeatures = {
+    resizable: 0,
+    menubar: 0,
+    width: 350,
+    height: 450,
+    centered: true,
+  };
+
+  private openWindow({ features = {}, href, title } = this.props) {
+    const opts: WindowFeatures = {
+      ...Popup.defaultFeatures,
+      ...features,
+    };
+
+    this.ref = window.open(href, title, reconcileFeatures(opts));
 
     this.attemptSetCallbacks();