.

frontend/src/components/connectionList.component.pug

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

frontend/src/components/connectionList.component.ts

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

frontend/src/components/login.component.pug

@@ -1,5 +1,4 @@
-main(*ngIf='ready && loggedIn')
-.login-view(*ngIf='ready && !loggedIn')
+.login-view(*ngIf='ready')
     .buttons
         a.btn(
             *ngFor='let provider of providers',

frontend/src/components/settingsModal.component.pug

@@ -4,7 +4,7 @@
 .modal-body
     .mb-3
         h5 GitHub account
-        a.btn.btn-info(href='/api/1/auth/social/login/github', *ngIf='!user.github_username')
+        a.btn.btn-info(href='{{commonService.backendURL}}/api/1/auth/social/login/github', *ngIf='!user.github_username')
             fa-icon([icon]='_githubIcon', [fixedWidth]='true')
             span Connect a GitHub account
         .alert.alert-success.d-flex(*ngIf='user.github_username')
@@ -61,13 +61,12 @@
                 )
                 label Gateway authentication token
 
-    div(*ngIf='appConnector.sockets.length')
+    .mb-3.mt-4(*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}}
+        connection-list
 
 .modal-footer
+    .text-muted Account ID: {{user.id}}
+    .ms-auto
     button.btn.btn-primary((click)='apply()') Apply
     button.btn.btn-secondary((click)='cancel()') Cancel

frontend/src/components/settingsModal.component.ts

@@ -4,6 +4,7 @@ import { LoginService } from '../services/login.service'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { User } from '../api'
 import { AppConnectorService } from '../services/appConnector.service'
+import { CommonService } from '../services/common.service'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
 
@@ -21,6 +22,7 @@ export class SettingsModalComponent {
 
     constructor (
         public appConnector: AppConnectorService,
+        public commonService: CommonService,
         private modalInstance: NgbActiveModal,
         private loginService: LoginService,
     ) {

frontend/src/components/upgradeModal.component.pug

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

frontend/src/components/upgradeModal.component.ts

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