From 66920802070762e094ff0ab2f5fad60f958e5584 Mon Sep 17 00:00:00 2001 From: Vinicius Fortuna Date: Thu, 30 Apr 2020 00:49:50 -0400 Subject: [PATCH 01/14] Convert to Polymer 3 --- src/server_manager/.gitignore | 1 + src/server_manager/bower.json | 42 - src/server_manager/index.html | 7 - src/server_manager/package.json | 45 +- .../ui_components/app-root.html | 935 ---------- .../outline-feedback-dialog.html | 249 --- .../ui_components/outline-iconset.html | 52 - .../outline-metrics-option-dialog.html | 64 - .../ui_components/outline-modal-dialog.html | 74 - .../outline-region-picker-step.html | 204 --- .../outline-server-progress-step.html | 120 -- .../outline-server-settings.html | 454 ----- .../ui_components/outline-server-view.html | 961 ---------- .../outline-validated-input.html | 208 --- src/server_manager/web_app/build_action.sh | 9 - src/server_manager/web_app/main.ts | 2 + .../web_app/ui_components/app-root.js | 864 +++++++++ .../ui_components/cloud-install-styles.js} | 50 +- .../ui_components/licenses/README.md | 0 .../ui_components/licenses/db-ip_license.txt | 0 .../ui_components/licenses/licenses.txt | 0 .../ui_components/outline-about-dialog.js} | 62 +- .../outline-cloud-instructions-view.js} | 56 +- .../ui_components/outline-do-oauth-step.js} | 114 +- .../ui_components/outline-feedback-dialog.js | 231 +++ .../ui_components/outline-help-bubble.js} | 101 +- .../web_app/ui_components/outline-iconset.js | 47 + .../ui_components/outline-intro-step.js} | 107 +- .../outline-manual-server-entry.js} | 358 ++-- .../outline-metrics-option-dialog.js | 67 + .../ui_components/outline-modal-dialog.js | 81 + .../outline-progress-spinner.js} | 38 +- .../outline-region-picker-step.js | 205 +++ .../outline-server-progress-step.js | 125 ++ .../outline-server-settings-styles.js} | 51 +- .../ui_components/outline-server-settings.js | 369 ++++ .../ui_components/outline-server-view.js | 907 ++++++++++ .../ui_components/outline-share-dialog.js} | 93 +- .../ui_components/outline-step-view.js} | 43 +- .../ui_components/outline-survey-dialog.js} | 94 +- .../ui_components/outline-tos-view.js} | 62 +- .../ui_components/outline-validated-input.js | 209 +++ .../{ => web_app}/ui_components/style.css | 0 src/server_manager/webpack.config.js | 39 +- yarn.lock | 1561 +++++++++-------- 45 files changed, 4668 insertions(+), 4693 deletions(-) create mode 100644 src/server_manager/.gitignore delete mode 100644 src/server_manager/bower.json delete mode 100644 src/server_manager/ui_components/app-root.html delete mode 100644 src/server_manager/ui_components/outline-feedback-dialog.html delete mode 100644 src/server_manager/ui_components/outline-iconset.html delete mode 100644 src/server_manager/ui_components/outline-metrics-option-dialog.html delete mode 100644 src/server_manager/ui_components/outline-modal-dialog.html delete mode 100644 src/server_manager/ui_components/outline-region-picker-step.html delete mode 100644 src/server_manager/ui_components/outline-server-progress-step.html delete mode 100644 src/server_manager/ui_components/outline-server-settings.html delete mode 100644 src/server_manager/ui_components/outline-server-view.html delete mode 100644 src/server_manager/ui_components/outline-validated-input.html create mode 100644 src/server_manager/web_app/ui_components/app-root.js rename src/server_manager/{ui_components/cloud-install-styles.html => web_app/ui_components/cloud-install-styles.js} (92%) rename src/server_manager/{ => web_app}/ui_components/licenses/README.md (100%) rename src/server_manager/{ => web_app}/ui_components/licenses/db-ip_license.txt (100%) rename src/server_manager/{ => web_app}/ui_components/licenses/licenses.txt (100%) rename src/server_manager/{ui_components/outline-about-dialog.html => web_app/ui_components/outline-about-dialog.js} (56%) rename src/server_manager/{ui_components/outline-cloud-instructions-view.html => web_app/ui_components/outline-cloud-instructions-view.js} (72%) rename src/server_manager/{ui_components/outline-do-oauth-step.html => web_app/ui_components/outline-do-oauth-step.js} (72%) create mode 100644 src/server_manager/web_app/ui_components/outline-feedback-dialog.js rename src/server_manager/{ui_components/outline-help-bubble.html => web_app/ui_components/outline-help-bubble.js} (65%) create mode 100644 src/server_manager/web_app/ui_components/outline-iconset.js rename src/server_manager/{ui_components/outline-intro-step.html => web_app/ui_components/outline-intro-step.js} (81%) rename src/server_manager/{ui_components/outline-manual-server-entry.html => web_app/ui_components/outline-manual-server-entry.js} (52%) create mode 100644 src/server_manager/web_app/ui_components/outline-metrics-option-dialog.js create mode 100644 src/server_manager/web_app/ui_components/outline-modal-dialog.js rename src/server_manager/{ui_components/outline-progress-spinner.html => web_app/ui_components/outline-progress-spinner.js} (71%) create mode 100644 src/server_manager/web_app/ui_components/outline-region-picker-step.js create mode 100644 src/server_manager/web_app/ui_components/outline-server-progress-step.js rename src/server_manager/{ui_components/outline-server-settings-styles.html => web_app/ui_components/outline-server-settings-styles.js} (83%) create mode 100644 src/server_manager/web_app/ui_components/outline-server-settings.js create mode 100644 src/server_manager/web_app/ui_components/outline-server-view.js rename src/server_manager/{ui_components/outline-share-dialog.html => web_app/ui_components/outline-share-dialog.js} (60%) rename src/server_manager/{ui_components/outline-step-view.html => web_app/ui_components/outline-step-view.js} (74%) rename src/server_manager/{ui_components/outline-survey-dialog.html => web_app/ui_components/outline-survey-dialog.js} (56%) rename src/server_manager/{ui_components/outline-tos-view.html => web_app/ui_components/outline-tos-view.js} (62%) create mode 100644 src/server_manager/web_app/ui_components/outline-validated-input.js rename src/server_manager/{ => web_app}/ui_components/style.css (100%) diff --git a/src/server_manager/.gitignore b/src/server_manager/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/src/server_manager/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/src/server_manager/bower.json b/src/server_manager/bower.json deleted file mode 100644 index 23dd797d..00000000 --- a/src/server_manager/bower.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "outline-launcher", - "description": "Launches Outline Shadowsocks servers on the cloud", - "main": "", - "authors": [ - "Outline" - ], - "license": "Apache", - "private": true, - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "dependencies": { - "app-layout": "PolymerElements/app-layout#^2.0.4", - "app-localize-behavior": "PolymerElements/app-localize-behavior#^2.0.1", - "font-roboto": "PolymerElements/font-roboto-local#^1.1.0", - "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.1.1", - "iron-icons": "PolymerElements/iron-icons#^2.0.1", - "iron-collapse": "PolymerElements/iron-collapse#^2.2.1", - "iron-fit-behavior": "PolymerElements/iron-fit-behavior#^2.1.0", - "iron-pages": "PolymerElements/iron-pages#^2.0.1", - "paper-button": "PolymerElements/paper-button#^2.0.0", - "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.4", - "paper-dialog": "PolymerElements/paper-dialog#^2.0.1", - "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0", - "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.2", - "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1", - "paper-input": "PolymerElements/paper-input#^2.1.0", - "paper-item": "PolymerElements/paper-item#^2.0.0", - "paper-listbox": "PolymerElements/paper-listbox#^2.0.0", - "paper-progress": "PolymerElements/paper-progress#^2.0.1", - "paper-tabs": "PolymerElements/paper-tabs#^2.1.1", - "paper-toast": "PolymerElements/paper-toast#^2.0.0", - "paper-tooltip": "PolymerElements/paper-tooltip#^2.0.0", - "web-animations-js": "web-animations/web-animations-js", - "webcomponentsjs": "webcomponents/webcomponentsjs#^v1.1.0" - } -} diff --git a/src/server_manager/index.html b/src/server_manager/index.html index a99eca6c..943ce3c6 100644 --- a/src/server_manager/index.html +++ b/src/server_manager/index.html @@ -22,18 +22,11 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> - - - - - - - Outline Manager diff --git a/src/server_manager/package.json b/src/server_manager/package.json index 3b21d3ee..f6872387 100644 --- a/src/server_manager/package.json +++ b/src/server_manager/package.json @@ -1,9 +1,9 @@ { + "description": "Create and manage access to Outline servers", + "homepage": "https://getoutline.org/", "name": "outline-manager", "productName": "Outline Manager", "version": "1.5.0", - "description": "Create and manage access to Outline servers", - "homepage": "https://getoutline.org/", "author": { "name": "The Outline authors", "email": "info@getoutline.org" @@ -17,7 +17,29 @@ } }, "dependencies": { + "@polymer/app-layout": "^3.0.0", + "@polymer/app-localize-behavior": "^3.0.0", + "@polymer/font-roboto": "^3.0.0", + "@polymer/iron-autogrow-textarea": "^3.0.0", + "@polymer/iron-collapse": "^3.0.0", + "@polymer/iron-fit-behavior": "^3.0.0", + "@polymer/iron-icons": "^3.0.0", + "@polymer/iron-pages": "^3.0.0", + "@polymer/paper-button": "^3.0.0", + "@polymer/paper-checkbox": "^3.0.0", + "@polymer/paper-dialog": "^3.0.0", + "@polymer/paper-dialog-scrollable": "^3.0.0", + "@polymer/paper-dropdown-menu": "^3.0.0", + "@polymer/paper-icon-button": "^3.0.0", + "@polymer/paper-input": "^3.0.0", + "@polymer/paper-item": "^3.0.0", + "@polymer/paper-listbox": "^3.0.0", + "@polymer/paper-progress": "^3.0.0", + "@polymer/paper-tabs": "^3.0.0", + "@polymer/paper-toast": "^3.0.0", + "@polymer/paper-tooltip": "^3.0.0", "@sentry/electron": "^0.8.1", + "@webcomponents/webcomponentsjs": "^2.0.0", "body-parser": "^1.18.3", "byte-size": "^6.2.0", "clipboard-polyfill": "^2.4.6", @@ -28,7 +50,8 @@ "jsonic": "^0.3.1", "node-forge": "^0.7.1", "request": "^2.87.0", - "request-lite": "^2.40.1" + "request-lite": "^2.40.1", + "web-animations-js": "^2.3.1" }, "comments": [ "@types/node can't have a major version update due to typing changes in node 13. Electron depends on ^12 and we get 13, which breaks us", @@ -41,8 +64,8 @@ "@types/request": "^2.47.1", "@types/semver": "^5.5.0", "bower": "^1.8.0", - "browserify": "^14.5.0", "copy-webpack-plugin": "^5.1.1", + "css-loader": "^3.5.3", "electron": "7.0.1", "electron-builder": "~22.4.0", "electron-icon-maker": "^0.0.4", @@ -50,20 +73,26 @@ "gulp": "^4.0.0", "gulp-posthtml": "^3.0.4", "gulp-replace": "^1.0.0", + "html-webpack-plugin": "^4.2.1", "postcss-rtl": "^1.4.0", "posthtml-postcss": "^0.2.6", "prettier": "1.19.1", "pretty-quick": "2.0.1", + "style-loader": "^1.2.1", "ts-loader": "^7.0.1", "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }, - "scripts": { - "postinstall": "bower install" - }, "prettier": { "printWidth": 120, "bracketSpacing": false, "trailingComma": "es5" - } + }, + "resolutions": { + "inherits": "2.0.3", + "samsam": "1.1.3", + "supports-color": "3.1.2", + "type-detect": "1.0.0" + }, + "license": "Apache" } diff --git a/src/server_manager/ui_components/app-root.html b/src/server_manager/ui_components/app-root.html deleted file mode 100644 index eff677a9..00000000 --- a/src/server_manager/ui_components/app-root.html +++ /dev/null @@ -1,935 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-feedback-dialog.html b/src/server_manager/ui_components/outline-feedback-dialog.html deleted file mode 100644 index 22ffaf66..00000000 --- a/src/server_manager/ui_components/outline-feedback-dialog.html +++ /dev/null @@ -1,249 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-iconset.html b/src/server_manager/ui_components/outline-iconset.html deleted file mode 100644 index 4b184861..00000000 --- a/src/server_manager/ui_components/outline-iconset.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-metrics-option-dialog.html b/src/server_manager/ui_components/outline-metrics-option-dialog.html deleted file mode 100644 index 742a033e..00000000 --- a/src/server_manager/ui_components/outline-metrics-option-dialog.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-modal-dialog.html b/src/server_manager/ui_components/outline-modal-dialog.html deleted file mode 100644 index a1da11c1..00000000 --- a/src/server_manager/ui_components/outline-modal-dialog.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - diff --git a/src/server_manager/ui_components/outline-region-picker-step.html b/src/server_manager/ui_components/outline-region-picker-step.html deleted file mode 100644 index db3c92e3..00000000 --- a/src/server_manager/ui_components/outline-region-picker-step.html +++ /dev/null @@ -1,204 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-server-progress-step.html b/src/server_manager/ui_components/outline-server-progress-step.html deleted file mode 100644 index 31cc6217..00000000 --- a/src/server_manager/ui_components/outline-server-progress-step.html +++ /dev/null @@ -1,120 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-server-settings.html b/src/server_manager/ui_components/outline-server-settings.html deleted file mode 100644 index e31717ff..00000000 --- a/src/server_manager/ui_components/outline-server-settings.html +++ /dev/null @@ -1,454 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-server-view.html b/src/server_manager/ui_components/outline-server-view.html deleted file mode 100644 index 895995d3..00000000 --- a/src/server_manager/ui_components/outline-server-view.html +++ /dev/null @@ -1,961 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/server_manager/ui_components/outline-validated-input.html b/src/server_manager/ui_components/outline-validated-input.html deleted file mode 100644 index 1ac3cb40..00000000 --- a/src/server_manager/ui_components/outline-validated-input.html +++ /dev/null @@ -1,208 +0,0 @@ - - - - - - - - - - - diff --git a/src/server_manager/web_app/build_action.sh b/src/server_manager/web_app/build_action.sh index 491daab9..be6152d8 100755 --- a/src/server_manager/web_app/build_action.sh +++ b/src/server_manager/web_app/build_action.sh @@ -22,7 +22,6 @@ readonly OUT_DIR=$BUILD_DIR/server_manager/web_app rm -rf $OUT_DIR # Create do_install_script.ts, which has a variable with the content of do_install_server.sh. -mkdir -p $OUT_DIR/ts/server_manager/web_app mkdir -p $OUT_DIR/sh/server_manager/web_app pushd $ROOT_DIR/src/server_manager/install_scripts > /dev/null @@ -31,7 +30,6 @@ popd > /dev/null # Node.js on Cygwin doesn't like absolute Unix-style paths. # So, we'll use relative paths for a few steps such as Browserify. - pushd $ROOT_DIR > /dev/null node src/server_manager/install_scripts/build_install_script_ts.node.js \ build/server_manager/web_app/sh/server_manager/web_app/scripts.tgz > $ROOT_DIR/src/server_manager/install_scripts/do_install_script.ts @@ -44,13 +42,6 @@ mkdir -p $STATIC_DIR # TODO(fortuna): Have different production and development builds. webpack --mode=development --config=$ROOT_DIR/src/server_manager/webpack.config.js -# Browserify node_modules/ (just a couple of key NPMs) and app. -# TODO(fortuna): Use polymer-webpack-loader instead. -pushd $OUT_DIR > /dev/null -mkdir -p browserified/server_manager/web_app -$NODE_MODULES_BIN_DIR/browserify --require byte-size --require clipboard-polyfill -o $STATIC_DIR/node_modules.js -popd > /dev/null - # Generate CSS rules to mirror the UI in RTL languages. # TODO(fortuna): Move this to a Webpack loader. node -e "require('./scripts/generate_rtl_css.js')('$STATIC_DIR/ui_components/*.html', '$STATIC_DIR/ui_components')" diff --git a/src/server_manager/web_app/main.ts b/src/server_manager/web_app/main.ts index 16620d53..18bc66ab 100644 --- a/src/server_manager/web_app/main.ts +++ b/src/server_manager/web_app/main.ts @@ -12,6 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. +import './ui_components/app-root.js'; + import * as digitalocean_api from '../cloud/digitalocean_api'; import * as i18n from '../infrastructure/i18n'; import {getSentryApiUrl} from '../infrastructure/sentry'; diff --git a/src/server_manager/web_app/ui_components/app-root.js b/src/server_manager/web_app/ui_components/app-root.js new file mode 100644 index 00000000..3b957ac3 --- /dev/null +++ b/src/server_manager/web_app/ui_components/app-root.js @@ -0,0 +1,864 @@ +/* + Copyright 2018 The Outline Authors + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +import '@polymer/polymer/polymer-legacy.js'; +import '@polymer/app-layout/app-drawer/app-drawer.js'; +import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js'; +import '@polymer/app-layout/app-toolbar/app-toolbar.js'; +import '@polymer/iron-icon/iron-icon.js'; +import '@polymer/iron-icons/iron-icons.js'; +import '@polymer/iron-pages/iron-pages.js'; +import '@polymer/paper-icon-button/paper-icon-button.js'; +import '@polymer/paper-toast/paper-toast.js'; +import '@polymer/paper-dialog/paper-dialog.js'; +import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js'; +import '@polymer/paper-listbox/paper-listbox.js'; +import '@polymer/paper-menu-button/paper-menu-button.js'; +import './cloud-install-styles.js'; +import './outline-about-dialog.js'; +import './outline-do-oauth-step.js'; +import './outline-feedback-dialog.js'; +import './outline-survey-dialog.js'; +import './outline-intro-step.js'; +import './outline-manual-server-entry.js'; +import './outline-modal-dialog.js'; +import './outline-region-picker-step.js'; +import './outline-server-progress-step.js'; +import './outline-server-view.js'; +import './outline-tos-view.js'; + +import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js'; +import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; +import {html} from '@polymer/polymer/lib/utils/html-tag.js'; +import {PolymerElement} from '@polymer/polymer/polymer-element.js'; + +const TOS_ACK_LOCAL_STORAGE_KEY = 'tos-ack'; + +class AppRoot extends mixinBehaviors +([AppLocalizeBehavior], PolymerElement) { + static get template() { + return html` + + + + + +
+ + + + + +
+ + + +
+ +
+
+ [[localize('servers-digitalocean')]] + + +
+

[[localize('digitalocean-disconnect-account')]]

+ +
[[localize('digitalocean-disconnect')]]
+
+ +
+
+ +
+
+ +
+
+ [[localize('servers-manual')]] +
+
+ +
+
+
+ + +
+ + [[localize('servers-add')]] + +
+ + + + [[localize('nav-data-collection')]] + [[localize('nav-feedback')]] + [[localize('nav-help')]] + [[localize('nav-about')]] +
+ [[localize('nav-privacy')]] + [[localize('nav-terms')]] + [[localize('nav-licenses')]] +
+ + + + +
+ + + + + + +
+ +
+ +
+ + + + + +
+
+ +
+
+ +
+ + +
+ +
+ + +
+
+
+ + + +
+
+ + + + + + + + + + + + + + +
+ [[localize('close')]] +
+ + + + + + [[localize('error-licenses')]] + + +
+ [[localize('close')]] +
+ +
+`; + } + + static get is() { + return 'app-root'; + } + + static get properties() { + return { + // Properties language and useKeyIfMissing are used by Polymer.AppLocalizeBehavior. + language: { + type: String, + readonly: true, + }, + useKeyIfMissing: { + type: Boolean, + value: true, + }, + serverList: { + type: Array, + value: [], + }, + selectedServer: { + type: Object, // DisplayServer in display_server.ts + value: undefined, + }, + hasManualServers: { + type: Boolean, + computed: '_computeHasManualServers(serverList.*)', + }, + adminEmail: { + type: String, + value: '', + }, + isSignedInToDigitalOcean: { + type: Boolean, + computed: '_computeIsSignedInToDigitalOcean(adminEmail)', + }, + outlineVersion: String, + userAcceptedTos: { + type: Boolean, + // Get notified when the user clicks the OK button in the ToS view + observer: '_userAcceptedTosChanged', + }, + hasAcceptedTos: { + type: Boolean, + computed: '_computeHasAcceptedTermsOfService(userAcceptedTos)', + }, + currentPage: { + type: String, + value: 'intro', + }, + shouldShowSideBar: { + type: Boolean, + value: false, + }, + sideBarMarginClass: { + type: String, + computed: '_computeSideBarMarginClass(shouldShowSideBar)', + }, + }; + } + + constructor() { + super(); + this.addEventListener('RegionSelected', this.handleRegionSelected); + this.addEventListener( + 'SetUpGenericCloudProviderRequested', this.handleSetUpGenericCloudProviderRequested); + this.addEventListener('SetUpAwsRequested', this.handleSetUpAwsRequested); + this.addEventListener('SetUpGcpRequested', this.handleSetUpGcpRequested); + this.addEventListener('ManualServerEntryCancelled', this.handleManualCancelled); + } + + setLanguage(newLanguage, langDir) { + const messagesUrl = `/messages/${newLanguage}.json`; + this.loadResources(messagesUrl, newLanguage); + if (langDir === 'rtl') { + this.$.appDrawer.align = 'right'; + this.$.sideBar.align = 'right'; + } + this.language = newLanguage; + } + + showIntro() { + this.maybeCloseDrawer(); + this.selectedServer = undefined; + this.currentPage = 'intro'; + } + + getDigitalOceanOauthFlow(onCancel) { + const oauthFlow = this.$.digitalOceanOauth; + oauthFlow.onCancel = onCancel; + return oauthFlow; + } + + showDigitalOceanOauthFlow() { + this.currentPage = 'digitalOceanOauth'; + } + + getAndShowDigitalOceanOauthFlow(onCancel) { + this.currentPage = 'digitalOceanOauth'; + const oauthFlow = this.getDigitalOceanOauthFlow(onCancel); + oauthFlow.showConnectAccount(); + return oauthFlow; + } + + getAndShowRegionPicker() { + this.currentPage = 'regionPicker'; + this.$.regionPicker.init(); + return this.$.regionPicker; + } + + getManualServerEntry() { + return this.$.manualEntry; + } + + showProgress(serverName, showCancelButton) { + this.currentPage = 'serverProgressStep'; + this.$.serverProgressStep.serverName = serverName; + this.$.serverProgressStep.showCancelButton = showCancelButton; + this.$.serverProgressStep.start(); + } + + showServerView() { + this.$.serverProgressStep.stop(); + this.currentPage = 'serverView'; + } + + getServerView(displayServerId) { + if (!displayServerId) { + return null; + } + const selectedServerId = this._base64Encode(displayServerId); + return this.$.serverView.querySelector(`#serverView-${selectedServerId}`); + } + + handleRegionSelected(e) { + this.fire('SetUpServerRequested', { + regionId: this.$.regionPicker.getSelectedRegionId(), + }); + } + + handleSetUpGenericCloudProviderRequested() { + this.handleManualServerSelected('generic'); + } + + handleSetUpAwsRequested() { + this.handleManualServerSelected('aws'); + } + + handleSetUpGcpRequested() { + this.handleManualServerSelected('gcp'); + } + + handleManualServerSelected(cloudProvider) { + this.$.manualEntry.clear(); + this.$.manualEntry.cloudProvider = cloudProvider; + this.currentPage = 'manualEntry'; + } + + handleManualCancelled() { + this.currentPage = 'intro'; + } + + showError(errorMsg) { + this.showToast(errorMsg, Infinity); + } + + showNotification(message, durationMs = 3000) { + this.showToast(message, durationMs); + } + + showToast(message, duration) { + const toast = this.$.toast; + toast.close(); + // Defer in order to trigger the toast animation, otherwise the + // update happens in place. + setTimeout(() => { + toast.show({ + text: message, + duration: duration, + noOverlap: true, + }); + }, 0); + } + + closeError() { + this.$.toast.close(); + } + + // cb is a function which accepts a single boolean which is true iff + // the user chose to retry the failing operation. + showConnectivityDialog(cb) { + const dialogTitle = this.localize('error-connectivity-title'); + const dialogText = this.localize('error-connectivity'); + this.showModalDialog(dialogTitle, dialogText, [this.localize('cancel'), this.localize('retry')]) + .then(clickedButtonIndex => { + cb(clickedButtonIndex === 1); // pass true if user clicked retry + }); + } + + getConfirmation(title, text, confirmButtonText, continueFunc) { + this.showModalDialog(title, text, [this.localize('cancel'), confirmButtonText]) + .then(clickedButtonIndex => { + if (clickedButtonIndex === 1) { + // user clicked to confirm. + continueFunc(); + } + }); + } + + showManualServerError(errorTitle, errorText) { + this.showModalDialog(errorTitle, errorText, [this.localize('cancel'), this.localize('retry')]) + .then(clickedButtonIndex => { + if (clickedButtonIndex == 1) { + this.$.manualEntry.retryTapped(); + } else { + this.$.manualEntry.cancelTapped(); + } + }); + } + _computeIsSignedInToDigitalOcean(adminEmail) { + return Boolean(adminEmail); + } + + _computeHasManualServers(serverList) { + return this.serverList.filter(server => !server.isManaged).length > 0; + } + + _userAcceptedTosChanged(userAcceptedTos) { + if (userAcceptedTos) { + window.localStorage[TOS_ACK_LOCAL_STORAGE_KEY] = Date.now(); + } + } + + _computeHasAcceptedTermsOfService(userAcceptedTos) { + return userAcceptedTos || !!window.localStorage[TOS_ACK_LOCAL_STORAGE_KEY]; + } + + _toggleAppDrawer() { + const drawerNarrow = this.$.drawerLayout.narrow; + const forceNarrow = this.$.drawerLayout.forceNarrow; + if (drawerNarrow) { + if (forceNarrow) { + // The window width is below the responsive threshold. Do not force narrow mode. + this.$.drawerLayout.forceNarrow = false; + } + this.$.appDrawer.toggle(); + } else { + // Forcing narrow mode when the window width is above the responsive threshold effectively + // collapses the drawer. Conversely, reverting force narrow expands the drawer. + this.$.drawerLayout.forceNarrow = !forceNarrow; + } + } + + maybeCloseDrawer() { + if (this.$.drawerLayout.narrow || this.$.drawerLayout.forceNarrow) { + this.$.appDrawer.close(); + } + } + + submitFeedbackTapped() { + this.$.feedbackDialog.open(); + } + + aboutTapped() { + this.$.aboutDialog.open(); + } + + signOutTapped() { + this.fire('SignOutRequested'); + } + + openManualInstallFeedback(prepopulatedMessage) { + this.$.feedbackDialog.open(prepopulatedMessage, true); + } + + openShareDialog(accessKey, s3Url) { + this.$.shareDialog.open(accessKey, s3Url); + } + + openGetConnectedDialog(inviteUrl) { + const dialog = this.$.getConnectedDialog; + if (dialog.children.length > 1) { + return; // The iframe is already loading. + } + // Reset the iframe's state, by replacing it with a newly constructed + // iframe. Unfortunately the location.reload API does not work in our case due to + // this Chrome error: + // "Blocked a frame with origin "outline://web_app" from accessing a cross-origin frame." + const iframe = document.createElement('iframe'); + iframe.onload = function() { + dialog.open(); + }; + iframe.src = inviteUrl; + dialog.insertBefore(iframe, dialog.children[0]); + } + + closeGetConnectedDialog() { + const dialog = this.$.getConnectedDialog; + dialog.close(); + const oldIframe = dialog.children[0]; + dialog.removeChild(oldIframe); + } + + showMetricsDialogForNewServer() { + this.$.metricsDialog.showMetricsOptInDialog(); + } + + // Returns a Promise which fulfills with the index of the button clicked. + showModalDialog(title, text, buttons) { + return this.$.modalDialog.open(title, text, buttons); + } + + closeModalDialog(title, text, buttons) { + return this.$.modalDialog.close(); + } + + showLicensesTapped() { + var xhr = new XMLHttpRequest(); + xhr.onload = () => { + this.$.licensesText.innerText = xhr.responseText; + this.$.licenses.open(); + }; + xhr.onerror = () => { + console.error('could not load license.txt'); + }; + xhr.open('GET', '/ui_components/licenses/licenses.txt', true); + xhr.send(); + } + + _computeShouldShowSideBar() { + const drawerNarrow = this.$.drawerLayout.narrow; + const drawerOpened = this.$.appDrawer.opened; + if (drawerOpened && drawerNarrow) { + this.shouldShowSideBar = false; + } else { + this.shouldShowSideBar = drawerNarrow; + } + } + + _computeSideBarMarginClass(shouldShowSideBar) { + return shouldShowSideBar ? 'side-bar-margin' : ''; + } + + _isServerManaged(server) { + return server.isManaged; + } + + _isServerManual(server) { + return !server.isManaged; + } + + _sortServersByName(a, b) { + const aName = a.name.toUpperCase(); + const bName = b.name.toUpperCase(); + if (aName < bName) { + return -1; + } else if (aName > bName) { + return 1; + } + return 0; + } + + _computeServerClasses(selectedServer, server) { + let serverClasses = []; + if (this._isServerSelected(selectedServer, server)) { + serverClasses.push('selected'); + } + if (!server.isSynced) { + serverClasses.push('syncing'); + } + return serverClasses.join(' '); + } + + _computeServerImage(selectedServer, server) { + if (this._isServerSelected(selectedServer, server)) { + return 'server-icon-selected.png'; + } + return 'server-icon.png'; + } + + _isServerSelected(selectedServer, server) { + return !!selectedServer && selectedServer.id === server.id; + } + + _showServer(event) { + const server = event.model.server; + this.fire('ShowServerRequested', {displayServerId: server.id}); + this.maybeCloseDrawer(); + } + + // Wrapper to encode a string in base64. This is necessary to set the server view IDs to + // the display server IDs, which are URLs, so they can be used with selector methods. The IDs + // are never decoded. + _base64Encode(s) { + return btoa(s).replace(/=/g, ''); + } +} +customElements.define(AppRoot.is, AppRoot); diff --git a/src/server_manager/ui_components/cloud-install-styles.html b/src/server_manager/web_app/ui_components/cloud-install-styles.js similarity index 92% rename from src/server_manager/ui_components/cloud-install-styles.html rename to src/server_manager/web_app/ui_components/cloud-install-styles.js index 02cd582b..b4d92cc0 100644 --- a/src/server_manager/ui_components/cloud-install-styles.html +++ b/src/server_manager/web_app/ui_components/cloud-install-styles.js @@ -1,23 +1,7 @@ - - - - - +$_documentContainer.innerHTML = ` - +`; + +document.head.appendChild($_documentContainer.content); + +/* + Copyright 2018 The Outline Authors + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +/* Polymer style module to share styles between steps +https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules */ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +; diff --git a/src/server_manager/ui_components/licenses/README.md b/src/server_manager/web_app/ui_components/licenses/README.md similarity index 100% rename from src/server_manager/ui_components/licenses/README.md rename to src/server_manager/web_app/ui_components/licenses/README.md diff --git a/src/server_manager/ui_components/licenses/db-ip_license.txt b/src/server_manager/web_app/ui_components/licenses/db-ip_license.txt similarity index 100% rename from src/server_manager/ui_components/licenses/db-ip_license.txt rename to src/server_manager/web_app/ui_components/licenses/db-ip_license.txt diff --git a/src/server_manager/ui_components/licenses/licenses.txt b/src/server_manager/web_app/ui_components/licenses/licenses.txt similarity index 100% rename from src/server_manager/ui_components/licenses/licenses.txt rename to src/server_manager/web_app/ui_components/licenses/licenses.txt diff --git a/src/server_manager/ui_components/outline-about-dialog.html b/src/server_manager/web_app/ui_components/outline-about-dialog.js similarity index 56% rename from src/server_manager/ui_components/outline-about-dialog.html rename to src/server_manager/web_app/ui_components/outline-about-dialog.js index 411b7aba..c84303f4 100644 --- a/src/server_manager/ui_components/outline-about-dialog.html +++ b/src/server_manager/web_app/ui_components/outline-about-dialog.js @@ -1,4 +1,4 @@ - - - +*/ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +import '@polymer/polymer/polymer-legacy.js'; - - - - +`, - - + is: 'outline-about-dialog', + + properties: { + localize: {type: Function, readonly: true}, + outlineVersion: String, + }, + + open: function() { + this.$.dialog.open(); + } +}); diff --git a/src/server_manager/ui_components/outline-cloud-instructions-view.html b/src/server_manager/web_app/ui_components/outline-cloud-instructions-view.js similarity index 72% rename from src/server_manager/ui_components/outline-cloud-instructions-view.html rename to src/server_manager/web_app/ui_components/outline-cloud-instructions-view.js index 80fd95dd..75207106 100644 --- a/src/server_manager/ui_components/outline-cloud-instructions-view.html +++ b/src/server_manager/web_app/ui_components/outline-cloud-instructions-view.js @@ -1,4 +1,4 @@ - - - - +*/ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +import '@polymer/polymer/polymer-legacy.js'; - -