+
+`;
diff --git a/spec/welcome.spec.ts b/spec/welcome.spec.ts
new file mode 100644
index 00000000..eddb9dfe
--- /dev/null
+++ b/spec/welcome.spec.ts
@@ -0,0 +1,132 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import Welcome from '../src/renderer/components/welcome';
+import { ipcRenderer } from './__mocks__/electron';
+
+describe('welcome', () => {
+ const welcomeLabel = 'welcome';
+ const welcomeMock = {
+ url: 'https://my.symphony.com',
+ message: '',
+ urlValid: true,
+ sso: false,
+ };
+ const onLabelEvent = 'on';
+ const removeListenerLabelEvent = 'removeListener';
+
+ it('should render correctly', () => {
+ const wrapper = shallow(React.createElement(Welcome));
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should call `welcome` event when component is mounted', () => {
+ const spy = jest.spyOn(ipcRenderer, onLabelEvent);
+ shallow(React.createElement(Welcome));
+ expect(spy).toBeCalledWith(welcomeLabel, expect.any(Function));
+ });
+
+ it('should remove listener `welcome` when component is unmounted', () => {
+ const spyMount = jest.spyOn(ipcRenderer, onLabelEvent);
+ const spyUnmount = jest.spyOn(ipcRenderer, removeListenerLabelEvent);
+
+ const wrapper = shallow(React.createElement(Welcome));
+ expect(spyMount).toBeCalledWith(welcomeLabel, expect.any(Function));
+
+ wrapper.unmount();
+ expect(spyUnmount).toBeCalledWith(welcomeLabel, expect.any(Function));
+ });
+
+ it('should call `updateState` when component is mounted', () => {
+ const spy = jest.spyOn(Welcome.prototype, 'setState');
+ shallow(React.createElement(Welcome));
+
+ ipcRenderer.send('welcome', welcomeMock);
+
+ expect(spy).toBeCalledWith(welcomeMock);
+ });
+
+ it('should change pod url in text box', () => {
+ const podUrlMock = {
+ url: 'https://corporate.symphony.com',
+ message: '',
+ urlValid: true,
+ sso: false,
+ };
+
+ const spy = jest.spyOn(Welcome.prototype, 'setState');
+ const updatePodUrlSpy = jest.spyOn(Welcome.prototype, 'updatePodUrl');
+
+ const wrapper = shallow(React.createElement(Welcome));
+ ipcRenderer.send('welcome', welcomeMock);
+
+ const welcomePodUrlBox = `input.Welcome-main-container-podurl-box`;
+ const input = wrapper.find(welcomePodUrlBox);
+
+ input.simulate('focus');
+ input.simulate('change', {target: {value: 'https://corporate.symphony.com'}});
+
+ expect(updatePodUrlSpy).toBeCalled();
+ expect(spy).toBeCalledWith(podUrlMock);
+ });
+
+ it('should show message for invalid pod url', () => {
+ const podUrlMock = {
+ url: 'abcdef',
+ message: 'Please enter a valid url',
+ urlValid: false,
+ sso: false,
+ };
+
+ const spy = jest.spyOn(Welcome.prototype, 'setState');
+ const updatePodUrlSpy = jest.spyOn(Welcome.prototype, 'updatePodUrl');
+
+ const wrapper = shallow(React.createElement(Welcome));
+ ipcRenderer.send('welcome', welcomeMock);
+
+ const welcomePodUrlBox = `input.Welcome-main-container-podurl-box`;
+ const input = wrapper.find(welcomePodUrlBox);
+
+ input.simulate('focus');
+ input.simulate('change', {target: {value: 'abcdef'}});
+
+ expect(updatePodUrlSpy).toBeCalled();
+ expect(spy).toBeCalledWith(podUrlMock);
+ });
+
+ it('should click sso checkbox', () => {
+ const podUrlMock = {
+ url: 'https://my.symphony.com',
+ message: '',
+ urlValid: true,
+ sso: true,
+ };
+
+ const spy = jest.spyOn(Welcome.prototype, 'setState');
+ const updatePodUrlSpy = jest.spyOn(Welcome.prototype, 'updateSsoCheckbox');
+
+ const wrapper = shallow(React.createElement(Welcome));
+ ipcRenderer.send('welcome', welcomeMock);
+
+ const welcomePodUrlBox = `input[type="checkbox"]`;
+ const input = wrapper.find(welcomePodUrlBox);
+
+ input.simulate('focus');
+ input.simulate('change', {target: {checked: true}});
+
+ expect(updatePodUrlSpy).toBeCalled();
+ expect(spy).toBeCalledWith(podUrlMock);
+ });
+
+ it('should set pod url', () => {
+ const spy = jest.spyOn(Welcome.prototype, 'setState');
+ const setPodUrlSpy = jest.spyOn(Welcome.prototype, 'setPodUrl');
+
+ const wrapper = shallow(React.createElement(Welcome));
+ ipcRenderer.send('welcome', welcomeMock);
+ const welcomeContinueButton = `button.Welcome-continue-button`;
+ wrapper.find(welcomeContinueButton).simulate('click');
+
+ expect(setPodUrlSpy).toBeCalled();
+ expect(spy).toBeCalledWith(welcomeMock);
+ });
+});
diff --git a/src/app/config-handler.ts b/src/app/config-handler.ts
index 3de5d132..e32428f8 100644
--- a/src/app/config-handler.ts
+++ b/src/app/config-handler.ts
@@ -22,12 +22,8 @@ export enum ClientSwitchType {
CLIENT_2_0_DAILY = 'CLIENT_2_0_DAILY',
}
-export interface IGlobalConfig {
- url: string;
- contextIsolation: boolean;
-}
-
export interface IConfig {
+ url: string;
minimizeOnClose: CloudConfigDataTypes;
launchOnStartup: CloudConfigDataTypes;
alwaysOnTop: CloudConfigDataTypes;
@@ -51,6 +47,11 @@ export interface IConfig {
clientSwitch: ClientSwitchType;
}
+export interface IGlobalConfig {
+ url: string;
+ contextIsolation: boolean;
+}
+
export interface ICloudConfig {
configVersion?: string;
podLevelEntitlements: IPodLevelEntitlements;
@@ -214,13 +215,13 @@ class Config {
* @param data {IConfig}
*/
public async updateUserConfig(data: Partial
+ 
+
+
+
+
++ Pod URL +
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ /**
+ * Perform actions on component being mounted
+ */
+ public componentDidMount(): void {
+ ipcRenderer.on('welcome', this.updateState);
+ }
+
+ /**
+ * Perform actions on component being unmounted
+ */
+ public componentWillUnmount(): void {
+ ipcRenderer.removeListener('welcome', this.updateState);
+ }
+
+ /**
+ * Set pod url and pass it to the main process
+ */
+ public setPodUrl(): void {
+ const { url, sso } = this.state;
+ let ssoPath = '/login/sso/initsso';
+ if (url.endsWith('/')) {
+ ssoPath = 'login/sso/initsso';
+ }
+ ipcRenderer.send('set-pod-url', sso ? `${url}${ssoPath}` : url);
+ }
+
+ /**
+ * Update pod url from the text box
+ * @param _event
+ */
+ public updatePodUrl(_event): void {
+ const url = _event.target.value;
+ const match = url.match(/(https?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/g) != null;
+ if (!match) {
+ this.updateState(_event, {
+ url,
+ message: i18n.t('Please enter a valid url', WELCOME_NAMESPACE)(),
+ urlValid: false,
+ sso: this.state.sso,
+ });
+ return;
+ }
+ this.updateState(_event, { url, message: '', urlValid: true, sso: this.state.sso });
+ }
+
+ /**
+ * Update the SSO checkbox
+ * @param _event Event occurred upon action
+ * on the checkbox
+ */
+ public updateSsoCheckbox(_event): void {
+ const ssoCheckBox = _event.target.checked;
+ this.updateState(_event, {
+ url: this.state.url,
+ message: this.state.message,
+ urlValid: this.state.urlValid,
+ sso: ssoCheckBox,
+ });
+ }
+
+ /**
+ * Update state
+ * @param _event
+ * @param data
+ */
+ private updateState(_event, data): void {
+ this.setState(data as IState);
+ }
+
+}
diff --git a/src/renderer/preload-component.ts b/src/renderer/preload-component.ts
index 144f04a3..7bf89c56 100644
--- a/src/renderer/preload-component.ts
+++ b/src/renderer/preload-component.ts
@@ -10,6 +10,7 @@ import NotificationSettings from './components/notification-settings';
import ScreenPicker from './components/screen-picker';
import ScreenSharingFrame from './components/screen-sharing-frame';
import ScreenSharingIndicator from './components/screen-sharing-indicator';
+import Welcome from './components/welcome';
const enum components {
aboutApp = 'about-app',
@@ -19,6 +20,7 @@ const enum components {
basicAuth = 'basic-auth',
notification = 'notification-comp',
notificationSettings = 'notification-settings',
+ welcome = 'welcome',
}
const loadStyle = (style) => {
@@ -72,6 +74,11 @@ const load = () => {
loadStyle(components.notificationSettings);
component = NotificationSettings;
break;
+ case components.welcome:
+ document.title = i18n.t('WelcomeText', 'Welcome')();
+ loadStyle(components.welcome);
+ component = Welcome;
+ break;
}
const element = React.createElement(component);
ReactDOM.render(element, document.getElementById('Root'));
diff --git a/src/renderer/preload-main.ts b/src/renderer/preload-main.ts
index 17480ff6..0c6ae243 100644
--- a/src/renderer/preload-main.ts
+++ b/src/renderer/preload-main.ts
@@ -9,6 +9,7 @@ import DownloadManager from './components/download-manager';
import MessageBanner from './components/message-banner';
import NetworkError from './components/network-error';
import SnackBar from './components/snack-bar';
+import Welcome from './components/welcome';
import WindowsTitleBar from './components/windows-title-bar';
import { SSFApi } from './ssf-api';
@@ -148,6 +149,20 @@ ipcRenderer.on('page-load', (_event, { locale, resources, enableCustomTitleBar }
banner.showBanner(false, 'error');
});
+ipcRenderer.on('page-load-welcome', (_event, data) => {
+ const { locale, resource } = data;
+ i18n.setResource(locale, resource);
+ // Renders component as soon as the page is ready
+ document.title = i18n.t('WelcomeText', 'Welcome')();
+ const styles = document.createElement('link');
+ styles.rel = 'stylesheet';
+ styles.type = 'text/css';
+ styles.href = `./styles/welcome.css`;
+ document.getElementsByTagName('head')[0].appendChild(styles);
+ const element = React.createElement(Welcome);
+ ReactDOM.render(element, document.getElementById('Root'));
+});
+
// When the window fails to load
ipcRenderer.on('page-load-failed', (_event, { locale, resources }) => {
i18n.setResource(locale, resources);
diff --git a/src/renderer/styles/welcome.less b/src/renderer/styles/welcome.less
new file mode 100644
index 00000000..22216e48
--- /dev/null
+++ b/src/renderer/styles/welcome.less
@@ -0,0 +1,186 @@
+@import "theme";
+
+@white: rgb(255, 255, 255, 1);
+@version-text-color: rgb(47, 47, 47, 1);
+@text-padding: 10px;
+
+body {
+ background-color: white;
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+
+.Welcome:lang(ja-JP) {
+ font-family: @font-family-ja;
+
+ h4 {
+ margin: 3px 0;
+ }
+
+ .Welcome-symphony-section {
+ padding-left: 10px;
+ }
+}
+
+.Welcome:lang(fr-FR) {
+
+ .Welcome-symphony-section {
+ padding-left: 10px;
+ }
+}
+
+.Welcome {
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ font-family: @font-family;
+
+ &-image-container {
+ text-align: center;
+ margin: 50px 0 10px;
+ }
+
+ &-image-container img {
+ width: 200px;
+ }
+
+ &-header-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ }
+
+ &-main-container {
+ padding: 10px 20%;
+ }
+
+ &-main-container-input-div {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ }
+
+ &-main-container-input-selection {
+ width: 100%;
+ }
+
+ &-main-container-podurl-box {
+ float: left;
+ width: 100%;
+ border-radius: 4px;
+ border: 1px solid #000;
+ padding: 5px;
+ max-width: -webkit-fill-available;
+ }
+
+ &-main-container-sso-box {
+ float: left;
+ width: 30%;
+ font-size: 12px;
+ padding-left: 5px;
+ }
+
+ &-name {
+ font-size: 1.0em;
+ font-weight: bold;
+ margin-bottom: 6px;
+ }
+
+ &-message-label {
+ font-size: 12px;
+ margin-left: 2px;
+ color: red;
+ }
+
+ &-logo {
+ margin: auto;
+ }
+
+ &-symphony-section {
+ padding-left: 10px;
+ }
+
+ hr {
+ width: 90%;
+ }
+
+ ul {
+ list-style: none;
+ clear: both;
+ display: table;
+ text-align: right;
+ margin: 0;
+ }
+
+ h4 {
+ text-align: start;
+ margin: 6px 0;
+ }
+
+ li {
+ display: table-row;
+ text-align: left;
+ line-height: 20px;
+ }
+
+ b {
+ display: table-cell;
+ padding-right: 1em;
+ text-align: left;
+ font-weight: normal;
+ }
+
+ &-continue-button {
+ text-transform: capitalize;
+ }
+
+ &-continue-button {
+ box-shadow: none;
+ border: none;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ text-align: center;
+ padding: 10px 32px;
+ display: inline-block;
+ text-decoration: none;
+ line-height: 12px;
+ background-color: #3da2fd;
+ color: #ffffff;
+ cursor: pointer;
+ text-transform: uppercase;
+ float: right;
+ margin: 24px 30px 4px 0;
+
+ &:focus {
+ box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+ outline: none;
+ }
+ }
+
+ &-continue-button-disabled {
+ box-shadow: none;
+ border: none;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ text-align: center;
+ padding: 10px 32px;
+ display: inline-block;
+ text-decoration: none;
+ line-height: 12px;
+ color: #ffffff;
+ text-transform: uppercase;
+ float: right;
+ margin: 24px 30px 4px 0;
+ cursor: not-allowed;
+ background-color: #cccccc;
+ pointer-events: none;
+
+ &:focus {
+ box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+ outline: none;
+ }
+ }
+}
+
+
+
+
+
+
+ {i18n.t('Pod URL', WELCOME_NAMESPACE)()}
+
+
+
+
+
+
+
+
+
+
+
+