improvements+fixes

src/app/pages/entry/entry.page.html

@@ -1,12 +1,14 @@
-<page-notfound *ngIf="notfound"></page-notfound>
-<ng-container *ngIf="entry">
-  <ui-entry [entry]="entry" [change]="boundRefresh"></ui-entry>
+<div class="container">
+  <page-notfound *ngIf="notfound"></page-notfound>
+  <ng-container *ngIf="entry">
+    <ui-entry [entry]="entry" [change]="boundRefresh"></ui-entry>
 
-  <p>{{entry.text}}</p>
+    <p class="text">{{entry.text}}</p>
 
-  <ui-commentform [target]="entry.id" [change]="boundReplyCallback"></ui-commentform>
+    <ui-commentform [target]="entry.id" [change]="boundReplyCallback"></ui-commentform>
 
-  <ng-container *ngIf="entry.metadata.comments">
-    <ui-comments [target]="entry.id"></ui-comments>
+    <ng-container *ngIf="entry.metadata.comments">
+      <ui-comments [target]="entry.id"></ui-comments>
+    </ng-container>
   </ng-container>
-</ng-container>
+</div>

src/app/pages/entry/entry.page.scss

@@ -0,0 +1,5 @@
+.text {
+  max-width: 100%;
+  white-space: break-spaces;
+  word-break: break-all;
+}

src/app/pages/entry/entry.page.ts

@@ -7,7 +7,8 @@ import { CommentService } from '../../services/comment.service';
 
 @Component({
   selector: 'page-entry',
-  templateUrl: './entry.page.html'
+  templateUrl: './entry.page.html',
+  styleUrls: [ './entry.page.scss' ]
 })
 export class PageEntry implements OnInit {
 

src/app/pages/login/login.page.html

@@ -6,13 +6,16 @@
         </mat-error>
     </mat-card-content>
     <mat-card-actions>
-        <a class="external-login" href="{{apiUrl}}/{{client.loginUrl}}" *ngFor="let client of externals"
-            mat-raised-button color="accent">{{'login.external.client' | i18n:client.id}}</a>
+        <a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" mat-raised-button
+            color="accent">{{'login.external.client' | i18n:client.id}}</a>
+        <mat-slide-toggle [(ngModel)]="autologin">
+            {{'login.autologin' | i18n}}
+        </mat-slide-toggle>
     </mat-card-actions>
 </mat-card>
 
-<form *ngIf="internalLogin || externals && externals.length < 1" action="{{apiUrl}}/login" method="POST" #loginForm>
-    <mat-card>
+<form action="{{apiUrl}}/login" method="POST" #loginForm>
+    <mat-card *ngIf="internalLogin || externals && externals.length < 1">
         <mat-card-content>
             <h2>{{'login.internal' | i18n}}</h2>
             <mat-error *ngIf="loginInvalid">

src/app/pages/login/login.page.ts

@@ -13,6 +13,7 @@ import { AuthService } from '../../services/auth.service';
 export class PageLogin implements OnInit {
 
   @ViewChild('loginForm') loginForm: ElementRef;
+  autologin: boolean = false;
   internalLogin: boolean;
   loginInvalid: boolean;
   externalLoginInvalid: boolean;
@@ -46,6 +47,12 @@ export class PageLogin implements OnInit {
 
     this.authService.getExternal().subscribe((data: any[]) => {
       this.externals = data;
+      const autologinClient = localStorage.getItem("bstlboard.autologin");
+      for (let client of this.externals) {
+        if (client.id == autologinClient) {
+          window.location.href = this.apiUrl + "/" + client.loginUrl;
+        }
+      }
     })
 
   }
@@ -56,5 +63,15 @@ export class PageLogin implements OnInit {
     }
   }
 
+  externalLogin(client: any): void {
+    console.log(this.autologin);
+    if (this.autologin) {
+      localStorage.setItem("bstlboard.autologin", client.id);
+    } else {
+      localStorage.removeItem("bstlboard.autologin");
+    }
+
+    window.location.href = this.apiUrl + "/" + client.loginUrl;
+  }
 
 }

src/app/pages/settings/settings.page.html

@@ -11,19 +11,17 @@
         </mat-error>
       </mat-form-field>
       <mat-form-field>
-        <textarea matInput placeholder="{{'settings.about' | i18n}}" formControlName="about"></textarea>
+        <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'settings.about' | i18n}}" formControlName="about"></textarea>
         <mat-error>
           {{'settings.about.error' | i18n}}
         </mat-error>
       </mat-form-field>
-      <mat-slide-toggle (change)="darkThemeChange($event)" [checked]="user.darkTheme">
-        {{'settings.darkTheme' | i18n}}
-      </mat-slide-toggle>
     </mat-card-content>
     <mat-card-actions>
       <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
         {{'settings.update' | i18n}}
       </button>
+      <a *ngIf="success" mat-button color="primary">{{'settings.success' | i18n}}</a>
     </mat-card-actions>
   </mat-card>
 

src/app/pages/settings/settings.page.ts

@@ -13,6 +13,7 @@ export class PageSettings implements OnInit {
   auth: any;
   user: any;
   working: boolean = false;
+  success: boolean = false;
   form: FormGroup;
   @ViewChild('formDirective') private formDirective: NgForm;
 
@@ -25,7 +26,6 @@ export class PageSettings implements OnInit {
       username: [ { disabled: true }, Validators.nullValidator ],
       email: [ '', Validators.nullValidator ],
       about: [ '', Validators.nullValidator ],
-      darkTheme: [ '', Validators.nullValidator ],
     });
 
     this.form.get('username').disable();
@@ -35,14 +35,9 @@ export class PageSettings implements OnInit {
       this.form.get('username').setValue(this.user.username);
       this.form.get('email').setValue(this.user.email);
       this.form.get('about').setValue(this.user.about);
-      this.form.get('darkTheme').setValue(this.user.darkTheme);
     })
   }
 
-  darkThemeChange($event) {
-    this.user.darkTheme = $event.checked;
-  }
-
   hasError(controlName: string): boolean {
     return this.form.controls[ controlName ].errors != null;
   }
@@ -53,6 +48,7 @@ export class PageSettings implements OnInit {
     }
 
     this.working = true;
+    this.success = false;
 
     this.user.about = this.form.get('about').value;
     this.user.email = this.form.get('email').value;
@@ -60,6 +56,7 @@ export class PageSettings implements OnInit {
     this.userService.update(this.user).subscribe((data) => {
       this.user = data;
       this.working = false;
+      this.success = true;
     }, (error) => {
       this.working = false;
       if (error.status == 422) {

src/app/pages/submission/submission.page.html

@@ -28,7 +28,7 @@
         </mat-error>
       </mat-form-field>
       <mat-form-field>
-        <textarea matInput placeholder="{{'submission.text' | i18n}}" formControlName="text"></textarea>
+        <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'submission.text' | i18n}}" formControlName="text"></textarea>
         <mat-error>
           {{'submission.text.error' | i18n}}
         </mat-error>

src/app/ui/comment/comment.ui.html

@@ -15,7 +15,7 @@
     </a>
   </small>
 </div>
-<div mat-line>
+<div mat-line class="text">
   {{comment.text}}
 </div>
 

src/app/ui/comment/comment.ui.scss

@@ -6,4 +6,10 @@ small a {
 small a:hover {
   color: inherit !important;
   text-decoration: underline;
-}
+}
+
+.text {
+  max-width: 100%;
+  white-space: break-spaces;
+  word-break: break-all;
+}

src/app/ui/commentform/commentform.ui.html

@@ -1,7 +1,7 @@
 <form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
 
   <mat-form-field>
-    <textarea matInput formControlName="text" placeholder="{{'comment.text' | i18n}}" required></textarea>
+    <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput formControlName="text" placeholder="{{'comment.text' | i18n}}" required></textarea>
     <mat-error *ngIf="hasError('text')">
       {{'comment.text.error' | i18n}}
     </mat-error>

src/app/ui/entries/entries.ui.html

@@ -1,7 +1,7 @@
 <mat-progress-bar *ngIf="!entries || !entries.content" mode="indeterminate"></mat-progress-bar>
 
 <div *ngIf="entries && entries.content" fxLayout="column" fxFlexFill>
-  <mat-list flex-grow>
+  <mat-list>
     <ng-container *ngFor="let entry of entries.content; let i = index">
       <mat-divider *ngIf="i > 0"></mat-divider>
       <mat-list-item>
@@ -13,7 +13,9 @@
 
   <p *ngIf="entries.totalElements == 0">{{'entries.nothing' | i18n}}</p>
 
-  <div fxFlexOffset="auto">
+  <span fxFlexOffset="auto"></span>
+
+  <div>
     <mat-paginator *ngIf="entries.totalElements > 0" [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.number"
       [length]="entries.totalElements" [pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons>
     </mat-paginator>

src/app/ui/main/main.ui.html

@@ -36,21 +36,17 @@
       <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
         <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
       </a>
-      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
-        <mat-icon>login</mat-icon> {{'login' | i18n}}
-      </a>
     </mat-nav-list>
 
     <span class="spacer"></span>
 
-
     <mat-nav-list>
       <a *ngFor="let locale of locales" mat-list-item (click)="setLocale(locale)">
         <mat-icon *ngIf="locale == currentLocale">done</mat-icon>{{'locale.' + locale + '.long' |
         i18n}}
       </a>
-      <a mat-list-item>
-        <mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme  == 'true'">
+      <a mat-list-item (click)="toggleDarkTheme()" >
+        <mat-slide-toggle [checked]="darkTheme">
           {{'darkTheme' | i18n}}
         </mat-slide-toggle>
       </a>
@@ -60,8 +56,6 @@
 
   <!-- Main content -->
   <mat-sidenav-content>
-    <div class="container">
-      <router-outlet></router-outlet>
-    </div>
+    <router-outlet></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/ui/main/main.ui.ts

@@ -15,7 +15,7 @@ import { DateAdapter } from '@angular/material/core';
 
 export class UiMain {
   opened = true;
-  darkTheme = "false";
+  darkTheme: boolean = false;
   title = 'bstlboard';
   currentLocale: String;
   datetimeformat: String;
@@ -51,7 +51,7 @@ export class UiMain {
     }
 
     if (localStorage.getItem("bstlboard.darkTheme") == "true") {
-      this.darkTheme = "true";
+      this.darkTheme = true;
       window.document.body.classList.add("dark-theme");
     }
   }
@@ -72,18 +72,14 @@ export class UiMain {
     }
   }
 
-  darkThemeChange($event) {
-    if ($event.checked) {
-      this.darkTheme = "true";
-    } else {
-      this.darkTheme = "false";
-    }
+  toggleDarkTheme() {
+    this.darkTheme = !this.darkTheme;
 
-    localStorage.setItem("bstlboard.darkTheme", this.darkTheme);
+    localStorage.setItem("bstlboard.darkTheme", this.darkTheme ? "true" : "false");
 
     if (this.auth && this.auth.authenticated) {
       this.userService.get().subscribe((user: any) => {
-        user.darkTheme = $event.checked;
+        user.darkTheme = this.darkTheme;
         this.userService.update(user).subscribe(() => {
           window.location.reload();
         })
@@ -95,6 +91,7 @@ export class UiMain {
   }
 
   logout() {
+    localStorage.removeItem("bstlboard.autologin");
     this.authService.logout().subscribe(data => {
       this.router.navigate([ "" ]).then(() => {
         window.location.reload();

src/styles.scss

@@ -174,34 +174,12 @@ mat-sidenav-container {
 .container {
   width: 100%;
   max-width: 100%;
-  padding-right: 2px;
-  padding-left: 2px;
+  padding-right: 15px;
+  padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   margin-top: 15px;
   margin-bottom: 15px;
-  overflow-x: none;
-  overflow-y: auto;
-
-  @media screen and (min-width: 576px) {
-    padding-right: 3px;
-    padding-left: 3px;
-  }
-
-  @media screen and (min-width: 768px) {
-    padding-right: 15px;
-    padding-left: 15px;
-  }
-
-  @media screen and (min-width: 992px) {
-    padding-right: 25px;
-    padding-left: 25px;
-  }
-
-  @media screen and (min-width: 1200px) {
-    padding-right: 45px;
-    padding-left: 45px;
-  }
 }
 
 .text-center {