wip

src/api.ts

@@ -8,6 +8,8 @@ export interface User {
     active_version: string
     custom_connection_gateway: string|null
     custom_connection_gateway_token: string|null
+    config_sync_token: string
+    github_username: string
     is_pro: boolean
 }
 

src/app.module.ts

@@ -6,6 +6,7 @@ import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
+import { ClipboardModule } from '@angular/cdk/clipboard'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { AppComponent } from './components/app.component'
 import { MainComponent } from './components/main.component'
@@ -50,6 +51,7 @@ const ROUTES = [
         NgbDropdownModule,
         NgbModalModule,
         FontAwesomeModule,
+        ClipboardModule,
         RouterModule.forRoot(ROUTES),
     ],
     declarations: [

src/components/configModal.component.pug

@@ -8,7 +8,7 @@
                 label Active config
                 .title
                     fa-icon([icon]='_configIcon')
-                    span.ms-2 {{configService.activeConfig.created_at|date:"medium"}}
+                    span.ms-2 {{configService.activeConfig.name}}
 
             button.btn.btn-semi.me-2((click)='configService.duplicateActiveConfig()')
                 fa-icon([icon]='_copyIcon', [fixedWidth]='true')
@@ -38,7 +38,7 @@
                     (click)='selectConfig(config)'
                 )
                     fa-icon([icon]='_configIcon')
-                    span Config created at {{config.created_at|date:"medium"}}
+                    span {{config.name}}
 
     .py-3
         button.btn.btn-semi.w-100((click)='createNewConfig()')

src/components/home.component.ts

@@ -15,7 +15,10 @@ class DemoConnector {
 
     async loadConfig (): Promise<string> {
         return `{
-            recoverTabs: false
+            recoverTabs: false,
+            web: {
+                preventAccidentalTabClosure: false,
+            },
         }`
     }
 

src/components/settingsModal.component.pug

@@ -4,11 +4,29 @@
 .modal-body
     .mb-3
         h5 GitHub account
-        a.btn.btn-info(href='/api/1/auth/social/login/github')
+        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
+    .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(

src/components/settingsModal.component.ts

@@ -5,6 +5,7 @@ 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',
@@ -15,6 +16,8 @@ export class SettingsModalComponent {
     user: User
     customGatewayEnabled = false
     _githubIcon = faGithub
+    _copyIcon = faCopy
+    _okIcon = faCheck
 
     constructor (
         public appConnector: AppConnectorService,

src/theme/index.scss

@@ -19,12 +19,12 @@
 @import "~bootstrap/scss/button-group";
 // @import "~bootstrap/scss/nav";
 // @import "~bootstrap/scss/navbar";
-// @import "~bootstrap/scss/card";
+@import "~bootstrap/scss/card";
 // @import "~bootstrap/scss/accordion";
 // @import "~bootstrap/scss/breadcrum/b";
 // @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
-// @import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/alert";
 // @import "~bootstrap/scss/progress";
 @import "~bootstrap/scss/list-group";
 // @import "~bootstrap/scss/close";

src/theme/vars.scss

@@ -191,3 +191,7 @@ $modal-content-border-width:        1px;
 
 $progress-bg: $table-bg;
 $progress-height: 3px;
+
+$alert-bg-scale: 90%;
+$alert-border-scale: 50%;
+$alert-color-scale: 50%;