PLT-8231: Add landing page when deep linking to native app

components/go_to_native_app/go_to_native_app.jsx

@@ -0,0 +1,107 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
+import {FormattedMessage} from 'react-intl';
+import safeOpenProtocol from 'custom-protocol-detection';
+
+import MattermostLogoSvg from 'images/logo.svg';
+
+export default class GoNativeApp extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ protocolUnsupported: false,
+ browserUnsupported: false,
+ };
+ }
+
+ render() {
+ const {protocolUnsupported, browserUnsupported} = this.state;
+
+ let nativeLocation = window.location.href.replace('/vault#', '');
+ nativeLocation = nativeLocation.replace(/^(https|http)/, 'mattermost');
+
+ //***** TESTING PURPOSE - REMOVE BEFORE MERGE ****
+ nativeLocation = nativeLocation.replace(/\/\/[^/]+/, '//pre-release.mattermost.com');
+
+ safeOpenProtocol(nativeLocation,
+ () => this.setState({protocolUnsupported: true}),
+ () => setTimeout(redirectWeb, 3000),
+ () => this.setState({browserUnsupported: true})
+ );
+
+ let goNativeAppMessage = null;
+ if (protocolUnsupported) {
+ goNativeAppMessage = (
+ <FormattedMessage
+ id='get_app.protocolUnsupported'
+ defaultMessage='Unable to open Mattermost.'
+ />
+ );
+ } else if (browserUnsupported) {
+ goNativeAppMessage = (
+ <FormattedMessage
+ id='get_app.browserUnsupported'
+ defaultMessage='This browser does not support opening applications.'
+ />
+ );
+ } else {
+ goNativeAppMessage = (
+ <FormattedMessage
+ id='get_app.systemDialogMessage'
+ defaultMessage='Please click `Open Mattermost` if you see the system dialog.'
+ />
+ );
+ }
+
+ // prompt user to download in case they don't have the mobile app.
+ return (
+ <div className='get-app get-app--android'>
+ <img
+ src={MattermostLogoSvg}
+ className='get-app__logo'
+ />
+ <div className='get-app__launching'>
+ <FormattedMessage
+ id='get_app.launching'
+ defaultMessage='Launching...'
+ />
+ </div>
+ <div className='get-app__status'>
+ {goNativeAppMessage}
+ </div>
+ <div>
+ <div className='get-app__alternative'>
+ <FormattedMessage
+ id='get_app.ifNothingPrompts'
+ defaultMessage='If nothing prompts from browser,'
+ />
+ </div>
+ <a
+ href='/downloads'
+ className='btn btn-primary get-app__download'
+ >
+ <FormattedMessage
+ id='get_app.downloadMattermost'
+ defaultMessage='Download & run Mattermost'
+ />
+ </a>
+ </div>
+ <a
+ href='/'
+ className='btn btn-secondary get-app__continue'
+ >
+ <FormattedMessage
+ id='get_app.continueToBrowser'
+ defaultMessage='Continue to web site'
+ />
+ </a>
+ </div>
+ );
+ }
+}
+
+function redirectWeb() {
+ window.location = window.location.href.replace('/vault#', '');
+}

components/go_to_native_app/index.jsx

@@ -0,0 +1,12 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+
+import GoToNativeApp from './go_to_native_app.jsx';
+
+function mapStateToProps() {
+ return {};
+}
+
+export default connect(mapStateToProps)(GoToNativeApp);

components/root/root.jsx

@@ -46,6 +46,7 @@ import loadClaimController from 'bundle-loader?lazy!components/claim';
 import loadHelpController from 'bundle-loader?lazy!components/help/help_controller';
 import loadGetIosApp from 'bundle-loader?lazy!components/get_ios_app';
 import loadGetAndroidApp from 'bundle-loader?lazy!components/get_android_app';
+import loadGoToNativeApp from 'bundle-loader?lazy!components/go_to_native_app';
 import loadSelectTeam from 'bundle-loader?lazy!components/select_team';
 import loadAuthorize from 'bundle-loader?lazy!components/authorize';
 import loadCreateTeam from 'bundle-loader?lazy!components/create_team';
@@ -68,6 +69,7 @@ const ClaimController = makeAsyncComponent(loadClaimController);
 const HelpController = makeAsyncComponent(loadHelpController);
 const GetIosApp = makeAsyncComponent(loadGetIosApp);
 const GetAndroidApp = makeAsyncComponent(loadGetAndroidApp);
+const GoToNativeApp = makeAsyncComponent(loadGoToNativeApp);
 const SelectTeam = makeAsyncComponent(loadSelectTeam);
 const Authorize = makeAsyncComponent(loadAuthorize);
 const Mfa = makeAsyncComponent(loadMfa);
@@ -315,6 +317,10 @@ export default class Root extends React.Component {
  path={'/get_android_app'}
  component={GetAndroidApp}
  />
+ <Route
+ path={'/vault'}
+ component={GoToNativeApp}
+ />
  <LoggedInRoute
  path={'/admin_console'}
  component={AdminConsole}

package.json

@@ -10,6 +10,7 @@
  "bootstrap-colorpicker": "2.5.2",
  "chart.js": "2.7.2",
  "compass-mixins": "0.12.10",
+ "custom-protocol-detection": "uber-uchat/custom-protocol-detection",
  "exif2css": "1.2.0",
  "fastclick": "1.0.6",
  "flux": "3.1.3",

sass/routes/_get-app.scss

@@ -33,7 +33,45 @@
  }
 }
 
-.get-android-app {
+.get-app--android {
+ background: white;
+ min-height: 100vh;
+ padding: 0 1em;
+ text-align: center;
+
+ .get-app__logo {
+ margin: 5em auto 1.5em;
+ max-width: 300px;
+ width: 85%;
+ }
+
+ .get-app__launching {
+ font-size: 20px;
+ opacity: .5;
+ }
+
+ .get-app__alternative {
+ font-size: 16px;
+ margin-bottom: 1em;
+ opacity: .5;
+ }
+
+ .get-app__download {
+ font-size: 1.2em;
+ font-weight: 400;
+ margin-bottom: 1rem;
+ padding: .8em 1.5em;
+ }
+
+ .get-app__continue {
+ font-size: 1.1em;
+ }
+
+ .get-app__status {
+ font-size: 20px;
+ margin: 2em 0em;
+ }
+
  .get-app__header {
  text-align: left;
  }
@@ -99,4 +137,4 @@
  padding: 12px;
  width: 220px;
  }
-}
+}