wip

frontend/src/app/components/configModal.component.pug

@@ -0,0 +1,46 @@
+.modal-header
+    h5.modal-title Config file
+
+.modal-body
+    .header(*ngIf='configService.activeConfig')
+        .d-flex.align-items-center.py-2
+            .me-auto
+                label Active config
+                .title
+                    fa-icon([icon]='_configIcon')
+                    span.ms-2 {{configService.activeConfig.name}}
+
+            button.btn.btn-semi.me-2((click)='configService.duplicateActiveConfig()')
+                fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+
+            button.btn.btn-semi((click)='deleteConfig()')
+                fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
+
+        .d-flex.align-items-center.py-2(*ngIf='configService.activeVersion')
+            .me-auto App version:
+            div(ngbDropdown)
+                button.btn.btn-semi(ngbDropdownToggle) {{configService.activeVersion.version}}
+                div(ngbDropdownMenu)
+                    button(
+                        *ngFor='let version of configService.versions',
+                        ngbDropdownItem,
+                        [class.active]='version == configService.activeVersion',
+                        (click)='selectVersion(version)'
+                    ) {{version.version}}
+
+    .pt-3(*ngIf='configService.configs.length > 1')
+        h5 Other configs
+
+        .list-group.list-group-light
+            ng-container(*ngFor='let config of configService.configs')
+                button.list-group-item.list-group-item-action(
+                    *ngIf='config.id !== configService.activeConfig?.id',
+                    (click)='selectConfig(config)'
+                )
+                    fa-icon([icon]='_configIcon')
+                    span {{config.name}}
+
+    .py-3
+        button.btn.btn-semi.w-100((click)='createNewConfig()')
+            fa-icon([icon]='_addIcon', [fixedWidth]='true')
+            span New config

frontend/src/app/components/configModal.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { AppConnectorService } from '../services/appConnector.service'
+import { ConfigService } from 'src/common'
+import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Config, Version } from 'src/api'
+
+@Component({
+    selector: 'config-modal',
+    templateUrl: './configModal.component.pug',
+    // styleUrls: ['./settingsModal.component.scss'],
+})
+export class ConfigModalComponent {
+    _addIcon = faPlus
+    _copyIcon = faCopy
+    _deleteIcon = faTrash
+    _configIcon = faFile
+
+    constructor (
+        private modalInstance: NgbActiveModal,
+        public appConnector: AppConnectorService,
+        public configService: ConfigService,
+    ) {
+    }
+
+    async ngOnInit () {
+    }
+
+    cancel () {
+        this.modalInstance.dismiss()
+    }
+
+    async createNewConfig () {
+        const config = await this.configService.createNewConfig()
+        await this.configService.selectConfig(config)
+        this.modalInstance.dismiss()
+    }
+
+    async selectConfig (config: Config) {
+        await this.configService.selectConfig(config)
+        this.modalInstance.dismiss()
+    }
+
+    async selectVersion (version: Version) {
+        await this.configService.selectVersion(version)
+        this.modalInstance.dismiss()
+    }
+
+    async deleteConfig () {
+        if (confirm('Delete this config? This cannot be undone.')) {
+            await this.configService.deleteConfig(this.configService.activeConfig)
+        }
+        this.configService.selectDefaultConfig()
+        this.modalInstance.dismiss()
+    }
+}

frontend/src/app/components/connectionList.component.pug

@@ -0,0 +1,8 @@
+.list-group.list-group-light
+    .list-group-item.d-flex(*ngFor='let socket of appConnector.sockets')
+        fa-icon.text-success.me-2([icon]='_circleIcon', [fixedWidth]='true')
+        .me-auto
+            div {{socket.options.host}}:{{socket.options.port}}
+            .text-muted via {{socket.url}}
+        button.btn.btn-link((click)='closeSocket(socket)')
+            fa-icon([icon]='_closeIcon', [fixedWidth]='true')

frontend/src/app/components/connectionList.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core'
+import { AppConnectorService, SocketProxy } from '../services/appConnector.service'
+import { faCircle, faTimes } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+    selector: 'connection-list',
+    templateUrl: './connectionList.component.pug',
+})
+export class ConnectionListComponent {
+    _circleIcon = faCircle
+    _closeIcon = faTimes
+
+    constructor (
+        public appConnector: AppConnectorService,
+    ) { }
+
+    closeSocket (socket: SocketProxy) {
+        socket.close(new Error('Connection closed by user'))
+    }
+}

frontend/src/app/components/main.component.pug

@@ -0,0 +1,14 @@
+.sidebar
+    img.logo(src='{{_logo}}')
+
+    button.btn.mt-auto((click)='openConfig()')
+        fa-icon([icon]='_configIcon', [fixedWidth]='true')
+
+    button.btn((click)='openSettings()')
+        fa-icon([icon]='_settingsIcon', [fixedWidth]='true')
+
+    button.btn.mt-3((click)='logout()')
+        fa-icon([icon]='_logoutIcon', [fixedWidth]='true')
+
+.terminal([hidden]='!showApp')
+    iframe(#iframe)

frontend/src/app/components/main.component.scss

@@ -0,0 +1,61 @@
+@import "theme/vars";
+
+:host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+}
+
+.sidebar {
+    width: 64px;
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .logo {
+        width: 32px;
+        height: 32px;
+        align-self: center;
+        margin-top: 15px;
+        margin-bottom: 20px;
+    }
+
+    >button, >[ngbdropdown] > button {
+        width: 64px;
+        height: 64px;
+        background: transparent;
+        box-shadow: none;
+
+        &::after {
+            display: none;
+        }
+    }
+}
+
+.terminal {
+    flex: 1 1 0;
+    overflow: hidden;
+    position: relative;
+}
+
+iframe {
+    background: $body-bg;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+
+.config-menu {
+    .header {
+        border-bottom: 1px solid black;
+    }
+}

frontend/src/app/components/main.component.ts

@@ -0,0 +1,109 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { Title } from '@angular/platform-browser'
+import { AppConnectorService } from '../services/appConnector.service'
+
+import { faCog, faFile, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { SettingsModalComponent } from './settingsModal.component'
+import { ConfigModalComponent } from './configModal.component'
+import { ConfigService, LoginService } from 'src/common'
+import { combineLatest } from 'rxjs'
+import { Config, Version } from 'src/api'
+import { Router } from '@angular/router'
+
+@Component({
+    selector: 'main',
+    templateUrl: './main.component.pug',
+    styleUrls: ['./main.component.scss'],
+})
+export class MainComponent {
+    _logo = require('assets/logo.svg')
+    _settingsIcon = faCog
+    _logoutIcon = faSignOutAlt
+    _addIcon = faPlus
+    _configIcon = faFile
+
+    showApp = false
+
+    @ViewChild('iframe') iframe: ElementRef
+
+    constructor (
+        titleService: Title,
+        public appConnector: AppConnectorService,
+        private http: HttpClient,
+        public loginService: LoginService,
+        private ngbModal: NgbModal,
+        private config: ConfigService,
+        private router: Router,
+    ) {
+        titleService.setTitle('Tabby')
+        window.addEventListener('message', this.connectorRequestHandler)
+    }
+
+    connectorRequestHandler = event => {
+        if (event.data === 'request-connector') {
+            this.iframe.nativeElement.contentWindow['__connector__'] = this.appConnector
+            this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+        }
+    }
+
+    async ngAfterViewInit () {
+        await this.loginService.ready$.toPromise()
+        if (!this.loginService.user) {
+            this.router.navigate(['/login'])
+            return
+        }
+
+        combineLatest(
+            this.config.activeConfig$,
+            this.config.activeVersion$
+        ).subscribe(([config, version]) => {
+            if (config && version) {
+                this.reloadApp(config, version)
+            }
+        })
+        this.config
+        await this.config.ready$.toPromise()
+        await this.config.selectDefaultConfig()
+    }
+
+    ngOnDestroy () {
+        window.removeEventListener('message', this.connectorRequestHandler)
+    }
+
+    unloadApp () {
+        this.showApp = false
+        this.iframe.nativeElement.src = 'about:blank'
+    }
+
+    async loadApp (config, version) {
+        this.showApp = true
+        this.iframe.nativeElement.src = '/terminal'
+        await this.http.patch(`/api/1/configs/${config.id}`, {
+            last_used_with_version: version.version,
+        }).toPromise()
+    }
+
+    reloadApp (config: Config, version: Version) {
+        // TODO check config incompatibility
+        this.unloadApp()
+        setTimeout(() => {
+            this.appConnector.setState(config, version)
+            this.loadApp(config, version)
+        })
+    }
+
+    async openConfig () {
+        await this.ngbModal.open(ConfigModalComponent).result
+    }
+
+    async openSettings () {
+        await this.ngbModal.open(SettingsModalComponent).result
+    }
+
+    async logout () {
+        await this.http.post('/api/1/auth/logout', null).toPromise()
+        location.href = '/'
+    }
+}

frontend/src/app/components/settingsModal.component.pug

@@ -0,0 +1,72 @@
+.modal-header
+    h3.modal-title Settings
+
+.modal-body
+    .mb-3
+        h5 GitHub account
+        a.btn.btn-info(href='{{commonService.backendURL}}/api/1/auth/social/login/github', *ngIf='!user.github_username')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            span Connect a GitHub account
+        .alert.alert-success.d-flex(*ngIf='user.github_username')
+            fa-icon.me-2([icon]='_okIcon', [fixedWidth]='true')
+            div
+                div Connected as #[strong {{user.github_username}}]
+                div(*ngIf='user.is_sponsor') Thank you for supporting Tabby on GitHub!
+
+    .mb-3.mt-4
+        h5 Config sync
+        .d-flex.aling-items-stretch.mb-3
+            .form-floating.w-100
+                input.form-control(
+                    type='text',
+                    readonly,
+                    [ngModel]='user.config_sync_token'
+                )
+                label Sync token for the Tabby app
+            button.btn.btn-dark([cdkCopyToClipboard]='user.config_sync_token')
+                fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+
+    .mb-3.mt-4
+        h5 Connection gateway
+        .form-check.form-switch
+            input.form-check-input(
+                type='checkbox',
+                [(ngModel)]='customGatewayEnabled'
+            )
+            label(class='form-check-label') Use custom connection gateway
+
+        small.text-muted This allows you to securely route connections through your own hosted gateway. See #[a(href='https://github.com/Eugeny/tabby-connection-gateway#readme', target='_blank') tabby-connection-gateway] for setup instructions.
+
+    form
+        input.d-none(type='text', name='fakeusername')
+        input.d-none(type='password', name='fakepassword')
+
+        .mb-3(*ngIf='customGatewayEnabled')
+            .form-floating
+                input.form-control(
+                    type='text',
+                    [(ngModel)]='user.custom_connection_gateway',
+                    placeholder='wss://1.2.3.4',
+                    autocomplete='off'
+                )
+                label Gateway address
+
+        .mb-3(*ngIf='customGatewayEnabled')
+            .form-floating
+                input.form-control(
+                    type='password',
+                    [(ngModel)]='user.custom_connection_gateway_token',
+                    placeholder='123',
+                    autocomplete='new-password'
+                )
+                label Gateway authentication token
+
+    .mb-3.mt-4(*ngIf='appConnector.sockets.length')
+        h5 Active connections
+        connection-list
+
+.modal-footer
+    .text-muted Account ID: {{user.id}}
+    .ms-auto
+    button.btn.btn-primary((click)='apply()') Apply
+    button.btn.btn-secondary((click)='cancel()') Cancel

frontend/src/app/components/settingsModal.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { User } from 'src/api'
+import { CommonService, LoginService } from 'src/common'
+import { AppConnectorService } from '../services/appConnector.service'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+    selector: 'settings-modal',
+    templateUrl: './settingsModal.component.pug',
+})
+export class SettingsModalComponent {
+    user: User
+    customGatewayEnabled = false
+    _githubIcon = faGithub
+    _copyIcon = faCopy
+    _okIcon = faCheck
+
+    constructor (
+        public appConnector: AppConnectorService,
+        public commonService: CommonService,
+        private modalInstance: NgbActiveModal,
+        private loginService: LoginService,
+    ) {
+        this.user = { ...loginService.user }
+        this.customGatewayEnabled = !!this.user.custom_connection_gateway
+    }
+
+    async ngOnInit () {
+    }
+
+    async apply () {
+        Object.assign(this.loginService.user, this.user)
+        this.modalInstance.close()
+        await this.loginService.updateUser()
+    }
+
+    cancel () {
+        this.modalInstance.dismiss()
+    }
+}

frontend/src/app/components/upgradeModal.component.pug

@@ -0,0 +1,28 @@
+.modal-header
+    h1.modal-title Hey!
+
+.modal-body
+    h4 It looks like you're enjoying Tabby a lot!
+
+    p Tabby Web has a limit of {{appConnector.connectionLimit}} simultaneous connections due to the fact that I have to pay for hosting and traffic out of my own pocket.
+
+    p #[strong You can have unlimited parallel connections] if you support Tabby on GitHub with #[code $3]/month or more. It's cancellable anytime, there are no hidden costs and it helps me pay my bills.
+
+    a.btn.btn-primary.btn-lg.d-block.mb-3(href='https://github.com/sponsors/Eugeny', target='_blank')
+        fa-icon.me-2([icon]='_loveIcon')
+        span Support Tabby on GitHub
+
+    button.btn.btn-warning.d-block.w-100((click)='skipOnce()', *ngIf='canSkip')
+        fa-icon.me-2([icon]='_giftIcon')
+        span Skip - just this one time
+
+    p.mt-3 If you work in education, have already supported me on Ko-fi before, or your country isn't supported on GitHub Sponsors, just #[a(href='mailto:e@ajenti.org?subject=Help with Tabby Pro') let me know] and I'll hook you up.
+
+    .mb-3(*ngIf='!loginService.user.github_username')
+        a.btn.btn-info(href='{{commonService.backendURL}}/api/1/auth/social/login/github')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            span Connect your GitHub account to link your sponsorship
+
+    .mt-4
+    p You can also kill any active connection from the list below to free up a slot.
+    connection-list

frontend/src/app/components/upgradeModal.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faGift, faHeart } from '@fortawesome/free-solid-svg-icons'
+
+import { AppConnectorService } from '../services/appConnector.service'
+import { CommonService, LoginService } from 'src/common'
+import { User } from 'src/api'
+
+@Component({
+    selector: 'upgrade-modal',
+    templateUrl: './upgradeModal.component.pug',
+})
+export class UpgradeModalComponent {
+    user: User
+    _githubIcon = faGithub
+    _loveIcon = faHeart
+    _giftIcon = faGift
+    canSkip = false
+
+    constructor (
+        public appConnector: AppConnectorService,
+        public commonService: CommonService,
+        public loginService: LoginService,
+        private modalInstance: NgbActiveModal,
+    ) {
+        this.canSkip = !window.localStorage['upgrade-modal-skipped']
+    }
+
+    skipOnce () {
+        window.localStorage['upgrade-modal-skipped'] = true
+        window.sessionStorage['upgrade-skip-active'] = true
+        this.modalInstance.close(true)
+    }
+}

frontend/src/app/index.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core'
+import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+
+import { MainComponent } from './components/main.component'
+import { ConfigModalComponent } from './components/configModal.component'
+import { SettingsModalComponent } from './components/settingsModal.component'
+import { ConnectionListComponent } from './components/connectionList.component'
+import { UpgradeModalComponent } from './components/upgradeModal.component'
+import { InstanceInfoResolver } from 'src/api'
+import { CommonAppModule } from 'src/common'
+
+const ROUTES = [
+    {
+        path: '',
+        component: MainComponent,
+        resolve: {
+            instanceInfo: InstanceInfoResolver,
+        },
+    },
+]
+
+@NgModule({
+    imports: [
+        CommonAppModule,
+        CommonModule,
+        FormsModule,
+        NgbDropdownModule,
+        NgbModalModule,
+        ClipboardModule,
+        FontAwesomeModule,
+        RouterModule.forChild(ROUTES),
+    ],
+    declarations: [
+        MainComponent,
+        ConfigModalComponent,
+        SettingsModalComponent,
+        ConnectionListComponent,
+        UpgradeModalComponent,
+    ],
+})
+export class ApplicationModule { }

frontend/src/app/services/appConnector.service.ts

@@ -0,0 +1,221 @@
+import { Buffer } from 'buffer'
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable, Injector, NgZone } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { UpgradeModalComponent } from '../components/upgradeModal.component'
+import { Config, Gateway, Version } from 'src/api'
+import { LoginService, CommonService } from 'src/common'
+
+export class SocketProxy {
+    connect$ = new Subject<void>()
+    data$ = new Subject<Uint8Array>()
+    error$ = new Subject<Error>()
+    close$ = new Subject<void>()
+
+    url: string
+    authToken: string
+    webSocket: WebSocket|null
+    initialBuffers: any[] = []
+    options: {
+        host: string
+        port: number
+    }
+
+    private appConnector: AppConnectorService
+    private loginService: LoginService
+    private ngbModal: NgbModal
+    private zone: NgZone
+
+    constructor (
+        injector: Injector,
+    ) {
+        this.appConnector = injector.get(AppConnectorService)
+        this.loginService = injector.get(LoginService)
+        this.ngbModal = injector.get(NgbModal)
+        this.zone = injector.get(NgZone)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    async connect (options: any): Promise<void> {
+        if (!this.loginService.user.is_pro && this.appConnector.sockets.length > this.appConnector.connectionLimit && !window.sessionStorage['upgrade-skip-active']) {
+            let skipped = false
+            try {
+                skipped = await this.zone.run(() => this.ngbModal.open(UpgradeModalComponent)).result
+            } catch { }
+            if (!skipped) {
+                this.close(new Error('Connection limit reached'))
+                return
+            }
+        }
+
+        this.options = options
+        this.url = this.loginService.user.custom_connection_gateway
+        this.authToken = this.loginService.user.custom_connection_gateway_token
+        if (!this.url) {
+            try {
+                const gateway = await this.appConnector.chooseConnectionGateway()
+                this.url = gateway.url
+                this.authToken = gateway.auth_token
+            } catch (err) {
+                this.close(err)
+                return
+            }
+        }
+        try {
+            this.webSocket = new WebSocket(this.url)
+        } catch (err) {
+            this.close(err)
+            return
+        }
+        this.webSocket.onerror = err => {
+            this.close(new Error(`Failed to connect to the connection gateway at ${this.url}`))
+            return
+        }
+        this.webSocket.onmessage = async event => {
+            if (typeof(event.data) === 'string') {
+                this.handleServiceMessage(JSON.parse(event.data))
+            } else {
+                this.data$.next(Buffer.from(await event.data.arrayBuffer()))
+            }
+        }
+        this.webSocket.onclose = () => {
+            this.close()
+        }
+    }
+
+    handleServiceMessage (msg) {
+        if (msg._ === 'hello') {
+            this.sendServiceMessage({
+                _: 'hello',
+                version: 1,
+                auth_token: this.authToken,
+            })
+        } else if (msg._ === 'ready') {
+            this.sendServiceMessage({
+                _: 'connect',
+                host: this.options.host,
+                port: this.options.port,
+            })
+        } else if (msg._ === 'connected') {
+            this.connect$.next()
+            this.connect$.complete()
+            for (const b of this.initialBuffers) {
+                this.webSocket.send(b)
+            }
+            this.initialBuffers = []
+        } else if (msg._ === 'error') {
+            console.error('Connection gateway error', msg)
+            this.close(new Error(msg.details))
+        } else {
+            console.warn('Unknown service message', msg)
+        }
+    }
+
+    sendServiceMessage (msg) {
+        this.webSocket.send(JSON.stringify(msg))
+    }
+
+    write (chunk: Buffer): void {
+        if (!this.webSocket?.readyState) {
+            this.initialBuffers.push(chunk)
+        } else {
+            this.webSocket.send(chunk)
+        }
+    }
+
+    close (error?: Error): void {
+        this.webSocket?.close()
+        if (error) {
+            this.error$.next(error)
+        }
+        this.connect$.complete()
+        this.data$.complete()
+        this.error$.complete()
+        this.close$.next()
+        this.close$.complete()
+    }
+}
+
+@Injectable({ providedIn: 'root' })
+export class AppConnectorService {
+    private configUpdate = new Subject<string>()
+    private config: Config
+    private version: Version
+    connectionLimit = 3
+    sockets: SocketProxy[] = []
+
+    constructor (
+        private injector: Injector,
+        private http: HttpClient,
+        private commonService: CommonService,
+        private zone: NgZone,
+    ) {
+
+        this.configUpdate.pipe(debounceTime(1000)).subscribe(async content => {
+            const result = await this.http.patch(`/api/1/configs/${this.config.id}`, { content }).toPromise()
+            Object.assign(this.config, result)
+        })
+    }
+
+    setState (config: Config, version: Version) {
+        this.config = config
+        this.version = version
+    }
+
+    async loadConfig (): Promise<string> {
+        return this.config.content
+    }
+
+    async saveConfig (content: string): Promise<void> {
+        this.configUpdate.next(content)
+        this.config.content = content
+    }
+
+    getAppVersion (): string {
+        return this.version.version
+    }
+
+    getDistURL (): string {
+        return this.commonService.backendURL + '/app-dist'
+    }
+
+    getPluginsToLoad (): string[] {
+        const loadOrder = [
+            'tabby-core',
+            'tabby-settings',
+            'tabby-terminal',
+            'tabby-ssh',
+            'tabby-community-color-schemes',
+            'tabby-web',
+        ]
+
+        return [
+            ...loadOrder.filter(x => this.version.plugins.includes(x)),
+            ...this.version.plugins.filter(x => !loadOrder.includes(x)),
+        ]
+    }
+
+    createSocket () {
+        return this.zone.run(() => {
+            const socket = new SocketProxy(this.injector)
+            this.sockets.push(socket)
+            socket.close$.subscribe(() => {
+                this.sockets = this.sockets.filter(x => x !== socket)
+            })
+            return socket
+        })
+    }
+
+    async chooseConnectionGateway (): Promise<Gateway> {
+        try {
+            return await this.http.post('/api/1/gateways/choose', {}).toPromise()
+        } catch (err){
+            if (err.status === 503) {
+                throw new Error('All connections gateway are unavailable right now')
+            }
+            throw err
+        }
+    }
+}