.

frontend/src/components/app.component.pug

@@ -0,0 +1 @@
+router-outlet

frontend/src/components/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+
+@Component({
+    selector: 'app',
+    templateUrl: './app.component.pug',
+    // styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+}

frontend/src/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/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 '../services/config.service'
+import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Config, Version } from '../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/components/home.component.pug

@@ -0,0 +1,144 @@
+.top-half
+    .navbar
+        img.brand(src='{{_logo}}')
+        .me-auto
+        a.btn.btn-primary([href]='releaseURL', target='_blank')
+            fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+            span Download
+        a.btn.btn-secondary([href]='donationURL', target='_blank')
+            fa-icon([icon]='_donateIcon', [fixedWidth]='true')
+            span Donate
+        a.btn.btn-secondary(routerLink='/login', *ngIf='instanceInfo.login_enabled')
+            fa-icon([icon]='_loginIcon', [fixedWidth]='true')
+            span Login
+
+    .container
+        .intro
+            h1 Hey.
+            div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
+            div Crossplatform, local, SSH, serial, Telnet - it's all there.
+            div Here's a demo 👇
+
+        iframe(#iframe)
+
+.bottom-half
+    .container
+        .d-flex.m-auto.mb-5
+            a.btn.btn-lg.btn-primary.ms-auto.me-3([href]='releaseURL', target='_blank')
+                fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+                span Latest release
+
+            a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
+                fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+                span GitHub
+
+        .quotes
+            .quote
+                .text "reasonable"
+                .author — Michael
+
+            .quote
+                .text "cool"
+                .author — some dude on my ko-fi
+
+            .quote
+                .text "very cool"
+                .author — datsukan
+
+    .section.section-a
+        .container
+            .row
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.window', loading='lazy')
+                .col-12.col-xl-6
+                    h1 The important stuff
+                    ul
+                        li Runs on #[strong Windows, Mac and Linux]
+                        li Integrated #[strong SSH client] with a connection manager
+                        li Integrated #[strong serial terminal]
+                        li PowerShell, PS Core, WSL, Git-Bash, Cygwin, Cmder and CMD support
+                        li Full #[strong Unicode support] including double-width characters
+                        li File transfer from/to SSH sessions via #[strong SFTP and Zmodem]
+                        li Theming and color schemes
+                        li Fully #[strong configurable shortcuts] and multi-chord shortcuts
+                        li #[strong Remembers your tabs] and split panes
+                        li Proper shell experience on Windows including #[strong tab completion]
+                        li Integrated #[strong encrypted container] for SSH secrets and configuration
+
+    .section.section-b
+        .container
+            .row
+                .col-12.col-xl-6
+                    h1 Terminal features
+                    ul
+                        li Multiple #[strong nested panes]
+                        li #[strong Progress bars] and activity notifications for tabs
+                        li Tabby remembers open tabs and panes where you left off
+                        li Tabs on #[strong any side of the window]
+                        li Optional #[strong quake mode] (terminal docked to a side of the screen)
+                        li Optional #[strong global hotkey] to focus/hide the terminal
+                        li Bracketed paste
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.tabs', loading='lazy')
+
+    .section.section-a
+        .container
+            .row
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.ssh', loading='lazy')
+                .col-12.col-xl-6
+                    h1 SSH Client
+                    ul
+                        li SSH2 client with a connection manager
+                        li #[strong SFTP and Zmodem] file transfers
+                        li #[strong X11] and #[strong port forwarding]
+                        li Jump hosts
+                        li #[strong Agent forwarding] - including Pageant and Windows native OpenSSH Agent
+                        li Login scripts
+                        li Optional built-in #[strong password manager] with a master passphrase
+                        li #[strong Proxy command] support
+
+    .section.section-b
+        .container
+            .row
+                .col-12.col-xl-6
+                    h1 Windows, but nice
+                    ul
+                        li Support for #[strong different shells] in the same window
+                        li Better tab completion #[strong cmd.exe] thanks to Clink.
+                        li Explorer menu integration
+                        li Optional #[strong portable mode]
+                        li Current directory detection that works
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.win', loading='lazy')
+
+    .section.section-a
+        .container
+            .row
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.serial', loading='lazy')
+                .col-12.col-xl-6
+                    h1 Serial Terminal
+                    ul
+                        li Multiple #[strong connection profiles]
+                        li Newline conversion
+                        li Text, #[strong readline] and #[strong byte-by-byte] input modes
+                        li Text and #[strong hexdump] output modes
+                        li Zmodem
+                        li Non-standard baud rates
+
+    .section.section-a
+        .container
+            h1 And just too much stuff to mention here:
+            ul
+                li Themes #[strong customizable with CSS]
+                li Extensible via #[strong plugins] (in JS)
+                li A bunch of color schemes already included
+                li Telnet client
+                li #[strong Font ligatures] and font fallback
+                li #[strong Clickable URLs], IPs and paths
+                li #[strong WinSCP] integration
+                li Shell #[strong profiles]
+                li Simultaneous #[strong multi-pane input]
+                li Optional PuTTY style #[strong right-click paste] and #[strong copy on select]
+                li macOS vibrancy and Win 10 fluent background support

frontend/src/components/home.component.scss

@@ -0,0 +1,111 @@
+@import "../theme/vars.scss";
+@import "~@fontsource/fira-code/latin.css";
+
+:host {
+    font-size: 20px;
+    font-family: 'Fira Code', monospace;
+
+    button, a, .quote {
+        font-family: $font-family-sans-serif;
+    }
+}
+
+.top-half {
+    background: linear-gradient(#0c141c, #15202b);
+
+    h1 {
+        font-size: 80px;
+    }
+}
+
+.navbar {
+    display: flex;
+    padding: 15px 30px;
+
+    a, button {
+        margin-left: 10px;
+    }
+}
+
+.brand {
+    width: 32px;
+}
+
+h1 {
+    font-family: $font-family-monospace;
+    font-weight: bold;
+    font-size: 48px;
+    text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
+}
+
+.intro {
+    width: 60vw;
+    margin: auto;
+}
+
+iframe {
+    display: block;
+    margin: auto;
+    position: relative;
+    top: 20vw;
+    margin-top: -16vw;
+
+    width: calc(min(max(480px, 60vw), 100vw));
+    height: calc(max(460px, 42vw));
+    overflow: hidden;
+    border-radius: 5px;
+    box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
+}
+
+
+.bottom-half {
+    padding-top: 24vw;
+}
+
+.quotes {
+    margin: 50px 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+
+    .quote {
+        margin: 0 30px;
+
+        .text {
+            font-size: 50px;
+            font-style: italic;
+        }
+
+        .author {
+            font-size: 14px;
+        }
+    }
+
+    @media (max-width: 600px) {
+        & { display: none;}
+    }
+}
+
+strong {
+    background: #849dff;
+    font-weight: normal;
+    padding: 2px 7px;
+    color: black;
+}
+
+.section {
+    padding: 50px 0;
+
+    .screenshot {
+        min-width: 0;
+        max-width: 100%;
+    }
+}
+
+.section-a {
+    background: rgba(0, 0, 0, .5);
+}
+
+.section-b {
+}

frontend/src/components/home.component.ts

@@ -0,0 +1,129 @@
+import { Subject } from 'rxjs'
+import * as semverCompare from 'semver/functions/compare-loose'
+import { HttpClient } from '@angular/common/http'
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { InstanceInfo, Version } from '../api'
+import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { ActivatedRoute } from '@angular/router'
+import { CommonService } from '../services/common.service'
+
+
+class DemoConnector {
+    constructor (
+        targetWindow: Window,
+        private commonService: CommonService,
+        private version: Version,
+    ) {
+        this.getDistURL().then(distURL => {
+            targetWindow['tabbyWebDemoDataPath'] = `${distURL}/${version.version}/tabby-web-demo/data`
+        })
+    }
+
+    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> { }
+
+    getAppVersion (): string {
+        return this.version.version
+    }
+
+    async getDistURL (): Promise<string> {
+        return await 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',
+        ]
+    }
+
+    createSocket () {
+        return new DemoSocketProxy()
+    }
+}
+
+
+export class DemoSocketProxy {
+    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!'))
+    }
+}
+
+
+@Component({
+    selector: 'home',
+    templateUrl: './home.component.pug',
+    styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {
+    @ViewChild('iframe') iframe: ElementRef
+    connector: DemoConnector
+    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
+    _githubIcon = faGithub
+    _donateIcon = faCoffee
+
+    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'),
+    }
+
+    instanceInfo: InstanceInfo
+
+    constructor (
+        private http: HttpClient,
+        private commonService: CommonService,
+        route: ActivatedRoute,
+    ) {
+        window.addEventListener('message', this.connectorRequestHandler)
+        this.instanceInfo = route.snapshot.data.instanceInfo
+    }
+
+    // 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.html'
+    }
+
+    ngOnDestroy (): void {
+        window.removeEventListener('message', this.connectorRequestHandler)
+    }
+}

frontend/src/components/login.component.pug

@@ -0,0 +1,10 @@
+main(*ngIf='ready && loggedIn')
+.login-view(*ngIf='ready && !loggedIn')
+    .buttons
+        a.btn(
+            *ngFor='let provider of providers',
+            [class]='provider.cls',
+            href='{{commonService.backendURL$|async}}/api/1/auth/social/login/{{provider.id}}'
+        )
+            fa-icon([icon]='provider.icon', [fixedWidth]='true')
+            span Log in with {{provider.name}}

frontend/src/components/login.component.scss

@@ -0,0 +1,25 @@
+:host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+}
+
+.login-view {
+    margin: auto;
+    flex: none;
+}
+
+.buttons > * {
+    min-width: 200px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    >span {
+        margin: auto;
+    }
+}

frontend/src/components/login.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core'
+import { LoginService } from '../services/login.service'
+import { CommonService } from '../services/common.service'
+
+import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons'
+
+@Component({
+    selector: 'login',
+    templateUrl: './login.component.pug',
+    styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent {
+    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' },
+    ]
+
+    constructor (
+        private loginService: LoginService,
+        public commonService: CommonService,
+    ) { }
+
+    async ngOnInit () {
+        await this.loginService.ready$.toPromise()
+        this.loggedIn = !!this.loginService.user
+        this.ready = true
+    }
+}

frontend/src/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/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/components/main.component.ts

@@ -0,0 +1,110 @@
+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 { LoginService } from '../services/login.service'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { SettingsModalComponent } from './settingsModal.component'
+import { ConfigModalComponent } from './configModal.component'
+import { ConfigService } from '../services/config.service'
+import { combineLatest } from 'rxjs'
+import { Config, Version } from '../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.html'
+        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/components/settingsModal.component.pug

@@ -0,0 +1,73 @@
+.modal-header
+    h3.modal-title Settings
+
+.modal-body
+    .mb-3
+        h5 GitHub account
+        a.btn.btn-info(href='/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
+
+    div(*ngIf='appConnector.sockets.length')
+        h5 Active connections
+        .list-group.list-group-flush
+            .list-group-item(*ngFor='let socket of appConnector.sockets')
+                div {{socket.options.host}}:{{socket.options.port}}
+                .text-muted via {{socket.url}}
+
+.modal-footer
+    button.btn.btn-primary((click)='apply()') Apply
+    button.btn.btn-secondary((click)='cancel()') Cancel

frontend/src/components/settingsModal.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core'
+import { LoginService } from '../services/login.service'
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { User } from '../api'
+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',
+    // styleUrls: ['./settingsModal.component.scss'],
+})
+export class SettingsModalComponent {
+    user: User
+    customGatewayEnabled = false
+    _githubIcon = faGithub
+    _copyIcon = faCopy
+    _okIcon = faCheck
+
+    constructor (
+        public appConnector: AppConnectorService,
+        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()
+    }
+}