automatically add protocol to Server URL (#2083) (#2106)

* automatically add protocol to Server URL (#2083)

* refactor NewTeamModal to only detect protocol on save

* use window.postMessage for intercom + only ping on form save

src/common/communication.ts

@@ -120,3 +120,5 @@ export const DESKTOP_SOURCES_RESULT = 'desktop-sources-result';
 
 export const RELOAD_CURRENT_VIEW = 'reload-current-view';
 
+export const PING_DOMAIN = 'ping-domain';
+export const PING_DOMAIN_RESPONSE = 'ping-domain-response';

src/common/utils/requests.ts

@@ -0,0 +1,17 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as http from 'http';
+import * as https from 'https';
+
+type Method = 'GET' | 'POST' | 'DELETE' | 'PUT' | 'OPTIONS' | 'HEAD';
+
+export async function ping(url: URL, method: Method = 'GET'): Promise<http.ServerResponse> {
+    const f = url.protocol === 'http:' ? http.request : https.request;
+    return new Promise((yes, no) => {
+        const req = f(url, {method});
+        req.on('error', no);
+        req.on('response', yes);
+        req.end();
+    });
+}

src/main/app/initialize.ts

@@ -33,6 +33,7 @@ import {
     USER_ACTIVITY_UPDATE,
     START_UPGRADE,
     START_DOWNLOAD,
+    PING_DOMAIN,
 } from 'common/communication';
 import Config from 'common/config';
 import urlUtils from 'common/utils/url';
@@ -81,6 +82,7 @@ import {
     handleSwitchServer,
     handleSwitchTab,
     handleUpdateLastActive,
+    handlePingDomain,
 } from './intercom';
 import {
     clearAppCache,
@@ -253,6 +255,7 @@ function initializeInterCommunicationEventListeners() {
     ipcMain.handle(GET_DOWNLOAD_LOCATION, handleSelectDownload);
     ipcMain.on(START_DOWNLOAD, handleStartDownload);
     ipcMain.on(START_UPGRADE, handleStartUpgrade);
+    ipcMain.handle(PING_DOMAIN, handlePingDomain);
 }
 
 function initializeAfterAppReady() {

src/main/app/intercom.ts

@@ -9,6 +9,7 @@ import {MentionData} from 'types/notification';
 
 import Config from 'common/config';
 import {getDefaultTeamWithTabsFromTeam} from 'common/tabs/TabView';
+import {ping} from 'common/utils/requests';
 
 import {displayMention} from 'main/notifications';
 import {getLocalPreload, getLocalURLString} from 'main/utils';
@@ -256,3 +257,16 @@ export function handleUpdateLastActive(event: IpcMainEvent, serverName: string,
     Config.set('lastActiveTeam', teams.find((team) => team.name === serverName)?.order || 0);
 }
 
+export function handlePingDomain(event: IpcMainInvokeEvent, url: string): Promise<string> {
+    return Promise.allSettled([
+        ping(new URL(`https://${url}`)),
+        ping(new URL(`http://${url}`)),
+    ]).then(([https, http]): string => {
+        if (https.status === 'fulfilled') {
+            return 'https';
+        } else if (http.status === 'fulfilled') {
+            return 'http';
+        }
+        throw new Error('Could not find server ' + url);
+    });
+}

src/main/preload/modalPreload.js

@@ -16,6 +16,8 @@ import {
     DARK_MODE_CHANGE,
     GET_MODAL_UNCLOSEABLE,
     MODAL_UNCLOSEABLE,
+    PING_DOMAIN,
+    PING_DOMAIN_RESPONSE,
 } from 'common/communication';
 
 console.log('preloaded for the modal!');
@@ -59,6 +61,15 @@ window.addEventListener('message', async (event) => {
         console.log('getting dark mode value');
         window.postMessage({type: DARK_MODE_CHANGE, data: await ipcRenderer.invoke(GET_DARK_MODE)}, window.location.href);
         break;
+    case PING_DOMAIN:
+        console.log('pinging domain: ' + event.data.data);
+        try {
+            const protocol = await ipcRenderer.invoke(PING_DOMAIN, event.data.data);
+            window.postMessage({type: PING_DOMAIN_RESPONSE, data: protocol}, window.location.href);
+        } catch (error) {
+            window.postMessage({type: PING_DOMAIN_RESPONSE, data: error}, window.location.href);
+        }
+        break;
     default:
         console.log(`got a message: ${event}`);
         console.log(event);

src/renderer/components/NewTeamModal.tsx

@@ -8,6 +8,7 @@ import {Modal, Button, FormGroup, FormControl, FormLabel, FormText} from 'react-
 import {TeamWithIndex} from 'types/config';
 
 import urlUtils from 'common/utils/url';
+import {PING_DOMAIN, PING_DOMAIN_RESPONSE} from 'common/communication';
 
 type Props = {
     onClose?: () => void;
@@ -115,8 +116,29 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
     }
 
     handleTeamUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({
-            teamUrl: e.target.value,
+        const teamUrl = e.target.value;
+        this.setState({teamUrl});
+    }
+
+    addProtocolToUrl = (teamUrl: string): Promise<void> => {
+        if (teamUrl.startsWith('http://') || teamUrl.startsWith('https://')) {
+            return Promise.resolve(undefined);
+        }
+
+        return new Promise((resolve) => {
+            const handler = (event: {data: {type: string; data: string | Error}}) => {
+                if (event.data.type === PING_DOMAIN_RESPONSE) {
+                    if (event.data.data instanceof Error) {
+                        console.error(`Could not ping url: ${teamUrl}`);
+                    } else {
+                        this.setState({teamUrl: `${event.data.data}://${this.state.teamUrl}`});
+                    }
+                    window.removeEventListener('message', handler);
+                    resolve(undefined);
+                }
+            };
+            window.addEventListener('message', handler);
+            window.postMessage({type: PING_DOMAIN, data: teamUrl}, window.location.href);
         });
     }
 
@@ -145,7 +167,8 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
             this.getTeamUrlValidationState() === null;
     }
 
-    save = () => {
+    save = async () => {
+        await this.addProtocolToUrl(this.state.teamUrl);
         this.setState({
             saveStarted: true,
         }, () => {