wip

frontend/src/api.ts

@@ -4,47 +4,47 @@ import { Resolve } from '@angular/router'
 import { Observable } from 'rxjs'
 
 export interface User {
-    id: number
-    active_config: number
-    active_version: string
-    custom_connection_gateway: string|null
-    custom_connection_gateway_token: string|null
-    config_sync_token: string
-    github_username: string
-    is_pro: boolean
-    is_sponsor: boolean
+  id: number
+  active_config: number
+  active_version: string
+  custom_connection_gateway: string|null
+  custom_connection_gateway_token: string|null
+  config_sync_token: string
+  github_username: string
+  is_pro: boolean
+  is_sponsor: boolean
 }
 
 export interface Config {
-    id: number
-    content: string
-    last_used_with_version: string
-    created_at: Date
-    modified_at: Date
+  id: number
+  content: string
+  last_used_with_version: string
+  created_at: Date
+  modified_at: Date
 }
 
 export interface Version {
-    version: string
-    plugins: string[]
+  version: string
+  plugins: string[]
 }
 
 export interface InstanceInfo {
-    login_enabled: boolean
-    homepage_enabled: boolean
+  login_enabled: boolean
+  homepage_enabled: boolean
 }
 
 export interface Gateway {
-    host: string
-    port: number
-    url: string
-    auth_token: string
+  host: string
+  port: number
+  url: string
+  auth_token: string
 }
 
 @Injectable({ providedIn: 'root' })
 export class InstanceInfoResolver implements Resolve<Observable<InstanceInfo>> {
-    constructor (private http: HttpClient) { }
+  constructor (private http: HttpClient) { }
 
-    resolve(): Observable<InstanceInfo> {
-        return this.http.get('/api/1/instance-info').toPromise()
-    }
+  resolve (): Observable<InstanceInfo> {
+    return this.http.get('/api/1/instance-info').toPromise()
+  }
 }

frontend/src/app.component.ts

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { Component } from '@angular/core'
 
 @Component({
-    selector: 'app',
-    template: '<router-outlet></router-outlet>',
+  selector: 'app',
+  template: '<router-outlet></router-outlet>',
 })
 export class AppComponent { }

frontend/src/app.module.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
@@ -15,38 +16,38 @@ import { CommonAppModule } from 'src/common'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 
 const ROUTES = [
-    {
-        path: '',
-        loadChildren: () => import(/* webpackChunkName: "homepage" */'./homepage').then(m => m.HomepageModule),
-    },
-    {
-        path: 'app',
-        loadChildren: () => import(/* webpackChunkName: "app" */'./app').then(m => m.ApplicationModule),
-    },
-    {
-        path: 'login',
-        loadChildren: () => import(/* webpackChunkName: "login" */'./login').then(m => m.LoginModule),
-    },
+  {
+    path: '',
+    loadChildren: () => import(/* webpackChunkName: "homepage" */'./homepage').then(m => m.HomepageModule),
+  },
+  {
+    path: 'app',
+    loadChildren: () => import(/* webpackChunkName: "app" */'./app').then(m => m.ApplicationModule),
+  },
+  {
+    path: 'login',
+    loadChildren: () => import(/* webpackChunkName: "login" */'./login').then(m => m.LoginModule),
+  },
 ]
 
 @NgModule({
-    imports: [
-        BrowserModule.withServerTransition({
-            appId: 'tabby',
-        }),
-        CommonAppModule.forRoot(),
-        TransferHttpCacheModule,
-        BrowserAnimationsModule,
-        CommonModule,
-        FormsModule,
-        FontAwesomeModule,
-        ClipboardModule,
-        HttpClientModule,
-        RouterModule.forRoot(ROUTES),
-    ],
-    declarations: [
-        AppComponent,
-    ],
-    bootstrap: [AppComponent],
+  imports: [
+    BrowserModule.withServerTransition({
+      appId: 'tabby',
+    }),
+    CommonAppModule.forRoot(),
+    TransferHttpCacheModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    FontAwesomeModule,
+    ClipboardModule,
+    HttpClientModule,
+    RouterModule.forRoot(ROUTES),
+  ],
+  declarations: [
+    AppComponent,
+  ],
+  bootstrap: [AppComponent],
 })
 export class AppModule { }

frontend/src/app.server.module.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { NgModule } from '@angular/core'
 import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'
 import { AppModule } from './app.module'

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

@@ -6,51 +6,51 @@ import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-ico
 import { Config, Version } from 'src/api'
 
 @Component({
-    selector: 'config-modal',
-    templateUrl: './configModal.component.pug',
-    // styleUrls: ['./settingsModal.component.scss'],
+  selector: 'config-modal',
+  templateUrl: './configModal.component.pug',
+  // styleUrls: ['./settingsModal.component.scss'],
 })
 export class ConfigModalComponent {
-    _addIcon = faPlus
-    _copyIcon = faCopy
-    _deleteIcon = faTrash
-    _configIcon = faFile
+  _addIcon = faPlus
+  _copyIcon = faCopy
+  _deleteIcon = faTrash
+  _configIcon = faFile
 
-    constructor (
-        private modalInstance: NgbActiveModal,
-        public appConnector: AppConnectorService,
-        public configService: ConfigService,
-    ) {
-    }
+  constructor (
+    private modalInstance: NgbActiveModal,
+    public appConnector: AppConnectorService,
+    public configService: ConfigService,
+  ) {
+  }
 
-    async ngOnInit () {
-    }
+  cancel () {
+    this.modalInstance.dismiss()
+  }
 
-    cancel () {
-        this.modalInstance.dismiss()
-    }
+  async createNewConfig () {
+    const config = await this.configService.createNewConfig()
+    await this.configService.selectConfig(config)
+    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 selectConfig (config: Config) {
-        await this.configService.selectConfig(config)
-        this.modalInstance.dismiss()
-    }
+  async selectVersion (version: Version) {
+    await this.configService.selectVersion(version)
+    this.modalInstance.dismiss()
+  }
 
-    async selectVersion (version: Version) {
-        await this.configService.selectVersion(version)
-        this.modalInstance.dismiss()
+  async deleteConfig () {
+    if (!this.configService.activeConfig) {
+      return
     }
-
-    async deleteConfig () {
-        if (confirm('Delete this config? This cannot be undone.')) {
-            await this.configService.deleteConfig(this.configService.activeConfig)
-        }
-        this.configService.selectDefaultConfig()
-        this.modalInstance.dismiss()
+    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.ts

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

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

@@ -12,96 +12,96 @@ import { combineLatest } from 'rxjs'
 import { Config, Version } from 'src/api'
 
 @Component({
-    selector: 'main',
-    templateUrl: './main.component.pug',
-    styleUrls: ['./main.component.scss'],
+  selector: 'main',
+  templateUrl: './main.component.pug',
+  styleUrls: ['./main.component.scss'],
 })
 export class MainComponent {
-    _logo = require('../../../assets/logo.svg')
-    _settingsIcon = faCog
-    _loginIcon = faSignInAlt
-    _logoutIcon = faSignOutAlt
-    _addIcon = faPlus
-    _configIcon = faFile
-    _saveIcon = faSave
+  _logo = require('../../../assets/logo.svg')
+  _settingsIcon = faCog
+  _loginIcon = faSignInAlt
+  _logoutIcon = faSignOutAlt
+  _addIcon = faPlus
+  _configIcon = faFile
+  _saveIcon = faSave
 
-    showApp = false
+  showApp = false
 
-    @ViewChild('iframe') iframe: ElementRef
+  @ViewChild('iframe') iframe: ElementRef
 
-    constructor (
-        titleService: Title,
-        public appConnector: AppConnectorService,
-        private http: HttpClient,
-        public loginService: LoginService,
-        private ngbModal: NgbModal,
-        private config: ConfigService,
-    ) {
-        titleService.setTitle('Tabby')
-        window.addEventListener('message', this.connectorRequestHandler)
+  constructor (
+    titleService: Title,
+    public appConnector: AppConnectorService,
+    private http: HttpClient,
+    public loginService: LoginService,
+    private ngbModal: NgbModal,
+    private config: ConfigService,
+  ) {
+    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', '*')
     }
+  }
 
-    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()
+
+    combineLatest(
+      this.config.activeConfig$,
+      this.config.activeVersion$
+    ).subscribe(([config, version]) => {
+      if (config && version) {
+        this.reloadApp(config, version)
+      }
+    })
+
+    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'
+    if (this.loginService.user) {
+      await this.http.patch(`/api/1/configs/${config.id}`, {
+        last_used_with_version: version.version,
+      }).toPromise()
     }
+  }
 
-    async ngAfterViewInit () {
-        await this.loginService.ready$.toPromise()
+  reloadApp (config: Config, version: Version) {
+    // TODO check config incompatibility
+    this.unloadApp()
+    setTimeout(() => {
+      this.appConnector.setState(config, version)
+      this.loadApp(config, version)
+    })
+  }
 
-        combineLatest(
-            this.config.activeConfig$,
-            this.config.activeVersion$
-        ).subscribe(([config, version]) => {
-            if (config && version) {
-                this.reloadApp(config, version)
-            }
-        })
+  async openConfig () {
+    await this.ngbModal.open(ConfigModalComponent).result
+  }
 
-        await this.config.ready$.toPromise()
-        await this.config.selectDefaultConfig()
-    }
+  async openSettings () {
+    await this.ngbModal.open(SettingsModalComponent).result
+  }
 
-    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'
-        if (this.loginService.user) {
-            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 = '/'
-    }
+  async logout () {
+    await this.http.post('/api/1/auth/logout', null).toPromise()
+    location.href = '/'
+  }
 }

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

@@ -7,36 +7,36 @@ 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',
+  selector: 'settings-modal',
+  templateUrl: './settingsModal.component.pug',
 })
 export class SettingsModalComponent {
-    user: User
-    customGatewayEnabled = false
-    _githubIcon = faGithub
-    _copyIcon = faCopy
-    _okIcon = faCheck
+  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
+  constructor (
+    public appConnector: AppConnectorService,
+    public commonService: CommonService,
+    private modalInstance: NgbActiveModal,
+    private loginService: LoginService,
+  ) {
+    if (!loginService.user) {
+      return
     }
+    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()
+  }
 
-    async apply () {
-        Object.assign(this.loginService.user, this.user)
-        this.modalInstance.close()
-        await this.loginService.updateUser()
-    }
-
-    cancel () {
-        this.modalInstance.dismiss()
-    }
+  cancel () {
+    this.modalInstance.dismiss()
+  }
 }

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

@@ -8,28 +8,28 @@ import { CommonService, LoginService } from 'src/common'
 import { User } from 'src/api'
 
 @Component({
-    selector: 'upgrade-modal',
-    templateUrl: './upgradeModal.component.pug',
+  selector: 'upgrade-modal',
+  templateUrl: './upgradeModal.component.pug',
 })
 export class UpgradeModalComponent {
-    user: User
-    _githubIcon = faGithub
-    _loveIcon = faHeart
-    _giftIcon = faGift
-    canSkip = false
+  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']
-    }
+  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)
-    }
+  skipOnce () {
+    window.localStorage['upgrade-modal-skipped'] = true
+    window.sessionStorage['upgrade-skip-active'] = true
+    this.modalInstance.close(true)
+  }
 }

frontend/src/app/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { NgModule } from '@angular/core'
 import { NgbDropdownModule, NgbModalModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { CommonModule } from '@angular/common'
@@ -15,33 +16,33 @@ import { InstanceInfoResolver } from 'src/api'
 import { CommonAppModule } from 'src/common'
 
 const ROUTES = [
-    {
-        path: '',
-        component: MainComponent,
-        resolve: {
-            instanceInfo: InstanceInfoResolver,
-        },
+  {
+    path: '',
+    component: MainComponent,
+    resolve: {
+      instanceInfo: InstanceInfoResolver,
     },
+  },
 ]
 
 @NgModule({
-    imports: [
-        CommonAppModule,
-        CommonModule,
-        FormsModule,
-        NgbDropdownModule,
-        NgbModalModule,
-        NgbTooltipModule,
-        ClipboardModule,
-        FontAwesomeModule,
-        RouterModule.forChild(ROUTES),
-    ],
-    declarations: [
-        MainComponent,
-        ConfigModalComponent,
-        SettingsModalComponent,
-        ConnectionListComponent,
-        UpgradeModalComponent,
-    ],
+  imports: [
+    CommonAppModule,
+    CommonModule,
+    FormsModule,
+    NgbDropdownModule,
+    NgbModalModule,
+    NgbTooltipModule,
+    ClipboardModule,
+    FontAwesomeModule,
+    RouterModule.forChild(ROUTES),
+  ],
+  declarations: [
+    MainComponent,
+    ConfigModalComponent,
+    SettingsModalComponent,
+    ConnectionListComponent,
+    UpgradeModalComponent,
+  ],
 })
 export class ApplicationModule { }

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

@@ -8,217 +8,226 @@ import { UpgradeModalComponent } from '../components/upgradeModal.component'
 import { Config, Gateway, Version } from 'src/api'
 import { LoginService, CommonService } from 'src/common'
 
+export interface ServiceMessage {
+  _: string
+  [k: string]: any
+}
+
 export class SocketProxy {
-    connect$ = new Subject<void>()
-    data$ = new Subject<Uint8Array>()
-    error$ = new Subject<Error>()
-    close$ = new Subject<void>()
+  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
+  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
+      }
     }
 
-    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)
+    this.options = options
+    if (this.loginService.user?.custom_connection_gateway) {
+      this.url = this.loginService.user.custom_connection_gateway
     }
-
-    // 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()
-        }
+    if (this.loginService.user?.custom_connection_gateway_token) {
+      this.authToken = this.loginService.user.custom_connection_gateway_token
     }
-
-    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)
-        }
+    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
+      }
     }
-
-    sendServiceMessage (msg) {
-        this.webSocket.send(JSON.stringify(msg))
+    try {
+      this.webSocket = new WebSocket(this.url)
+    } catch (err) {
+      this.close(err)
+      return
     }
-
-    write (chunk: Buffer): void {
-        if (!this.webSocket?.readyState) {
-            this.initialBuffers.push(chunk)
-        } else {
-            this.webSocket.send(chunk)
-        }
+    this.webSocket.onerror = () => {
+      this.close(new Error(`Failed to connect to the connection gateway at ${this.url}`))
+      return
     }
-
-    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()
+    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: ServiceMessage): void {
+    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: ServiceMessage): void {
+    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[] = []
+  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,
-        private loginService: LoginService,
-    ) {
+  constructor (
+    private injector: Injector,
+    private http: HttpClient,
+    private commonService: CommonService,
+    private zone: NgZone,
+    private loginService: LoginService,
+  ) {
 
-        this.configUpdate.pipe(debounceTime(1000)).subscribe(async content => {
-            if (this.loginService.user) {
-                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
-        }
+    this.configUpdate.pipe(debounceTime(1000)).subscribe(async content => {
+      if (this.loginService.user) {
+        const result = await this.http.patch(`/api/1/configs/${this.config.id}`, { content }).toPromise()
+        Object.assign(this.config, result)
+      }
+    })
+  }
+
+  setState (config: Config, version: Version): void {
+    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 (): SocketProxy {
+    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 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
     }
+  }
 }

frontend/src/common/index.ts

@@ -1,22 +1,23 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { ModuleWithProviders, NgModule } from '@angular/core'
 import { HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http'
 import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor'
 
 @NgModule({
-    imports: [
-        HttpClientXsrfModule,
-    ],
+  imports: [
+    HttpClientXsrfModule,
+  ],
 })
 export class CommonAppModule {
-    static forRoot (): ModuleWithProviders<CommonAppModule> {
-        return {
-            ngModule: CommonAppModule,
-            providers: [
-                { provide: HTTP_INTERCEPTORS, useClass: UniversalInterceptor, multi: true },
-                { provide: HTTP_INTERCEPTORS, useClass: BackendXsrfInterceptor, multi: true },
-            ]
-        }
+  static forRoot (): ModuleWithProviders<CommonAppModule> {
+    return {
+      ngModule: CommonAppModule,
+      providers: [
+        { provide: HTTP_INTERCEPTORS, useClass: UniversalInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: BackendXsrfInterceptor, multi: true },
+      ],
     }
+  }
 }
 
 export { LoginService } from './services/login.service'

frontend/src/common/interceptor.ts

@@ -5,34 +5,34 @@ import { CommonService } from './services/common.service'
 
 @Injectable({ providedIn: 'root' })
 export class UniversalInterceptor implements HttpInterceptor {
-    constructor (private commonService: CommonService) { }
+  constructor (private commonService: CommonService) { }
 
-    intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        if (!request.url.startsWith('//') && request.url.startsWith('/')) {
-            const endpoint = request.url
-            request = request.clone({
-                url: `${this.commonService.backendURL}${endpoint}`,
-                withCredentials: true,
-            })
-        }
-        return next.handle(request)
+  intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (!request.url.startsWith('//') && request.url.startsWith('/')) {
+      const endpoint = request.url
+      request = request.clone({
+        url: `${this.commonService.backendURL}${endpoint}`,
+        withCredentials: true,
+      })
     }
+    return next.handle(request)
+  }
 }
 
 @Injectable({ providedIn: 'root' })
 export class BackendXsrfInterceptor implements HttpInterceptor {
-    constructor (
-        private commonService: CommonService,
-        private tokenExtractor: HttpXsrfTokenExtractor,
-    ) { }
+  constructor (
+    private commonService: CommonService,
+    private tokenExtractor: HttpXsrfTokenExtractor,
+  ) { }
 
-    intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        if (this.commonService.backendURL && req.url.startsWith(this.commonService.backendURL)) {
-            let token = this.tokenExtractor.getToken() as string;
-            if (token !== null) {
-                req = req.clone({ setHeaders: { 'X-XSRF-TOKEN': token } });
-            }
-        }
-        return next.handle(req);
+  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (this.commonService.backendURL && req.url.startsWith(this.commonService.backendURL)) {
+      const token = this.tokenExtractor.getToken()
+      if (token !== null) {
+        req = req.clone({ setHeaders: { 'X-XSRF-TOKEN': token } })
+      }
     }
+    return next.handle(req)
+  }
 }

frontend/src/common/services/common.service.ts

@@ -2,24 +2,24 @@ import { Inject, Injectable, Optional } from '@angular/core'
 
 @Injectable({ providedIn: 'root' })
 export class CommonService {
-    backendURL: string
+  backendURL: string
 
-    constructor (@Inject('BACKEND_URL') @Optional() ssrBackendURL: string) {
-        const tag = (document.querySelector('meta[property=x-tabby-web-backend-url]') as HTMLMetaElement)
-        if (ssrBackendURL) {
-            this.backendURL = ssrBackendURL
-            tag.content = ssrBackendURL
-        } else {
-            if (tag.content && !tag.content.startsWith('{{')) {
-                this.backendURL = tag.content
-            } else {
-                this.backendURL = ''
-            }
-        }
-
-        console.log(this.backendURL)
-        if (this.backendURL.endsWith('/')) {
-            this.backendURL = this.backendURL.slice(0, -1)
-        }
+  constructor (@Inject('BACKEND_URL') @Optional() ssrBackendURL: string) {
+    const tag = document.querySelector('meta[property=x-tabby-web-backend-url]')! as HTMLMetaElement
+    if (ssrBackendURL) {
+      this.backendURL = ssrBackendURL
+      tag.content = ssrBackendURL
+    } else {
+      if (tag.content && !tag.content.startsWith('{{')) {
+        this.backendURL = tag.content
+      } else {
+        this.backendURL = ''
+      }
     }
+
+    console.log(this.backendURL)
+    if (this.backendURL.endsWith('/')) {
+      this.backendURL = this.backendURL.slice(0, -1)
+    }
+  }
 }

frontend/src/common/services/config.service.ts

@@ -8,113 +8,113 @@ import { LoginService } from './login.service'
 
 @Injectable({ providedIn: 'root' })
 export class ConfigService {
-    activeConfig$ = new Subject<Config>()
-    activeVersion$ = new Subject<Version>()
-    user: User
+  activeConfig$ = new Subject<Config>()
+  activeVersion$ = new Subject<Version>()
+  user: User
 
-    configs: Config[] = []
-    versions: Version[] = []
-    ready$ = new AsyncSubject<void>()
+  configs: Config[] = []
+  versions: Version[] = []
+  ready$ = new AsyncSubject<void>()
 
-    get activeConfig (): Config { return this._activeConfig }
-    get activeVersion (): Version { return this._activeVersion }
+  get activeConfig (): Config | null { return this._activeConfig }
+  get activeVersion (): Version | null { return this._activeVersion }
 
-    private _activeConfig: Config|null = null
-    private _activeVersion: Version|null = null
+  private _activeConfig: Config|null = null
+  private _activeVersion: Version|null = null
 
-    constructor (
-        private http: HttpClient,
-        private loginService: LoginService,
-    ) {
-        this.init()
+  constructor (
+    private http: HttpClient,
+    private loginService: LoginService,
+  ) {
+    this.init()
+  }
+
+  async updateUser (): Promise<void> {
+    if (!this.loginService.user) {
+      return
+    }
+    await this.http.put('/api/1/user', this.user).toPromise()
+  }
+
+  async createNewConfig (): Promise<Config> {
+    const configData = {
+      content: '{}',
+      last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion().version,
+    }
+    if (!this.loginService.user) {
+      const config = {
+        id: Date.now(),
+        name: `Temporary config at ${new Date()}`,
+        created_at: new Date(),
+        modified_at: new Date(),
+        ...configData,
+      }
+      this.configs.push(config)
+      return config
+    }
+    const config = await this.http.post('/api/1/configs', configData).toPromise()
+    this.configs.push(config)
+    return config
+  }
+
+  getLatestStableVersion (): Version {
+    return this.versions[0]
+  }
+
+  async duplicateActiveConfig (): Promise<void> {
+    let copy = { ...this._activeConfig, pk: undefined, id: undefined }
+    if (this.loginService.user) {
+      copy = await this.http.post('/api/1/configs', copy).toPromise()
+    }
+    this.configs.push(copy as any)
+  }
+
+  async selectVersion (version: Version): Promise<void> {
+    this._activeVersion = version
+    this.activeVersion$.next(version)
+  }
+
+  async selectConfig (config: Config): Promise<void> {
+    let matchingVersion = this.versions.find(x => x.version === config.last_used_with_version)
+    if (!matchingVersion) {
+      // TODO ask to upgrade
+      matchingVersion = this.versions[0]
     }
 
-    async updateUser () {
-        if (!this.loginService.user) {
-            return
-        }
-        await this.http.put('/api/1/user', this.user).toPromise()
+    this._activeConfig = config
+    this.activeConfig$.next(config)
+    this.selectVersion(matchingVersion)
+    if (this.loginService.user) {
+      this.loginService.user.active_config = config.id
+      await this.loginService.updateUser()
+    }
+  }
+
+  async selectDefaultConfig (): Promise<void> {
+    await this.ready$.toPromise()
+    await this.loginService.ready$.toPromise()
+    this.selectConfig(this.configs.find(c => c.id === this.loginService.user?.active_config) ?? this.configs[0])
+  }
+
+  async deleteConfig (config: Config): Promise<void> {
+    if (this.loginService.user) {
+      await this.http.delete(`/api/1/configs/${config.id}`).toPromise()
+    }
+    this.configs = this.configs.filter(x => x.id !== config.id)
+  }
+
+  private async init () {
+    if (this.loginService.user) {
+      this.configs = await this.http.get('/api/1/configs').toPromise()
+    }
+    this.versions = await this.http.get('/api/1/versions').toPromise()
+    this.versions.sort((a, b) => -semverCompare(a.version, b.version))
+
+    if (!this.configs.length) {
+      await this.createNewConfig()
     }
 
-    async createNewConfig (): Promise<Config> {
-        const configData = {
-            content: '{}',
-            last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion().version,
-        }
-        if (!this.loginService.user) {
-            const config = {
-                id: Date.now(),
-                name: `Temporary config at ${new Date()}`,
-                created_at: new Date(),
-                modified_at: new Date(),
-                ...configData,
-            }
-            this.configs.push(config)
-            return config
-        }
-        const config = await this.http.post('/api/1/configs', configData).toPromise()
-        this.configs.push(config)
-        return config
-    }
-
-    getLatestStableVersion () {
-        return this.versions[0]
-    }
-
-    async duplicateActiveConfig () {
-        let copy = {...this._activeConfig, pk: undefined, id: undefined}
-        if (this.loginService.user) {
-            copy = await this.http.post('/api/1/configs', copy).toPromise()
-        }
-        this.configs.push(copy)
-    }
-
-    async selectVersion (version: Version) {
-        this._activeVersion = version
-        this.activeVersion$.next(version)
-    }
-
-    async selectConfig (config: Config) {
-        let matchingVersion = this.versions.find(x => x.version === config.last_used_with_version)
-        if (!matchingVersion) {
-            // TODO ask to upgrade
-            matchingVersion = this.versions[0]
-        }
-
-        this._activeConfig = config
-        this.activeConfig$.next(config)
-        this.selectVersion(matchingVersion)
-        if (this.loginService.user) {
-            this.loginService.user.active_config = config.id
-            await this.loginService.updateUser()
-        }
-    }
-
-    async selectDefaultConfig () {
-        await this.ready$.toPromise()
-        await this.loginService.ready$.toPromise()
-        this.selectConfig(this.configs.find(c => c.id === this.loginService.user?.active_config) ?? this.configs[0])
-    }
-
-    async deleteConfig (config: Config) {
-        if (this.loginService.user) {
-            await this.http.delete(`/api/1/configs/${config.id}`).toPromise()
-        }
-        this.configs = this.configs.filter(x => x.id !== config.id)
-    }
-
-    private async init () {
-        if (this.loginService.user) {
-            this.configs = await this.http.get('/api/1/configs').toPromise()
-        }
-        this.versions = await this.http.get('/api/1/versions').toPromise()
-        this.versions.sort((a, b) => -semverCompare(a.version, b.version))
-
-        if (!this.configs.length) {
-            await this.createNewConfig()
-        }
-
-        this.ready$.next()
-        this.ready$.complete()
-    }
+    this.ready$.next()
+    this.ready$.complete()
+  }
 }

frontend/src/common/services/login.service.ts

@@ -6,28 +6,28 @@ import { User } from '../../api'
 
 @Injectable({ providedIn: 'root' })
 export class LoginService {
-    user: User | null
-    ready$ = new AsyncSubject<void>()
+  user: User | null
+  ready$ = new AsyncSubject<void>()
 
-    constructor (private http: HttpClient) {
-        this.init()
+  constructor (private http: HttpClient) {
+    this.init()
+  }
+
+  async updateUser (): Promise<void> {
+    if (!this.user) {
+      return
+    }
+    await this.http.put('/api/1/user', this.user).toPromise()
+  }
+
+  private async init () {
+    try {
+      this.user = await this.http.get('/api/1/user').toPromise()
+    } catch {
+      this.user = null
     }
 
-    async updateUser () {
-        if (!this.user) {
-            return
-        }
-        await this.http.put('/api/1/user', this.user).toPromise()
-    }
-
-    private async init () {
-        try {
-            this.user = await this.http.get('/api/1/user').toPromise()
-        } catch {
-            this.user = null
-        }
-
-        this.ready$.next()
-        this.ready$.complete()
-    }
+    this.ready$.next()
+    this.ready$.complete()
+  }
 }

frontend/src/homepage/components/demoTerminal.component.ts

@@ -6,97 +6,97 @@ import { Version } from 'src/api'
 import { CommonService } from 'src/common'
 
 class DemoConnector {
-    constructor (
-        targetWindow: Window,
-        private commonService: CommonService,
-        private version: Version,
-    ) {
-        targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
-    }
+  constructor (
+    targetWindow: Window,
+    private commonService: CommonService,
+    private version: Version,
+  ) {
+    targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
+  }
 
-    async loadConfig (): Promise<string> {
-        return `{
+  async loadConfig (): Promise<string> {
+    return `{
             recoverTabs: false,
             web: {
                 preventAccidentalTabClosure: false,
             },
         }`
-    }
+  }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    async saveConfig (_content: string): Promise<void> { }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async saveConfig (_content: string): Promise<void> { }
 
-    getAppVersion (): string {
-        return this.version.version
-    }
+  getAppVersion (): string {
+    return this.version.version
+  }
 
-    getDistURL (): string {
-        return this.commonService.backendURL + '/app-dist'
-    }
+  getDistURL (): string {
+    return this.commonService.backendURL + '/app-dist'
+  }
 
-    getPluginsToLoad (): string[] {
-        return [
-            'tabby-core',
-            'tabby-settings',
-            'tabby-terminal',
-            'tabby-community-color-schemes',
-            'tabby-ssh',
-            'tabby-telnet',
-            'tabby-web',
-            'tabby-web-demo',
-        ]
-    }
+  getPluginsToLoad (): string[] {
+    return [
+      'tabby-core',
+      'tabby-settings',
+      'tabby-terminal',
+      'tabby-community-color-schemes',
+      'tabby-ssh',
+      'tabby-telnet',
+      'tabby-web',
+      'tabby-web-demo',
+    ]
+  }
 
-    createSocket () {
-        return new DemoSocketProxy()
-    }
+  createSocket () {
+    return new DemoSocketProxy()
+  }
 }
 
 
 export class DemoSocketProxy {
-    connect$ = new Subject<void>()
-    data$ = new Subject<Buffer>()
-    error$ = new Subject<Buffer>()
-    close$ = new Subject<Buffer>()
+  connect$ = new Subject<void>()
+  data$ = new Subject<Buffer>()
+  error$ = new Subject<Buffer>()
+  close$ = new Subject<Buffer>()
 
-    async connect (options) {
-        this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
-    }
+  async connect () {
+    this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
+  }
 }
 
 @Component({
-    selector: 'demo-terminal',
-    template: '<iframe #iframe></iframe>',
-    styleUrls: ['./demoTerminal.component.scss'],
+  selector: 'demo-terminal',
+  template: '<iframe #iframe></iframe>',
+  styleUrls: ['./demoTerminal.component.scss'],
 })
 export class DemoTerminalComponent {
-    @ViewChild('iframe') iframe: ElementRef
-    connector: DemoConnector
+  @ViewChild('iframe') iframe: ElementRef
+  connector: DemoConnector
 
 
-    constructor (
-        private http: HttpClient,
-        private commonService: CommonService,
-    ) {
-        window.addEventListener('message', this.connectorRequestHandler)
+  constructor (
+    private http: HttpClient,
+    private commonService: CommonService,
+  ) {
+    window.addEventListener('message', this.connectorRequestHandler)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  connectorRequestHandler = event => {
+    if (event.data === 'request-connector') {
+      this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
+      this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
     }
+  }
 
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    connectorRequestHandler = event => {
-        if (event.data === 'request-connector') {
-            this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
-            this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
-        }
-    }
+  async ngAfterViewInit (): Promise<void> {
+    const versions = await this.http.get('/api/1/versions').toPromise()
+    versions.sort((a, b) => -semverCompare(a.version, b.version))
+    this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0])
+    this.iframe.nativeElement.src = '/terminal'
+  }
 
-    async ngAfterViewInit (): Promise<void> {
-        const versions = await this.http.get('/api/1/versions').toPromise()
-        versions.sort((a, b) => -semverCompare(a.version, b.version))
-        this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0])
-        this.iframe.nativeElement.src = '/terminal'
-    }
-
-    ngOnDestroy (): void {
-        window.removeEventListener('message', this.connectorRequestHandler)
-    }
+  ngOnDestroy (): void {
+    window.removeEventListener('message', this.connectorRequestHandler)
+  }
 }

frontend/src/homepage/components/home.component.ts

@@ -6,60 +6,60 @@ import { InstanceInfo } from 'src/api'
 
 
 @Component({
-    selector: 'home',
-    templateUrl: './home.component.pug',
-    styleUrls: ['./home.component.scss'],
+  selector: 'home',
+  templateUrl: './home.component.pug',
+  styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-    githubURL = 'https://github.com/Eugeny/tabby'
-    releaseURL = `${this.githubURL}/releases/latest`
-    donationURL = 'https://ko-fi.com/eugeny'
+  githubURL = 'https://github.com/Eugeny/tabby'
+  releaseURL = `${this.githubURL}/releases/latest`
+  donationURL = 'https://ko-fi.com/eugeny'
 
-    _logo = require('../../../assets/logo.svg')
-    _downloadIcon = faDownload
-    _loginIcon = faSignInAlt
-    _donateIcon = faCoffee
+  _logo = require('../../../assets/logo.svg')
+  _downloadIcon = faDownload
+  _loginIcon = faSignInAlt
+  _donateIcon = faCoffee
 
-    navLinks = [
-        {
-            title: 'About Tabby',
-            link: '/'
-        },
-        {
-            title: 'Features',
-            link: '/features'
-        },
-    ]
+  navLinks = [
+    {
+      title: 'About Tabby',
+      link: '/',
+    },
+    {
+      title: 'Features',
+      link: '/features',
+    },
+  ]
 
-    instanceInfo: InstanceInfo
+  instanceInfo: InstanceInfo
 
-    background: Waves|undefined
+  background: Waves|undefined
 
-    constructor (
-        public route: ActivatedRoute,
-        public router: Router,
-    ) {
-        this.instanceInfo = route.snapshot.data.instanceInfo
-        if (!this.instanceInfo.homepage_enabled) {
-            router.navigate(['/app'])
-        }
+  constructor (
+    public route: ActivatedRoute,
+    public router: Router,
+  ) {
+    this.instanceInfo = route.snapshot.data.instanceInfo
+    if (!this.instanceInfo.homepage_enabled) {
+      router.navigate(['/app'])
     }
+  }
 
-    async ngAfterViewInit (): Promise<void> {
-        this.background = new Waves({
-            el: 'body',
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x70f
-        })
-    }
+  async ngAfterViewInit (): Promise<void> {
+    this.background = new Waves({
+      el: 'body',
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      scale: 1.00,
+      scaleMobile: 1.00,
+      color: 0x70f,
+    })
+  }
 
-    ngOnDestroy () {
-        this.background?.destroy()
-    }
+  ngOnDestroy () {
+    this.background?.destroy()
+  }
 }

frontend/src/homepage/components/homeFeatures.component.ts

@@ -1,23 +1,23 @@
 import { Component } from '@angular/core'
 
 @Component({
-    selector: 'home-features',
-    templateUrl: './homeFeatures.component.pug',
-    styleUrls: ['./homeFeatures.component.scss'],
+  selector: 'home-features',
+  templateUrl: './homeFeatures.component.pug',
+  styleUrls: ['./homeFeatures.component.scss'],
 })
 export class HomeFeaturesComponent {
-    screenshots = {
-        progress: require('assets/screenshots/progress.png'),
-        zmodem: require('assets/screenshots/zmodem.png'),
-        colors: require('assets/screenshots/colors.png'),
-        hotkeys: require('assets/screenshots/hotkeys.png'),
-        ports: require('assets/screenshots/ports.png'),
-        ssh2: require('assets/screenshots/ssh2.png'),
-        fonts: require('assets/screenshots/fonts.png'),
-        history: require('assets/screenshots/history.png'),
-        paste: require('assets/screenshots/paste.png'),
-        quake: require('assets/screenshots/quake.png'),
-        split: require('assets/screenshots/split.png'),
-        profiles: require('assets/screenshots/profiles.png'),
-    }
+  screenshots = {
+    progress: require('assets/screenshots/progress.png'),
+    zmodem: require('assets/screenshots/zmodem.png'),
+    colors: require('assets/screenshots/colors.png'),
+    hotkeys: require('assets/screenshots/hotkeys.png'),
+    ports: require('assets/screenshots/ports.png'),
+    ssh2: require('assets/screenshots/ssh2.png'),
+    fonts: require('assets/screenshots/fonts.png'),
+    history: require('assets/screenshots/history.png'),
+    paste: require('assets/screenshots/paste.png'),
+    quake: require('assets/screenshots/quake.png'),
+    split: require('assets/screenshots/split.png'),
+    profiles: require('assets/screenshots/profiles.png'),
+  }
 }

frontend/src/homepage/components/homeIndex.component.ts

@@ -3,22 +3,22 @@ import { faDownload } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
 @Component({
-    selector: 'home-index',
-    templateUrl: './homeIndex.component.pug',
-    styleUrls: ['./homeIndex.component.scss'],
+  selector: 'home-index',
+  templateUrl: './homeIndex.component.pug',
+  styleUrls: ['./homeIndex.component.scss'],
 })
 export class HomeIndexComponent {
-    githubURL = 'https://github.com/Eugeny/tabby'
-    releaseURL = `${this.githubURL}/releases/latest`
+  githubURL = 'https://github.com/Eugeny/tabby'
+  releaseURL = `${this.githubURL}/releases/latest`
 
-    _downloadIcon = faDownload
-    _githubIcon = faGithub
+  _downloadIcon = faDownload
+  _githubIcon = faGithub
 
-    screenshots = {
-        window: require('assets/screenshots/window.png'),
-        tabs: require('assets/screenshots/tabs.png'),
-        ssh: require('assets/screenshots/ssh.png'),
-        serial: require('assets/screenshots/serial.png'),
-        win: require('assets/screenshots/win.png'),
-    }
+  screenshots = {
+    window: require('assets/screenshots/window.png'),
+    tabs: require('assets/screenshots/tabs.png'),
+    ssh: require('assets/screenshots/ssh.png'),
+    serial: require('assets/screenshots/serial.png'),
+    win: require('assets/screenshots/win.png'),
+  }
 }

frontend/src/homepage/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { NgModule } from '@angular/core'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { CommonModule } from '@angular/common'
@@ -14,40 +15,40 @@ import { InstanceInfoResolver } from 'src/api'
 import { CommonAppModule } from 'src/common'
 
 const ROUTES = [
-    {
-        path: '',
-        component: HomeComponent,
-        resolve: {
-            instanceInfo: InstanceInfoResolver,
-        },
-        children: [
-            {
-                path: '',
-                component: HomeIndexComponent,
-            },
-            {
-                path: 'features',
-                component: HomeFeaturesComponent,
-            },
-        ],
+  {
+    path: '',
+    component: HomeComponent,
+    resolve: {
+      instanceInfo: InstanceInfoResolver,
     },
+    children: [
+      {
+        path: '',
+        component: HomeIndexComponent,
+      },
+      {
+        path: 'features',
+        component: HomeFeaturesComponent,
+      },
+    ],
+  },
 ]
 
 @NgModule({
-    imports: [
-        CommonAppModule,
-        CommonModule,
-        FormsModule,
-        NgbNavModule,
-        FontAwesomeModule,
-        NgxImageZoomModule,
-        RouterModule.forChild(ROUTES),
-    ],
-    declarations: [
-        HomeComponent,
-        HomeIndexComponent,
-        HomeFeaturesComponent,
-        DemoTerminalComponent,
-    ],
+  imports: [
+    CommonAppModule,
+    CommonModule,
+    FormsModule,
+    NgbNavModule,
+    FontAwesomeModule,
+    NgxImageZoomModule,
+    RouterModule.forChild(ROUTES),
+  ],
+  declarations: [
+    HomeComponent,
+    HomeIndexComponent,
+    HomeFeaturesComponent,
+    DemoTerminalComponent,
+  ],
 })
 export class HomepageModule { }

frontend/src/homepage/vanta/_base.js

@@ -1,17 +1,18 @@
-import {extend, mobileCheck, q, color2Hex} from 'vanta/src/helpers.js'
+/* eslint-disable */
+import { extend, mobileCheck, q, color2Hex } from 'vanta/src/helpers.js'
 // const DEBUGMODE = window.location.toString().indexOf('VANTADEBUG') !== -1
 
 const win = typeof window == 'object'
-if (win && !window.VANTA) window.VANTA = {}
-const VANTA = (win && window.VANTA) || {}
+if (win && !window.VANTA) {window.VANTA = {}}
+const VANTA = win && window.VANTA || {}
 VANTA.register = (name, Effect) => {
   return VANTA[name] = (opts) => new Effect(opts)
 }
 VANTA.version = '0.5.21'
 
-export {VANTA}
+export { VANTA }
 
-import { AxisHelper, js, MOUSE, OrbitControls, Scene, WebGLRenderer } from 'three/src/Three'
+import { Scene, WebGLRenderer } from 'three/src/Three'
 // const ORBITCONTROLS = {
 //   enableZoom: false,
 //   userPanSpeed: 3,
@@ -33,14 +34,14 @@ import { AxisHelper, js, MOUSE, OrbitControls, Scene, WebGLRenderer } from 'thre
 // }
 
 // Namespace for errors
-const error = function() {
+const error = function () {
   Array.prototype.unshift.call(arguments, '[VANTA]')
   return console.error.apply(this, arguments)
 }
 
 VANTA.VantaBase = class VantaBase {
-  constructor(userOptions = {}) {
-    if (!win) return false
+  constructor (userOptions = {}) {
+    if (!win) {return false}
     VANTA.current = this
     this.windowMouseMoveWrapper = this.windowMouseMoveWrapper.bind(this)
     this.windowTouchWrapper = this.windowTouchWrapper.bind(this)
@@ -49,7 +50,7 @@ VANTA.VantaBase = class VantaBase {
     this.animationLoop = this.animationLoop.bind(this)
     this.restart = this.restart.bind(this)
 
-    const defaultOptions = (typeof this.getDefaultOptions === 'function') ? this.getDefaultOptions() : this.defaultOptions
+    const defaultOptions = typeof this.getDefaultOptions === 'function' ? this.getDefaultOptions() : this.defaultOptions
     this.options = extend({
       mouseControls: true,
       touchControls: true,
@@ -61,19 +62,19 @@ VANTA.VantaBase = class VantaBase {
     }, defaultOptions)
 
     if (userOptions instanceof HTMLElement || typeof userOptions === 'string') {
-      userOptions = {el: userOptions}
+      userOptions = { el: userOptions }
     }
     extend(this.options, userOptions)
 
     // Set element
     this.el = this.options.el
     if (this.el == null) {
-      error("Instance needs \"el\" param!")
+      error('Instance needs "el" param!')
     } else if (!(this.options.el instanceof HTMLElement)) {
       const selector = this.el
       this.el = q(selector)
       if (!this.el) {
-        error("Cannot find element", selector)
+        error('Cannot find element', selector)
         return
       }
     }
@@ -121,12 +122,12 @@ VANTA.VantaBase = class VantaBase {
     }
   }
 
-  setOptions(userOptions={}){
+  setOptions (userOptions={}){
     extend(this.options, userOptions)
     this.triggerMouseMove()
   }
 
-  prepareEl() {
+  prepareEl () {
     let i, child
     // wrapInner for text nodes, so text nodes can be put into foreground
     if (typeof Node !== 'undefined' && Node.TEXT_NODE) {
@@ -156,27 +157,27 @@ VANTA.VantaBase = class VantaBase {
     }
   }
 
-  applyCanvasStyles(canvasEl, opts={}){
+  applyCanvasStyles (canvasEl, opts={}){
     extend(canvasEl.style, {
       position: 'absolute',
       zIndex: 0,
       top: 0,
       left: 0,
-      background: ''
+      background: '',
     })
     extend(canvasEl.style, opts)
     canvasEl.classList.add('vanta-canvas')
   }
 
-  initThree() {
+  initThree () {
     if (!WebGLRenderer) {
-      console.warn("[VANTA] No THREE defined on window")
+      console.warn('[VANTA] No THREE defined on window')
       return
     }
     // Set renderer
     this.renderer = new WebGLRenderer({
       alpha: true,
-      antialias: true
+      antialias: true,
     })
     this.el.appendChild(this.renderer.domElement)
     this.applyCanvasStyles(this.renderer.domElement)
@@ -187,7 +188,7 @@ VANTA.VantaBase = class VantaBase {
     this.scene = new Scene()
   }
 
-  getCanvasElement() {
+  getCanvasElement () {
     if (this.renderer) {
       return this.renderer.domElement // js
     }
@@ -196,49 +197,49 @@ VANTA.VantaBase = class VantaBase {
     }
   }
 
-  getCanvasRect() {
+  getCanvasRect () {
     const canvas = this.getCanvasElement()
-    if (!canvas) return false
+    if (!canvas) {return false}
     return canvas.getBoundingClientRect()
   }
 
-  windowMouseMoveWrapper(e){
+  windowMouseMoveWrapper (e){
     const rect = this.getCanvasRect()
-    if (!rect) return false
+    if (!rect) {return false}
     const x = e.clientX - rect.left
     const y = e.clientY - rect.top
     if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
       this.mouseX = x
       this.mouseY = y
-      if (!this.options.mouseEase) this.triggerMouseMove(x, y)
+      if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
     }
   }
-  windowTouchWrapper(e){
+  windowTouchWrapper (e){
     const rect = this.getCanvasRect()
-    if (!rect) return false
+    if (!rect) {return false}
     if (e.touches.length === 1) {
       const x = e.touches[0].clientX - rect.left
       const y = e.touches[0].clientY - rect.top
       if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
         this.mouseX = x
         this.mouseY = y
-        if (!this.options.mouseEase) this.triggerMouseMove(x, y)
+        if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
       }
     }
   }
-  windowGyroWrapper(e){
+  windowGyroWrapper (e){
     const rect = this.getCanvasRect()
-    if (!rect) return false
+    if (!rect) {return false}
     const x = Math.round(e.alpha * 2) - rect.left
     const y = Math.round(e.beta * 2) - rect.top
     if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
       this.mouseX = x
       this.mouseY = y
-      if (!this.options.mouseEase) this.triggerMouseMove(x, y)
+      if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
     }
   }
 
-  triggerMouseMove(x, y) {
+  triggerMouseMove (x, y) {
     if (x === undefined && y === undefined) { // trigger at current position
       if (this.options.mouseEase) {
         x = this.mouseEaseX
@@ -254,10 +255,10 @@ VANTA.VantaBase = class VantaBase {
     }
     const xNorm = x / this.width // 0 to 1
     const yNorm = y / this.height // 0 to 1
-    typeof this.onMouseMove === "function" ? this.onMouseMove(xNorm, yNorm) : void 0
+    typeof this.onMouseMove === 'function' ? this.onMouseMove(xNorm, yNorm) : void 0
   }
 
-  setSize() {
+  setSize () {
     this.scale || (this.scale = 1)
     if (mobileCheck() && this.options.scaleMobile) {
       this.scale = this.options.scaleMobile
@@ -267,21 +268,21 @@ VANTA.VantaBase = class VantaBase {
     this.width = Math.max(this.el.offsetWidth, this.options.minWidth)
     this.height = Math.max(this.el.offsetHeight, this.options.minHeight)
   }
-  initMouse() {
+  initMouse () {
     // Init mouseX and mouseY
-    if ((!this.mouseX && !this.mouseY) ||
-      (this.mouseX === this.options.minWidth/2 && this.mouseY === this.options.minHeight/2)) {
+    if (!this.mouseX && !this.mouseY ||
+      this.mouseX === this.options.minWidth/2 && this.mouseY === this.options.minHeight/2) {
       this.mouseX = this.width/2
       this.mouseY = this.height/2
       this.triggerMouseMove(this.mouseX, this.mouseY)
     }
   }
 
-  resize() {
+  resize () {
     this.setSize()
     if (this.camera) {
       this.camera.aspect = this.width / this.height
-      if (typeof this.camera.updateProjectionMatrix === "function") {
+      if (typeof this.camera.updateProjectionMatrix === 'function') {
         this.camera.updateProjectionMatrix()
       }
     }
@@ -289,28 +290,28 @@ VANTA.VantaBase = class VantaBase {
       this.renderer.setSize(this.width, this.height)
       this.renderer.setPixelRatio(window.devicePixelRatio / this.scale)
     }
-    typeof this.onResize === "function" ? this.onResize() : void 0
+    typeof this.onResize === 'function' ? this.onResize() : void 0
   }
 
-  isOnScreen() {
+  isOnScreen () {
     const elHeight = this.el.offsetHeight
     const elRect = this.el.getBoundingClientRect()
-    const scrollTop = (window.pageYOffset ||
+    const scrollTop = window.pageYOffset ||
       (document.documentElement || document.body.parentNode || document.body).scrollTop
-    )
+
     const offsetTop = elRect.top + scrollTop
     const minScrollTop = offsetTop - window.innerHeight
     const maxScrollTop = offsetTop + elHeight
     return minScrollTop <= scrollTop && scrollTop <= maxScrollTop
   }
 
-  animationLoop() {
+  animationLoop () {
     // Step time
     this.t || (this.t = 0)
     this.t += 1
     // Uniform time
     this.t2 || (this.t2 = 0)
-    this.t2 += (this.options.speed || 1)
+    this.t2 += this.options.speed || 1
     if (this.uniforms) {
       this.uniforms.iTime.value = this.t2 * 0.016667 // iTime is in seconds
     }
@@ -327,7 +328,7 @@ VANTA.VantaBase = class VantaBase {
 
     // Only animate if element is within view
     if (this.isOnScreen() || this.options.forceAnimate) {
-      if (typeof this.onUpdate === "function") {
+      if (typeof this.onUpdate === 'function') {
         this.onUpdate()
       }
       if (this.scene && this.camera) {
@@ -336,8 +337,8 @@ VANTA.VantaBase = class VantaBase {
       }
       // if (this.stats) this.stats.update()
       // if (this.renderStats) this.renderStats.update(this.renderer)
-      if (this.fps && this.fps.update) this.fps.update()
-      if (typeof this.afterRender === "function") this.afterRender()
+      if (this.fps && this.fps.update) {this.fps.update()}
+      if (typeof this.afterRender === 'function') {this.afterRender()}
     }
     return this.req = window.requestAnimationFrame(this.animationLoop)
   }
@@ -350,28 +351,28 @@ VANTA.VantaBase = class VantaBase {
   //   }
   // }
 
-  restart() {
+  restart () {
     // Restart the effect without destroying the renderer
     if (this.scene) {
       while (this.scene.children.length) {
         this.scene.remove(this.scene.children[0])
       }
     }
-    if (typeof this.onRestart === "function") {
+    if (typeof this.onRestart === 'function') {
       this.onRestart()
     }
     this.init()
   }
 
-  init() {
-    if (typeof this.onInit === "function") {
+  init () {
+    if (typeof this.onInit === 'function') {
       this.onInit()
     }
     // this.setupControls()
   }
 
-  destroy() {
-    if (typeof this.onDestroy === "function") {
+  destroy () {
+    if (typeof this.onDestroy === 'function') {
       this.onDestroy()
     }
     const rm = window.removeEventListener

frontend/src/homepage/vanta/vanta.waves.js

@@ -1,6 +1,9 @@
+/* eslint-disable @typescript-eslint/init-declarations */
+/* eslint-disable @typescript-eslint/prefer-for-of */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import VantaBase, { VANTA } from './_base'
-import { rn, ri, sample } from 'vanta/src/helpers.js'
-import { Geometry, MeshPhongMaterial, Vector3, Face3, Mesh, AmbientLight, EdgesGeometry, LineBasicMaterial, LineSegments, PerspectiveCamera, PointLight, DoubleSide } from 'three/src/Three'
+import { rn, ri } from 'vanta/src/helpers.js'
+import { Geometry, MeshPhongMaterial, Vector3, Face3, Mesh, AmbientLight, PerspectiveCamera, PointLight, DoubleSide } from 'three/src/Three'
 import { FaceColors } from 'three/src/Three.Legacy'
 
 const defaultOptions = {
@@ -8,49 +11,46 @@ const defaultOptions = {
   shininess: 30,
   waveHeight: 15,
   waveSpeed: 1,
-  zoom: 1
+  zoom: 1,
 }
 
 export class Waves extends VantaBase {
-  static initClass() {
-    this.prototype.ww = 100;
-    this.prototype.hh = 80;
-    this.prototype.waveNoise = 4; // Choppiness of water
-  }
-  constructor(userOptions) {
-    super(userOptions)
+  static initClass () {
+    this.prototype.ww = 100
+    this.prototype.hh = 80
+    this.prototype.waveNoise = 4 // Choppiness of water
   }
 
-  getMaterial() {
+  getMaterial () {
     const options = {
       color: this.options.color,
       shininess: this.options.shininess,
       flatShading: true,
       vertexColors: FaceColors, // Allow coloring individual faces
-      side: DoubleSide
-    };
-    return new MeshPhongMaterial(options);
+      side: DoubleSide,
+    }
+    return new MeshPhongMaterial(options)
   }
 
-  onInit() {
-    let i, j;
-    const CELLSIZE = 18;
-    const material = this.getMaterial();
-    const geometry = new Geometry();
+  onInit () {
+    let i, j
+    const CELLSIZE = 18
+    const material = this.getMaterial()
+    const geometry = new Geometry()
 
     // Add vertices
-    this.gg = [];
+    this.gg = []
     for (i=0; i<=this.ww; i++){
-      this.gg[i] = [];
+      this.gg[i] = []
       for (j=0; j<=this.hh; j++){
-        const id = geometry.vertices.length;
+        const id = geometry.vertices.length
         const newVertex = new Vector3(
-          (i - (this.ww * 0.5)) * CELLSIZE,
+          (i - this.ww * 0.5) * CELLSIZE,
           rn(0, this.waveNoise) - 10,
-          ((this.hh * 0.5) - j) * CELLSIZE
-        );
-        geometry.vertices.push(newVertex);
-        this.gg[i][j] = id;
+          (this.hh * 0.5 - j) * CELLSIZE
+        )
+        geometry.vertices.push(newVertex)
+        this.gg[i][j] = id
       }
     }
 
@@ -64,7 +64,7 @@ export class Waves extends VantaBase {
         const b = this.gg[i][j-1]
         const c = this.gg[i-1][j]
         const a = this.gg[i-1][j-1]
-        if (ri(0,1)) {
+        if (ri(0, 1)) {
           face1 = new Face3( a, b, c )
           face2 = new Face3( b, c, d )
         } else {
@@ -75,8 +75,8 @@ export class Waves extends VantaBase {
       }
     }
 
-    this.plane = new Mesh(geometry, material);
-    this.scene.add(this.plane);
+    this.plane = new Mesh(geometry, material)
+    this.scene.add(this.plane)
 
     // WIREFRAME
     // lightColor = 0x55aaee
@@ -88,55 +88,55 @@ export class Waves extends VantaBase {
     // @scene.add( @wireframe )
 
     // LIGHTS
-    const ambience = new AmbientLight( 0xffffff, 0.9 );
-    this.scene.add(ambience);
+    const ambience = new AmbientLight( 0xffffff, 0.9 )
+    this.scene.add(ambience)
 
-    const pointLight = new PointLight( 0xffffff, 0.9 );
-    pointLight.position.set(-100,250,-100);
-    this.scene.add(pointLight);
+    const pointLight = new PointLight( 0xffffff, 0.9 )
+    pointLight.position.set(-100, 250, -100)
+    this.scene.add(pointLight)
 
     // CAMERA
     this.camera = new PerspectiveCamera(
       35,
       this.width / this.height,
-      50, 10000);
+      50, 10000)
 
-    const xOffset = -10;
-    const zOffset = -10;
-    this.cameraPosition = new Vector3( 250+xOffset, 200, 400+zOffset );
-    this.cameraTarget = new Vector3( 150+xOffset, -30, 200+zOffset );
-    this.camera.position.copy(this.cameraPosition);
-    this.scene.add(this.camera);
+    const xOffset = -10
+    const zOffset = -10
+    this.cameraPosition = new Vector3( 250+xOffset, 200, 400+zOffset )
+    this.cameraTarget = new Vector3( 150+xOffset, -30, 200+zOffset )
+    this.camera.position.copy(this.cameraPosition)
+    this.scene.add(this.camera)
   }
 
-  onUpdate() {
+  onUpdate () {
     // Update options
-    let diff;
-    this.plane.material.color.set(this.options.color);
-    this.plane.material.shininess = this.options.shininess;
-    this.camera.ox = this.cameraPosition.x / this.options.zoom;
-    this.camera.oy = this.cameraPosition.y / this.options.zoom;
-    this.camera.oz = this.cameraPosition.z / this.options.zoom;
+    let diff
+    this.plane.material.color.set(this.options.color)
+    this.plane.material.shininess = this.options.shininess
+    this.camera.ox = this.cameraPosition.x / this.options.zoom
+    this.camera.oy = this.cameraPosition.y / this.options.zoom
+    this.camera.oz = this.cameraPosition.z / this.options.zoom
 
     if (this.controls != null) {
-      this.controls.update();
+      this.controls.update()
     }
 
-    const c = this.camera;
+    const c = this.camera
     if (Math.abs(c.tx - c.position.x) > 0.01) {
-      diff = c.tx - c.position.x;
-      c.position.x += diff * 0.02;
+      diff = c.tx - c.position.x
+      c.position.x += diff * 0.02
     }
     if (Math.abs(c.ty - c.position.y) > 0.01) {
-      diff = c.ty - c.position.y;
-      c.position.y += diff * 0.02;
+      diff = c.ty - c.position.y
+      c.position.y += diff * 0.02
     }
     if (Math.abs(c.tz - c.position.z) > 0.01) {
-      diff = c.tz - c.position.z;
-      c.position.z += diff * 0.02;
+      diff = c.tz - c.position.z
+      c.position.z += diff * 0.02
     }
 
-    c.lookAt( this.cameraTarget );
+    c.lookAt( this.cameraTarget )
 
     // Fix flickering problems
     // c.near = Math.max((c.position.y * 0.5) - 20, 1);
@@ -144,24 +144,24 @@ export class Waves extends VantaBase {
 
     // WAVES
     for (let i = 0; i < this.plane.geometry.vertices.length; i++) {
-      const v = this.plane.geometry.vertices[i];
+      const v = this.plane.geometry.vertices[i]
       if (!v.oy) { // INIT
-        v.oy = v.y;
+        v.oy = v.y
       } else {
-        const s = this.options.waveSpeed;
-        const crossChop = Math.sqrt(s) * Math.cos(-v.x - (v.z*0.7)); // + s * (i % 229) / 229 * 5
-        const delta = Math.sin((((s*this.t*0.02) - (s*v.x*0.025)) + (s*v.z*0.015) + crossChop));
-        const trochoidDelta = Math.pow(delta + 1, 2) / 4;
-        v.y = v.oy + (trochoidDelta * this.options.waveHeight);
+        const s = this.options.waveSpeed
+        const crossChop = Math.sqrt(s) * Math.cos(-v.x - v.z*0.7) // + s * (i % 229) / 229 * 5
+        const delta = Math.sin(s*this.t*0.02 - s*v.x*0.025 + s*v.z*0.015 + crossChop)
+        const trochoidDelta = Math.pow(delta + 1, 2) / 4
+        v.y = v.oy + trochoidDelta * this.options.waveHeight
       }
     }
 
-      // @wireframe.geometry.vertices[i].y = v.y
+    // @wireframe.geometry.vertices[i].y = v.y
 
-    this.plane.geometry.dynamic = true;
-    this.plane.geometry.computeFaceNormals();
-    this.plane.geometry.verticesNeedUpdate = true;
-    this.plane.geometry.normalsNeedUpdate = true;
+    this.plane.geometry.dynamic = true
+    this.plane.geometry.computeFaceNormals()
+    this.plane.geometry.verticesNeedUpdate = true
+    this.plane.geometry.normalsNeedUpdate = true
 
     // @scene.remove( @wireframe )
     // geo = new EdgesGeometry(@plane.geometry)
@@ -170,21 +170,21 @@ export class Waves extends VantaBase {
     // @scene.add( @wireframe )
 
     if (this.wireframe) {
-      this.wireframe.geometry.fromGeometry(this.plane.geometry);
-      this.wireframe.geometry.computeFaceNormals();
+      this.wireframe.geometry.fromGeometry(this.plane.geometry)
+      this.wireframe.geometry.computeFaceNormals()
     }
   }
 
-  onMouseMove(x,y) {
-    const c = this.camera;
+  onMouseMove (x, y) {
+    const c = this.camera
     if (!c.oy) {
-      c.oy = c.position.y;
-      c.ox = c.position.x;
-      c.oz = c.position.z;
+      c.oy = c.position.y
+      c.ox = c.position.x
+      c.oz = c.position.z
     }
-    c.tx = c.ox + (((x-0.5) * 100) / this.options.zoom);
-    c.ty = c.oy + (((y-0.5) * -100) / this.options.zoom);
-    return c.tz = c.oz + (((x-0.5) * -50) / this.options.zoom);
+    c.tx = c.ox + (x-0.5) * 100 / this.options.zoom
+    c.ty = c.oy + (y-0.5) * -100 / this.options.zoom
+    return c.tz = c.oz + (x-0.5) * -50 / this.options.zoom
   }
 }
 

frontend/src/login/components/login.component.ts

@@ -4,29 +4,29 @@ import { LoginService, CommonService } from 'src/common'
 import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons'
 
 @Component({
-    selector: 'login',
-    templateUrl: './login.component.pug',
-    styleUrls: ['./login.component.scss'],
+  selector: 'login',
+  templateUrl: './login.component.pug',
+  styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent {
-    loggedIn: any
-    ready = false
+  loggedIn: any
+  ready = false
 
-    providers = [
-        { name: 'GitHub', icon: faGithub, cls: 'btn-primary', id: 'github' },
-        { name: 'GitLab', icon: faGitlab, cls: 'btn-warning', id: 'gitlab' },
-        { name: 'Google', icon: faGoogle, cls: 'btn-secondary', id: 'google-oauth2' },
-        { name: 'Microsoft', icon: faMicrosoft, cls: 'btn-light', id: 'microsoft-graph' },
-    ]
+  providers = [
+    { name: 'GitHub', icon: faGithub, cls: 'btn-primary', id: 'github' },
+    { name: 'GitLab', icon: faGitlab, cls: 'btn-warning', id: 'gitlab' },
+    { name: 'Google', icon: faGoogle, cls: 'btn-secondary', id: 'google-oauth2' },
+    { name: 'Microsoft', icon: faMicrosoft, cls: 'btn-light', id: 'microsoft-graph' },
+  ]
 
-    constructor (
-        private loginService: LoginService,
-        public commonService: CommonService,
-    ) { }
+  constructor (
+    private loginService: LoginService,
+    public commonService: CommonService,
+  ) { }
 
-    async ngOnInit () {
-        await this.loginService.ready$.toPromise()
-        this.loggedIn = !!this.loginService.user
-        this.ready = true
-    }
+  async ngOnInit () {
+    await this.loginService.ready$.toPromise()
+    this.loggedIn = !!this.loginService.user
+    this.ready = true
+  }
 }

frontend/src/login/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
 import { NgModule } from '@angular/core'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { CommonModule } from '@angular/common'
@@ -11,27 +12,27 @@ import { InstanceInfoResolver } from 'src/api'
 import { CommonAppModule } from 'src/common'
 
 const ROUTES = [
-    {
-        path: '',
-        component: LoginComponent,
-        resolve: {
-            instanceInfo: InstanceInfoResolver,
-        },
+  {
+    path: '',
+    component: LoginComponent,
+    resolve: {
+      instanceInfo: InstanceInfoResolver,
     },
+  },
 ]
 
 @NgModule({
-    imports: [
-        CommonAppModule,
-        CommonModule,
-        FormsModule,
-        NgbNavModule,
-        FontAwesomeModule,
-        NgxImageZoomModule,
-        RouterModule.forChild(ROUTES),
-    ],
-    declarations: [
-        LoginComponent,
-    ],
+  imports: [
+    CommonAppModule,
+    CommonModule,
+    FormsModule,
+    NgbNavModule,
+    FontAwesomeModule,
+    NgxImageZoomModule,
+    RouterModule.forChild(ROUTES),
+  ],
+  declarations: [
+    LoginComponent,
+  ],
 })
 export class LoginModule { }

frontend/src/server.ts

@@ -18,63 +18,68 @@ enableProdMode()
 import { AppServerModule } from './app.server.module'
 
 const engine = ngExpressEngine({
-    bootstrap: AppServerModule,
+  bootstrap: AppServerModule,
 })
 
 const hardlinks = {
-    'cwd-detection': 'https://github.com/Eugeny/tabby/wiki/Shell-working-directory-reporting',
-    'privacy-policy': 'https://github.com/Eugeny/tabby/wiki/Privacy-Policy-for-Tabby-Web',
-    'terms-of-use': 'https://github.com/Eugeny/tabby/wiki/Terms-of-Use-of-Tabby-Web',
+  'cwd-detection': 'https://github.com/Eugeny/tabby/wiki/Shell-working-directory-reporting',
+  'privacy-policy': 'https://github.com/Eugeny/tabby/wiki/Privacy-Policy-for-Tabby-Web',
+  'terms-of-use': 'https://github.com/Eugeny/tabby/wiki/Terms-of-Use-of-Tabby-Web',
 }
 
 function start () {
-    const app = express()
+  const app = express()
 
-    const PORT = process.env.PORT || 8000
-    const DIST_FOLDER = join(process.cwd(), 'build')
+  const PORT = process.env.PORT ?? 8000
+  const DIST_FOLDER = join(process.cwd(), 'build')
 
-    app.engine('html', engine)
+  app.engine('html', engine)
 
-    app.set('view engine', 'html')
-    app.set('views', DIST_FOLDER)
+  app.set('view engine', 'html')
+  app.set('views', DIST_FOLDER)
 
-    app.use('/static', express.static(DIST_FOLDER, {
-        maxAge: '1y',
-    }))
+  app.use('/static', express.static(DIST_FOLDER, {
+    maxAge: '1y',
+  }))
 
-    app.get(['/', '/app', '/login', '/features'], (req, res) => {
-        res.render(
-            'index',
-            {
-                req,
-                providers: [
-                    { provide: 'BACKEND_URL', useValue: process.env.BACKEND_URL ?? '' },
-                ],
-            },
-            (err: Error, html: string) => {
-                html = html.replace('{{backendURL}}', process.env.BACKEND_URL ?? '')
-                res.status(err ? 500 : 200).send(html || err.message)
-            },
-        )
-    })
+  app.get(['/', '/app', '/login', '/features'], (req, res) => {
+    res.render(
+      'index',
+      {
+        req,
+        providers: [
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          { provide: 'BACKEND_URL', useValue: process.env.BACKEND_URL ?? '' },
+        ],
+      },
+      (err?: Error, html?: string) => {
+        if (html) {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          html = html.replace('{{backendURL}}', process.env.BACKEND_URL ?? '')
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        res.status(err ? 500 : 200).send(html ?? err!.message)
+      },
+    )
+  })
 
-    app.get(['/terminal'], (req, res) => {
-        res.sendFile(join(DIST_FOLDER, 'terminal.html'))
-    })
+  app.get(['/terminal'], (req, res) => {
+    res.sendFile(join(DIST_FOLDER, 'terminal.html'))
+  })
 
-    for (const [key, value] of Object.entries(hardlinks)) {
-        app.get(`/go/${key}`, (req, res) => res.redirect(value))
-    }
+  for (const [key, value] of Object.entries(hardlinks)) {
+    app.get(`/go/${key}`, (req, res) => res.redirect(value))
+  }
 
-    process.umask(0o002)
-    app.listen(PORT, () => {
-        console.log(`Node Express server listening on http://localhost:${PORT}`)
-    })
+  process.umask(0o002)
+  app.listen(PORT, () => {
+    console.log(`Node Express server listening on http://localhost:${PORT}`)
+  })
 }
 
-const WORKERS = process.env.WEB_CONCURRENCY || 4
+const WORKERS = process.env.WEB_CONCURRENCY ?? 4
 throng({
-    workers: WORKERS,
-    lifetime: Infinity,
-    start,
+  workers: WORKERS,
+  lifetime: Infinity,
+  start,
 })

frontend/src/ssr-polyfills.ts

@@ -1,41 +1,41 @@
-import * as domino from 'domino';
-import * as fs from 'fs';
-import * as path from 'path';
+import * as domino from 'domino'
+import * as fs from 'fs'
+import * as path from 'path'
 
-const template = fs.readFileSync(path.join(process.cwd(), 'build', 'index.html')).toString();
-const win = domino.createWindow(template);
+const template = fs.readFileSync(path.join(process.cwd(), 'build', 'index.html')).toString()
+const win = domino.createWindow(template)
 
-global['window'] = win;
+global['window'] = win
 
 Object.defineProperty(win.document.body.style, 'transform', {
   value: () => {
     return {
       enumerable: true,
-      configurable: true
-    };
+      configurable: true,
+    }
   },
-});
+})
 
 Object.defineProperty(win.document.body.style, 'z-index', {
   value: () => {
-      return {
-          enumerable: true,
-          configurable: true
-      };
+    return {
+      enumerable: true,
+      configurable: true,
+    }
   },
-});
+})
 
-global['document'] = win.document;
-global['CSS'] = null;
+global['document'] = win.document
+global['CSS'] = null
 // global['atob'] = win.atob;
 global['atob'] = (base64: string) => {
-  return Buffer.from(base64, 'base64').toString();
-};
-
-function setDomTypes() {
-  // Make all Domino types available as types in the global env.
-  Object.assign(global, domino['impl']);
-  (global as any)['KeyboardEvent'] = domino['impl'].Event;
+  return Buffer.from(base64, 'base64').toString()
 }
 
-setDomTypes();
+function setDomTypes () {
+  // Make all Domino types available as types in the global env.
+  Object.assign(global, domino['impl']);
+  (global as any)['KeyboardEvent'] = domino['impl'].Event
+}
+
+setDomTypes()

frontend/src/terminal.ts

@@ -1,72 +1,72 @@
 import './terminal-styles.scss'
 
 async function start () {
-    window['__filename'] = ''
+  window['__filename'] = ''
 
-    await new Promise<void>(resolve => {
-        window.addEventListener('message', event => {
-            if (event.data === 'connector-ready') {
-                resolve()
-            }
-        })
-        window.parent.postMessage('request-connector', '*')
+  await new Promise<void>(resolve => {
+    window.addEventListener('message', event => {
+      if (event.data === 'connector-ready') {
+        resolve()
+      }
     })
+    window.parent.postMessage('request-connector', '*')
+  })
 
-    const connector = window['__connector__']
+  const connector = window['__connector__']
 
-    const appVersion = connector.getAppVersion()
+  const appVersion = connector.getAppVersion()
 
-    async function webRequire (url) {
-        console.log(`Loading ${url}`)
-        const e = document.createElement('script')
-        window['module'] = { exports: {} } as any
-        window['exports'] = window['module'].exports
-        await new Promise(resolve => {
-            e.onload = resolve
-            e.src = url
-            document.querySelector('head').appendChild(e)
-        })
-        return window['module'].exports
-    }
+  async function webRequire (url) {
+    console.log(`Loading ${url}`)
+    const e = document.createElement('script')
+    window['module'] = { exports: {} } as any
+    window['exports'] = window['module'].exports
+    await new Promise(resolve => {
+      e.onload = resolve
+      e.src = url
+      document.head.appendChild(e)
+    })
+    return window['module'].exports
+  }
 
-    async function prefetchURL (url) {
-        await (await fetch(url)).text()
-    }
+  async function prefetchURL (url) {
+    await (await fetch(url)).text()
+  }
 
-    const baseUrl = `${connector.getDistURL()}/${appVersion}`
-    const coreURLs = [
-        `${baseUrl}/tabby-web-container/dist/preload.js`,
-        `${baseUrl}/tabby-web-container/dist/bundle.js`,
-    ]
+  const baseUrl = `${connector.getDistURL()}/${appVersion}`
+  const coreURLs = [
+    `${baseUrl}/tabby-web-container/dist/preload.js`,
+    `${baseUrl}/tabby-web-container/dist/bundle.js`,
+  ]
 
-    await Promise.all(coreURLs.map(prefetchURL))
+  await Promise.all(coreURLs.map(prefetchURL))
 
-    for (const url of coreURLs) {
-        await webRequire(url)
-    }
+  for (const url of coreURLs) {
+    await webRequire(url)
+  }
 
-    document.querySelector('app-root')['style'].display = 'flex'
+  document.querySelector('app-root')!['style'].display = 'flex'
 
-    const tabby = window['Tabby']
+  const tabby = window['Tabby']
 
-    const pluginURLs = connector.getPluginsToLoad().map(x => `${baseUrl}/${x}`)
-    const pluginModules = await tabby.loadPlugins(pluginURLs, (current, total) => {
+  const pluginURLs = connector.getPluginsToLoad().map(x => `${baseUrl}/${x}`)
+  const pluginModules = await tabby.loadPlugins(pluginURLs, (current, total) => {
         (document.querySelector('.progress .bar') as HTMLElement).style.width = `${100 * current / total}%` // eslint-disable-line
-    })
+  })
 
-    const config = connector.loadConfig()
-    tabby.bootstrap({
-        packageModules: pluginModules,
-        bootstrapData: {
-            config,
-            executable: 'web',
-            isFirstWindow: true,
-            windowID: 1,
-            installedPlugins: [],
-            userPluginsPath: '/',
-        },
-        debugMode: false,
-        connector,
-    })
+  const config = connector.loadConfig()
+  tabby.bootstrap({
+    packageModules: pluginModules,
+    bootstrapData: {
+      config,
+      executable: 'web',
+      isFirstWindow: true,
+      windowID: 1,
+      installedPlugins: [],
+      userPluginsPath: '/',
+    },
+    debugMode: false,
+    connector,
+  })
 }
 start()