wip

src/app.module.ts

@@ -5,6 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { AppComponent } from './components/app.component'
+import { MainComponent } from './components/main.component';
 
 @NgModule({
     imports: [
@@ -17,6 +18,7 @@ import { AppComponent } from './components/app.component'
     ],
     declarations: [
         AppComponent,
+        MainComponent,
     ],
     bootstrap: [AppComponent]
 })

src/components/app.component.pug

@@ -1,55 +1,2 @@
-.sidebar
-    img.logo(src='{{_logo}}')
-
-    div(ngbDropdown, placement='bottom-right')
-        button.btn.btn-secondary(ngbDropdownToggle)
-            fa-icon([icon]='_cogIcon', [fixedWidth]='true')
-
-        .config-menu(ngbDropdownMenu)
-            .header(*ngIf='getActiveConfig()')
-                .dropdown-header Active config
-                .title {{getActiveConfig().modified_at}}
-                div(*ngIf='activeVersion')
-                    div App version:
-                    div(ngbDropdown)
-                        button.btn.btn-secondary(ngbDropdownToggle) {{activeVersion.version}}
-                        div(ngbDropdownMenu)
-                            a(
-                                *ngFor='let version of versions',
-                                ngbDropdownItem,
-                                [class.active]='version == activeVersion',
-                                (click)='selectVersion(version)'
-                            ) {{version.version}}
-
-                    .btn-toolbar
-                        button.btn.btn-light.w-50((click)='duplicateConfig()')
-                            fa-icon([icon]='_copyIcon', [fixedWidth]='true')
-                            span Duplicate
-
-                        button.btn.btn-light.w-50((click)='deleteConfig()')
-                            fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
-                            span Delete
-
-            div(*ngIf='configs.length > 1')
-                .dropdown-header All configs
-
-                ng-container(*ngFor='let config of configs')
-                    a(
-                        *ngIf='config !== getActiveConfig()',
-                        ngbDropdownItem,
-                        (click)='selectConfig(config)'
-                    ) Config modified at {{config.modified_at}}
-
-            button.btn.btn-light.w-100((click)='createNewConfig()')
-                fa-icon([icon]='_addIcon', [fixedWidth]='true')
-                span New config
-
-    div(ngbDropdown, placement='bottom-right')
-        button.btn.btn-secondary(ngbDropdownToggle)
-            fa-icon([icon]='_userIcon', [fixedWidth]='true')
-
-        div(ngbDropdownMenu)
-            a(ngbDropdownItem, (click)='logout()') Logout
-
-.terminal([hidden]='!activeVersion')
-    iframe(#iframe)
+main(*ngIf='ready && user')
+login(*ngIf='ready && !user')

src/components/app.component.scss

@@ -1,41 +0,0 @@
-:host {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    display: flex;
-}
-
-.sidebar {
-    width: 64px;
-    flex: none;
-
-    .logo {
-        width: 64px;
-        height: 64px;
-    }
-}
-
-.terminal {
-    flex: 1 1 0;
-    overflow: hidden;
-    position: relative;
-}
-
-iframe {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
-}
-
-
-.config-menu {
-    .header {
-        border-bottom: 1px solid black;
-    }
-}

src/components/app.component.ts

@@ -1,9 +1,5 @@
-import * as semverGT from 'semver/functions/gt'
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
-import { AppConnectorService } from '../services/appConnector.service'
-
-import { faCog, faUser, faCopy, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
 
 @Component({
     selector: 'app',
@@ -11,95 +7,18 @@ import { faCog, faUser, faCopy, faTrash, faPlus } from '@fortawesome/free-solid-
     styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-    _logo = require('../assets/logo.svg')
-    _cogIcon = faCog
-    _userIcon = faUser
-    _copyIcon = faCopy
-    _addIcon = faPlus
-    _deleteIcon = faTrash
-
-    configs: any[] = []
-    versions: any[] = []
-    activeVersion?: any
-    @ViewChild('iframe') iframe: ElementRef
+    user: any
+    ready = false
 
     constructor (
-        private appConnector: AppConnectorService,
         private http: HttpClient,
-    ) {
-        window.addEventListener('message', event => {
-            if (event.data === 'request-connector') {
-                this.iframe.nativeElement.contentWindow['__connector__'] = this.appConnector
-                this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
-            }
-        })
-    }
+    ) { }
 
-    async ngAfterViewInit () {
-        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) => semverGT(a, b))
-
-        if (!this.configs.length) {
-            await this.createNewConfig()
+    async ngOnInit () {
+        const user = await this.http.get('/api/1/user').toPromise()
+        if (user.id) {
+            this.user = user
         }
-
-        this.selectConfig(this.configs[0])
-    }
-
-    async createNewConfig () {
-        this.configs.push(await this.http.post('/api/1/configs', {
-            content: '{}',
-            last_used_with_version: this.versions[0].version,
-        }).toPromise())
-    }
-
-    async duplicateConfig () {
-        const copy = {...this.appConnector.config, pk: undefined}
-        this.configs.push(await this.http.post('/api/1/configs', copy).toPromise())
-    }
-
-    unloadApp () {
-        delete this.activeVersion
-        this.iframe.nativeElement.src = 'about:blank'
-    }
-
-    loadApp (version) {
-        this.iframe.nativeElement.src = `/terminal?${version.version}`
-        this.activeVersion = version
-    }
-
-    getActiveConfig () {
-        return this.appConnector.config
-    }
-
-    selectVersion (version: any) {
-        // TODO check config incompatibility
-        this.unloadApp()
-        setTimeout(() => {
-            this.loadApp(version)
-        })
-    }
-
-    async selectConfig (config: any) {
-        let matchingVersion = this.versions.find(x => x.version === config.last_used_with_version)
-        if (!matchingVersion) {
-            // TODO ask to upgrade
-            matchingVersion = this.versions[0]
-        }
-
-        this.appConnector.config = config
-
-        const result = await this.http.patch(`/api/1/configs/${config.id}`, {
-            last_used_with_version: matchingVersion.version,
-        }).toPromise()
-        Object.assign(config, result)
-
-        this.selectVersion(matchingVersion)
-    }
-
-    async logout () {
-        await this.http.post('/api/1/auth/logout', null).toPromise()
+        this.ready = true
     }
 }

src/components/main.component.pug

@@ -0,0 +1,57 @@
+.sidebar
+    img.logo(src='{{_logo}}')
+
+    div(ngbDropdown, placement='bottom-right')
+        button.btn(ngbDropdownToggle)
+            fa-icon([icon]='_cogIcon', [fixedWidth]='true')
+
+        .config-menu(ngbDropdownMenu)
+            .header(*ngIf='getActiveConfig()')
+                .d-flex.align-items-center.py-2.px-4
+                    .me-auto
+                        label Active config
+                        .title {{getActiveConfig().modified_at}}
+
+                    button.btn.btn-semi.me-2((click)='duplicateConfig()')
+                        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.px-4(*ngIf='activeVersion')
+                    .me-auto App version:
+                    div(ngbDropdown)
+                        button.btn.btn-semi(ngbDropdownToggle) {{activeVersion.version}}
+                        div(ngbDropdownMenu)
+                            a(
+                                *ngFor='let version of versions',
+                                ngbDropdownItem,
+                                [class.active]='version == activeVersion',
+                                (click)='selectVersion(version)'
+                            ) {{version.version}}
+
+            div(*ngIf='configs.length > 1')
+                .dropdown-header All configs
+
+                ng-container(*ngFor='let config of configs')
+                    a(
+                        *ngIf='config !== getActiveConfig()',
+                        ngbDropdownItem,
+                        (click)='selectConfig(config)',
+                        href='#'
+                    ) Config modified at {{config.modified_at}}
+
+            .p-3
+                button.btn.btn-semi.w-100((click)='createNewConfig()')
+                    fa-icon([icon]='_addIcon', [fixedWidth]='true')
+                    span New config
+
+    div(ngbDropdown, placement='bottom-right')
+        button.btn(ngbDropdownToggle)
+            fa-icon([icon]='_userIcon', [fixedWidth]='true')
+
+        div(ngbDropdownMenu)
+            a(ngbDropdownItem, (click)='logout()', href='#') Logout
+
+.terminal([hidden]='!activeVersion')
+    iframe(#iframe)

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;
+    }
+}

src/components/main.component.ts

@@ -0,0 +1,106 @@
+import * as semverGT from 'semver/functions/gt'
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { AppConnectorService } from '../services/appConnector.service'
+
+import { faCog, faUser, faCopy, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+    selector: 'main',
+    templateUrl: './main.component.pug',
+    styleUrls: ['./main.component.scss'],
+})
+export class MainComponent {
+    _logo = require('../assets/logo.svg')
+    _cogIcon = faCog
+    _userIcon = faUser
+    _copyIcon = faCopy
+    _addIcon = faPlus
+    _deleteIcon = faTrash
+
+    configs: any[] = []
+    versions: any[] = []
+    activeVersion?: any
+    @ViewChild('iframe') iframe: ElementRef
+
+    constructor (
+        private appConnector: AppConnectorService,
+        private http: HttpClient,
+    ) {
+        window.addEventListener('message', event => {
+            if (event.data === 'request-connector') {
+                this.iframe.nativeElement.contentWindow['__connector__'] = this.appConnector
+                this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+            }
+        })
+    }
+
+    async ngAfterViewInit () {
+        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) => semverGT(a, b))
+
+        if (!this.configs.length) {
+            await this.createNewConfig()
+        }
+
+        this.selectConfig(this.configs[0])
+    }
+
+    async createNewConfig () {
+        this.configs.push(await this.http.post('/api/1/configs', {
+            content: '{}',
+            last_used_with_version: this.versions[0].version,
+        }).toPromise())
+    }
+
+    async duplicateConfig () {
+        const copy = {...this.appConnector.config, pk: undefined}
+        this.configs.push(await this.http.post('/api/1/configs', copy).toPromise())
+    }
+
+    unloadApp () {
+        delete this.activeVersion
+        this.iframe.nativeElement.src = 'about:blank'
+    }
+
+    loadApp (version) {
+        this.iframe.nativeElement.src = `/terminal?${version.version}`
+        this.activeVersion = version
+    }
+
+    getActiveConfig () {
+        return this.appConnector.config
+    }
+
+    selectVersion (version: any) {
+        // TODO check config incompatibility
+        this.unloadApp()
+        setTimeout(() => {
+            this.loadApp(version)
+        })
+    }
+
+    async selectConfig (config: any) {
+        let matchingVersion = this.versions.find(x => x.version === config.last_used_with_version)
+        if (!matchingVersion) {
+            // TODO ask to upgrade
+            matchingVersion = this.versions[0]
+        }
+
+        this.appConnector.config = config
+
+        const result = await this.http.patch(`/api/1/configs/${config.id}`, {
+            last_used_with_version: matchingVersion.version,
+        }).toPromise()
+        Object.assign(config, result)
+
+        this.selectVersion(matchingVersion)
+    }
+
+    async logout () {
+        await this.http.post('/api/1/auth/logout', null).toPromise()
+        location.href = '/'
+    }
+}

src/styles.scss

@@ -6,4 +6,4 @@ body {
     overscroll-behavior: none;
 }
 
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "./theme/index.scss"

src/theme/index.scss

@@ -0,0 +1,64 @@
+@import "vars";
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+// @import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+// @import "~bootstrap/scss/nav";
+// @import "~bootstrap/scss/navbar";
+// @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/progress";
+@import "~bootstrap/scss/list-group";
+// @import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/tooltip";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+// @import "~bootstrap/scss/spinners";
+// @import "~bootstrap/scss/offcanvas";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+@import "~bootstrap/scss/utilities/api";
+
+::-webkit-scrollbar-track
+{
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: $gray-900;
+}
+
+::-webkit-scrollbar
+{
+  height: 6px;
+  width: 6px;
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+  background-color: $gray-700;
+}
+
+
+.dropdown-menu {
+  box-shadow: $dropdown-box-shadow;
+}

src/theme/vars.scss

@@ -0,0 +1,187 @@
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+
+$red:    #d9534f !default;
+$orange: #f0ad4e !default;
+$yellow: #ffd500 !default;
+$green:  #5cb85c !default;
+$blue:   #0275d8 !default;
+$teal:   #5bc0de !default;
+$pink:   #ff5b77 !default;
+$purple: #613d7c !default;
+$semi: rgba(0,0,0, .5);
+
+
+@import "~bootstrap/scss/functions";
+
+$table-bg: rgba(255,255,255,.05);
+$table-bg-hover: rgba(255,255,255,.1);
+$table-border-color: rgba(255,255,255,.1);
+
+$theme-colors: (
+  primary: $blue,
+  secondary: #38434e,
+  success: $green,
+  info: $blue,
+  warning: $orange,
+  danger: $red,
+  light: $gray-300,
+  dark: #0e151d,
+  rare: $purple,
+  semi: $semi
+);
+
+$body-color: #ccc;
+$body-bg: #0c131b;
+
+$font-family-sans-serif: "Source Sans Pro";
+$font-family-monospace: "Source Code Pro";
+$font-size-base: 14rem / 16;
+$font-size-lg: 1.28rem;
+$font-size-sm: .85rem;
+
+$line-height-base: 1.6;
+
+$border-radius:               .4rem;
+$border-radius-lg:            .6rem;
+$border-radius-sm:            .2rem;
+
+$box-shadow: 0 .5rem 1rem rgba($black, .5) !default;
+
+// -----
+
+$headings-color: #ced9e2;
+$headings-font-weight: lighter;
+
+$input-btn-padding-y: .3rem;
+$input-btn-padding-x: .9rem;
+$input-btn-line-height: 1.6;
+$input-btn-line-height-sm: 1.8;
+$input-btn-line-height-lg: 1.8;
+$btn-focus-width: 1px;
+
+$h4-font-size: 18px;
+
+$link-color: $gray-400;
+$link-hover-color: $white;
+$link-hover-decoration: none;
+
+$component-active-color: $white;
+$component-active-bg: #2f3a42;
+
+$list-group-bg: $table-bg;
+$list-group-border-color: $table-border-color;
+
+$list-group-item-padding-y: 0.8rem;
+$list-group-item-padding-x: 1rem;
+
+$list-group-hover-bg: $table-bg-hover;
+$list-group-active-bg: rgba(255,255,255,.2);
+$list-group-active-color: $component-active-color;
+$list-group-active-border-color: translate;
+
+$list-group-action-color: $body-color;
+$list-group-action-hover-color: white;
+
+$list-group-action-active-color: $component-active-color;
+$list-group-action-active-bg: $list-group-active-bg;
+
+$alert-padding-y: 0.9rem;
+$alert-padding-x: 1.25rem;
+
+$transition-base: all .15s ease-in-out;
+$transition-fade: opacity .1s linear;
+$transition-collapse: height .35s ease;
+$btn-transition: all .15s ease-in-out;
+
+$popover-bg: $body-bg;
+$popover-body-color: $body-color;
+$popover-header-bg: $table-bg-hover;
+$popover-header-color: $headings-color;
+$popover-arrow-color: $popover-bg;
+$popover-max-width: 360px;
+
+$btn-border-width:  2px;
+
+$input-bg:                       #181e23;
+$input-disabled-bg:              #2e3235;
+
+$input-color:                    #ddd;
+$input-border-color:             $input-bg;
+$input-border-width:             2px;
+
+$input-focus-bg:                 $input-bg;
+$input-focus-border-color:       rgba(171, 171, 171, 0.61);
+$input-focus-color:              $input-color;
+
+$input-group-addon-color: $input-color;
+$input-group-addon-bg: $input-bg;
+$input-group-addon-border-color: transparent;
+$input-group-btn-border-color: $input-bg;
+
+$nav-tabs-border-radius: 0;
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-width: 2px;
+$nav-tabs-link-hover-border-color: transparent;
+$nav-tabs-link-active-color: #eee;
+$nav-tabs-link-active-bg: transparent;
+$nav-tabs-link-active-border-color: #eee;
+
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+
+$dropdown-bg: $body-bg;
+$dropdown-color: $body-color;
+$dropdown-border-width: 1px;
+$dropdown-header-color: $gray-500;
+
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-color: #eee;
+$dropdown-link-hover-bg: rgba(255,255,255,.04);
+$dropdown-link-active-color: white;
+$dropdown-link-active-bg: rgba(0, 0, 0, .2);
+$dropdown-item-padding-y: 0.5rem;
+$dropdown-item-padding-x: 1.5rem;
+
+
+$code-color: $orange;
+$code-bg: rgba(0, 0, 0, .25);
+$code-padding-y: 3px;
+$code-padding-x: 5px;
+$pre-bg: $dropdown-bg;
+$pre-color: $dropdown-link-color;
+
+$badge-font-size: 0.75rem;
+$badge-font-weight: bold;
+$badge-padding-y: 4px;
+$badge-padding-x: 6px;
+
+
+$custom-control-indicator-size: 1.2rem;
+$custom-control-indicator-bg: $body-bg;
+$custom-control-indicator-border-color: lighten($body-bg, 25%);
+$custom-control-indicator-checked-bg: theme-color("primary");
+$custom-control-indicator-checked-color: $body-bg;
+$custom-control-indicator-checked-border-color: transparent;
+$custom-control-indicator-active-bg: rgba(255, 255, 0, 0.5);
+
+
+$modal-content-bg:               $body-bg;
+$modal-content-border-color:     $body-bg;
+$modal-header-border-width:         0;
+$modal-footer-border-color:         #222;
+$modal-footer-border-width:         1px;
+$modal-content-border-width:        0;
+
+$progress-bg: $table-bg;
+$progress-height: 3px;