wip

frontend/src/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core'
+
+@Component({
+    selector: 'app',
+    template: '<router-outlet></router-outlet>',
+})
+export class AppComponent { }

frontend/src/app.module.ts

@@ -5,20 +5,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
-import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http'
 import { ClipboardModule } from '@angular/cdk/clipboard'
 import { TransferHttpCacheModule } from '@nguniversal/common'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { HttpClientModule } from '@angular/common/http'
 
-import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor'
-import { AppComponent } from './components/app.component'
-import { MainComponent } from './components/main.component'
-import { ConfigModalComponent } from './components/configModal.component'
-import { SettingsModalComponent } from './components/settingsModal.component'
-import { LoginComponent } from './components/login.component'
-import { ConnectionListComponent } from './components/connectionList.component'
-import { UpgradeModalComponent } from './components/upgradeModal.component'
-import { InstanceInfoResolver } from './api'
+import { AppComponent } from './app.component'
+import { CommonAppModule } from 'src/common'
 
 import '@fortawesome/fontawesome-svg-core/styles.css'
 
@@ -29,17 +22,11 @@ const ROUTES = [
     },
     {
         path: 'app',
-        component: MainComponent,
-        resolve: {
-            instanceInfo: InstanceInfoResolver,
-        },
+        loadChildren: () => import(/* webpackChunkName: "app" */'./app').then(m => m.ApplicationModule),
     },
     {
         path: 'login',
-        component: LoginComponent,
-        resolve: {
-            instanceInfo: InstanceInfoResolver,
-        },
+        loadChildren: () => import(/* webpackChunkName: "login" */'./login').then(m => m.LoginModule),
     },
 ]
 
@@ -48,30 +35,20 @@ const ROUTES = [
         BrowserModule.withServerTransition({
             appId: 'tabby',
         }),
+        CommonAppModule.forRoot(),
         TransferHttpCacheModule,
         BrowserAnimationsModule,
         CommonModule,
         FormsModule,
-        HttpClientModule,
-        HttpClientXsrfModule,
         NgbDropdownModule,
         NgbModalModule,
         FontAwesomeModule,
         ClipboardModule,
+        HttpClientModule,
         RouterModule.forRoot(ROUTES),
     ],
-    providers: [
-        { provide: HTTP_INTERCEPTORS, useClass: UniversalInterceptor, multi: true },
-        { provide: HTTP_INTERCEPTORS, useClass: BackendXsrfInterceptor, multi: true },
-    ],
     declarations: [
         AppComponent,
-        MainComponent,
-        LoginComponent,
-        ConfigModalComponent,
-        SettingsModalComponent,
-        ConnectionListComponent,
-        UpgradeModalComponent,
     ],
     bootstrap: [AppComponent],
 })

frontend/src/app.server.module.ts

@@ -1,18 +1,14 @@
 import { NgModule } from '@angular/core'
 import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'
 import { AppModule } from './app.module'
-import { AppComponent } from './components/app.component'
+import { AppComponent } from './app.component'
 
 @NgModule({
   imports: [
-    // The AppServerModule should import your AppModule followed
-    // by the ServerModule from @angular/platform-server.
     AppModule,
     ServerModule,
     ServerTransferStateModule,
   ],
-  // Since the bootstrapped component is not inherited from your
-  // imported AppModule, it needs to be repeated here.
   bootstrap: [AppComponent],
 })
 export class AppServerModule {}

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

@@ -1,9 +1,9 @@
 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 { ConfigService } from 'src/common'
 import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
-import { Config, Version } from '../api'
+import { Config, Version } from 'src/api'
 
 @Component({
     selector: 'config-modal',

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

@@ -1,4 +1,4 @@
-@import "../theme/vars";
+@import "theme/vars";
 
 :host {
     position: absolute;

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

@@ -4,13 +4,12 @@ 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 { ConfigService, LoginService } from 'src/common'
 import { combineLatest } from 'rxjs'
-import { Config, Version } from '../api'
+import { Config, Version } from 'src/api'
 import { Router } from '@angular/router'
 
 @Component({
@@ -19,7 +18,7 @@ import { Router } from '@angular/router'
     styleUrls: ['./main.component.scss'],
 })
 export class MainComponent {
-    _logo = require('../assets/logo.svg')
+    _logo = require('assets/logo.svg')
     _settingsIcon = faCog
     _logoutIcon = faSignOutAlt
     _addIcon = faPlus

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

@@ -1,17 +1,14 @@
 import { Component } from '@angular/core'
-import { LoginService } from '../services/login.service'
-
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { User } from '../api'
+import { User } from 'src/api'
+import { CommonService, LoginService } from 'src/common'
 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'
 
 @Component({
     selector: 'settings-modal',
     templateUrl: './settingsModal.component.pug',
-    // styleUrls: ['./settingsModal.component.scss'],
 })
 export class SettingsModalComponent {
     user: User

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

@@ -3,10 +3,9 @@ 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'
+import { CommonService, LoginService } from 'src/common'
+import { User } from 'src/api'
 
 @Component({
     selector: 'upgrade-modal',

frontend/src/app/index.ts

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

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

@@ -5,9 +5,8 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable, Injector, NgZone } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { UpgradeModalComponent } from '../components/upgradeModal.component'
-import { Config, Gateway, Version } from '../api'
-import { LoginService } from './login.service'
-import { CommonService } from './common.service'
+import { Config, Gateway, Version } from 'src/api'
+import { LoginService, CommonService } from 'src/common'
 
 export class SocketProxy {
     connect$ = new Subject<void>()

frontend/src/common/index.ts

@@ -0,0 +1,24 @@
+import { ModuleWithProviders, NgModule } from '@angular/core'
+import { HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http'
+import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor'
+
+@NgModule({
+    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 },
+            ]
+        }
+    }
+}
+
+export { LoginService } from './services/login.service'
+export { ConfigService } from './services/config.service'
+export { CommonService } from './services/common.service'

frontend/src/common/interceptor.ts

@@ -3,7 +3,7 @@ import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpXsrfTokenExtr
 import { Observable } from 'rxjs'
 import { CommonService } from './services/common.service'
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class UniversalInterceptor implements HttpInterceptor {
     constructor (private commonService: CommonService) { }
 
@@ -19,7 +19,7 @@ export class UniversalInterceptor implements HttpInterceptor {
     }
 }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class BackendXsrfInterceptor implements HttpInterceptor {
     constructor (
         private commonService: CommonService,

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

@@ -2,7 +2,7 @@ import * as semverCompare from 'semver/functions/compare-loose'
 import { AsyncSubject, Subject } from 'rxjs'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { Config, User, Version } from '../api'
+import { Config, User, Version } from '../../api'
 import { LoginService } from './login.service'
 
 

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

@@ -1,7 +1,7 @@
 import { AsyncSubject } from 'rxjs'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { User } from '../api'
+import { User } from '../../api'
 
 
 @Injectable({ providedIn: 'root' })

frontend/src/components/app.component.pug

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

frontend/src/components/app.component.ts

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

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

@@ -1,4 +1,4 @@
-@import "../../theme/vars.scss";
+@import "theme/vars";
 
 :host {
     display: flex;

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

@@ -2,8 +2,8 @@ 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 { Version } from '../../api'
-import { CommonService } from '../../services/common.service'
+import { Version } from 'src/api'
+import { CommonService } from 'src/common'
 
 class DemoConnector {
     constructor (

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

@@ -1,4 +1,4 @@
-@import "../../theme/vars.scss";
+@import "theme/vars";
 @import "~@fontsource/fira-code/latin.css";
 
 :host {

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
 import { Waves } from '../vanta/vanta.waves.js'
-import { InstanceInfo } from '../../api'
+import { InstanceInfo } from 'src/api'
 
 
 @Component({
@@ -15,7 +15,7 @@ export class HomeComponent {
     releaseURL = `${this.githubURL}/releases/latest`
     donationURL = 'https://ko-fi.com/eugeny'
 
-    _logo = require('../../assets/logo.svg')
+    _logo = require('assets/logo.svg')
     _downloadIcon = faDownload
     _loginIcon = faSignInAlt
     _donateIcon = faCoffee

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

@@ -1,7 +1,7 @@
 .container.mt-5.mb-5
     h1 Features
 
-    .row.mb-5
+    .row
         .col-12.col-md-4
             .card.bg-dark
                 img.card-img-top([src]='screenshots.progress')
@@ -23,7 +23,7 @@
                     h5.card-title Customizable hotkeys
                     .card-text Freely customizable single and multi-chord shortcuts.
 
-    .row.mb-5
+    .row
         .col-12.col-md-4
             .card.bg-dark
                 img.card-img-top([src]='screenshots.ssh2')
@@ -45,7 +45,7 @@
                     h5.card-title Zmodem transfers
                     .card-text Send and receive files directly form the prompt in SSH, telnet and serial session.
 
-    .row.mb-5
+    .row
         .col-12.col-md-4
             .card.bg-dark
                 img.card-img-top([src]='screenshots.quake')
@@ -67,7 +67,7 @@
                     h5.card-title Profile manager
                     .card-text Every option configurable combined in a profile startable a hotkey.
 
-    .row.mb-5
+    .row
         .col-12.col-md-4
             .card.bg-dark
                 img.card-img-top([src]='screenshots.fonts')

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

@@ -6,3 +6,7 @@
     aspect-ratio: 2;
     object-fit: cover;
 }
+
+.card {
+    margin-bottom: 20px;
+}

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

@@ -7,17 +7,17 @@ import { Component } from '@angular/core'
 })
 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'),
+        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.scss

@@ -1,4 +1,4 @@
-@import "../../theme/vars.scss";
+@import "theme/vars";
 
 h1 {
     font-family: $font-family-monospace;

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

@@ -15,10 +15,10 @@ export class HomeIndexComponent {
     _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'),
+        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

@@ -3,7 +3,6 @@ import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
-import { HttpClientModule } from '@angular/common/http'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { NgxImageZoomModule } from 'ngx-image-zoom'
 
@@ -11,9 +10,8 @@ import { HomeComponent } from './components/home.component'
 import { HomeIndexComponent } from './components/homeIndex.component'
 import { DemoTerminalComponent } from './components/demoTerminal.component'
 import { HomeFeaturesComponent } from './components/homeFeatures.component'
-import { InstanceInfoResolver } from '../api'
-
-import '@fortawesome/fontawesome-svg-core/styles.css'
+import { InstanceInfoResolver } from 'src/api'
+import { CommonAppModule } from 'src/common'
 
 const ROUTES = [
     {
@@ -37,9 +35,9 @@ const ROUTES = [
 
 @NgModule({
     imports: [
+        CommonAppModule,
         CommonModule,
         FormsModule,
-        HttpClientModule,
         NgbNavModule,
         FontAwesomeModule,
         NgxImageZoomModule,

frontend/src/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, minimal-ui, shrink-to-fit=no">
     <link rel="icon" type="image/png">
-    <link rel="shortcut icon" type="image/png" href="./assets/favicon.png">
+    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
     <title>Tabby - a terminal for a more modern age</title>
     <meta name="title" content="Tabby - a terminal for a more modern age">
     <meta name="description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">

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

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core'
-import { LoginService } from '../services/login.service'
-import { CommonService } from '../services/common.service'
+import { LoginService, CommonService } from 'src/common'
 
 import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons'
 

frontend/src/login/index.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NgxImageZoomModule } from 'ngx-image-zoom'
+
+import { LoginComponent } from './components/login.component'
+import { InstanceInfoResolver } from 'src/api'
+import { CommonAppModule } from 'src/common'
+
+const ROUTES = [
+    {
+        path: '',
+        component: LoginComponent,
+        resolve: {
+            instanceInfo: InstanceInfoResolver,
+        },
+    },
+]
+
+@NgModule({
+    imports: [
+        CommonAppModule,
+        CommonModule,
+        FormsModule,
+        NgbNavModule,
+        FontAwesomeModule,
+        NgxImageZoomModule,
+        RouterModule.forChild(ROUTES),
+    ],
+    declarations: [
+        LoginComponent,
+    ],
+})
+export class LoginModule { }

frontend/src/styles.scss

@@ -9,4 +9,4 @@ body {
 @import "~source-code-pro/source-code-pro.css";
 @import "~source-sans-pro/source-sans-pro.css";
 
-@import "./theme/index.scss"
+@import "theme/index"

frontend/tsconfig.json

@@ -24,7 +24,7 @@
       "es7"
     ],
     "paths": {
-      "src/*": ["./src/*"]
+      "src/*": ["./*"]
     }
   },
   "include": ["src"]

frontend/webpack.config.base.js

@@ -18,7 +18,9 @@ module.exports  = {
     ],
     extensions: ['.ts', '.js'],
     alias: {
+        assets: path.resolve(__dirname, 'assets'),
         src: path.resolve(__dirname, 'src'),
+        theme: path.resolve(__dirname, 'theme'),
     },
   },
   module: {