improvements+fixes
This commit is contained in:
parent
a94647d549
commit
91958dc3ff
@ -1,12 +1,14 @@
|
|||||||
<page-notfound *ngIf="notfound"></page-notfound>
|
<div class="container">
|
||||||
<ng-container *ngIf="entry">
|
<page-notfound *ngIf="notfound"></page-notfound>
|
||||||
<ui-entry [entry]="entry" [change]="boundRefresh"></ui-entry>
|
<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">
|
<ng-container *ngIf="entry.metadata.comments">
|
||||||
<ui-comments [target]="entry.id"></ui-comments>
|
<ui-comments [target]="entry.id"></ui-comments>
|
||||||
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</div>
|
5
src/app/pages/entry/entry.page.scss
Normal file
5
src/app/pages/entry/entry.page.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.text {
|
||||||
|
max-width: 100%;
|
||||||
|
white-space: break-spaces;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
@ -7,7 +7,8 @@ import { CommentService } from '../../services/comment.service';
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'page-entry',
|
selector: 'page-entry',
|
||||||
templateUrl: './entry.page.html'
|
templateUrl: './entry.page.html',
|
||||||
|
styleUrls: [ './entry.page.scss' ]
|
||||||
})
|
})
|
||||||
export class PageEntry implements OnInit {
|
export class PageEntry implements OnInit {
|
||||||
|
|
||||||
|
@ -6,13 +6,16 @@
|
|||||||
</mat-error>
|
</mat-error>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
<mat-card-actions>
|
<mat-card-actions>
|
||||||
<a class="external-login" href="{{apiUrl}}/{{client.loginUrl}}" *ngFor="let client of externals"
|
<a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" mat-raised-button
|
||||||
mat-raised-button color="accent">{{'login.external.client' | i18n:client.id}}</a>
|
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-actions>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
<form *ngIf="internalLogin || externals && externals.length < 1" action="{{apiUrl}}/login" method="POST" #loginForm>
|
<form action="{{apiUrl}}/login" method="POST" #loginForm>
|
||||||
<mat-card>
|
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<h2>{{'login.internal' | i18n}}</h2>
|
<h2>{{'login.internal' | i18n}}</h2>
|
||||||
<mat-error *ngIf="loginInvalid">
|
<mat-error *ngIf="loginInvalid">
|
||||||
|
@ -13,6 +13,7 @@ import { AuthService } from '../../services/auth.service';
|
|||||||
export class PageLogin implements OnInit {
|
export class PageLogin implements OnInit {
|
||||||
|
|
||||||
@ViewChild('loginForm') loginForm: ElementRef;
|
@ViewChild('loginForm') loginForm: ElementRef;
|
||||||
|
autologin: boolean = false;
|
||||||
internalLogin: boolean;
|
internalLogin: boolean;
|
||||||
loginInvalid: boolean;
|
loginInvalid: boolean;
|
||||||
externalLoginInvalid: boolean;
|
externalLoginInvalid: boolean;
|
||||||
@ -46,6 +47,12 @@ export class PageLogin implements OnInit {
|
|||||||
|
|
||||||
this.authService.getExternal().subscribe((data: any[]) => {
|
this.authService.getExternal().subscribe((data: any[]) => {
|
||||||
this.externals = data;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -11,19 +11,17 @@
|
|||||||
</mat-error>
|
</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<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>
|
<mat-error>
|
||||||
{{'settings.about.error' | i18n}}
|
{{'settings.about.error' | i18n}}
|
||||||
</mat-error>
|
</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-slide-toggle (change)="darkThemeChange($event)" [checked]="user.darkTheme">
|
|
||||||
{{'settings.darkTheme' | i18n}}
|
|
||||||
</mat-slide-toggle>
|
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
<mat-card-actions>
|
<mat-card-actions>
|
||||||
<button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
|
<button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
|
||||||
{{'settings.update' | i18n}}
|
{{'settings.update' | i18n}}
|
||||||
</button>
|
</button>
|
||||||
|
<a *ngIf="success" mat-button color="primary">{{'settings.success' | i18n}}</a>
|
||||||
</mat-card-actions>
|
</mat-card-actions>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
|
@ -13,6 +13,7 @@ export class PageSettings implements OnInit {
|
|||||||
auth: any;
|
auth: any;
|
||||||
user: any;
|
user: any;
|
||||||
working: boolean = false;
|
working: boolean = false;
|
||||||
|
success: boolean = false;
|
||||||
form: FormGroup;
|
form: FormGroup;
|
||||||
@ViewChild('formDirective') private formDirective: NgForm;
|
@ViewChild('formDirective') private formDirective: NgForm;
|
||||||
|
|
||||||
@ -25,7 +26,6 @@ export class PageSettings implements OnInit {
|
|||||||
username: [ { disabled: true }, Validators.nullValidator ],
|
username: [ { disabled: true }, Validators.nullValidator ],
|
||||||
email: [ '', Validators.nullValidator ],
|
email: [ '', Validators.nullValidator ],
|
||||||
about: [ '', Validators.nullValidator ],
|
about: [ '', Validators.nullValidator ],
|
||||||
darkTheme: [ '', Validators.nullValidator ],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.form.get('username').disable();
|
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('username').setValue(this.user.username);
|
||||||
this.form.get('email').setValue(this.user.email);
|
this.form.get('email').setValue(this.user.email);
|
||||||
this.form.get('about').setValue(this.user.about);
|
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 {
|
hasError(controlName: string): boolean {
|
||||||
return this.form.controls[ controlName ].errors != null;
|
return this.form.controls[ controlName ].errors != null;
|
||||||
}
|
}
|
||||||
@ -53,6 +48,7 @@ export class PageSettings implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.working = true;
|
this.working = true;
|
||||||
|
this.success = false;
|
||||||
|
|
||||||
this.user.about = this.form.get('about').value;
|
this.user.about = this.form.get('about').value;
|
||||||
this.user.email = this.form.get('email').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.userService.update(this.user).subscribe((data) => {
|
||||||
this.user = data;
|
this.user = data;
|
||||||
this.working = false;
|
this.working = false;
|
||||||
|
this.success = true;
|
||||||
}, (error) => {
|
}, (error) => {
|
||||||
this.working = false;
|
this.working = false;
|
||||||
if (error.status == 422) {
|
if (error.status == 422) {
|
||||||
|
@ -28,7 +28,7 @@
|
|||||||
</mat-error>
|
</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<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>
|
<mat-error>
|
||||||
{{'submission.text.error' | i18n}}
|
{{'submission.text.error' | i18n}}
|
||||||
</mat-error>
|
</mat-error>
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
<div mat-line>
|
<div mat-line class="text">
|
||||||
{{comment.text}}
|
{{comment.text}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -7,3 +7,9 @@ small a:hover {
|
|||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
max-width: 100%;
|
||||||
|
white-space: break-spaces;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
|
<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
|
||||||
|
|
||||||
<mat-form-field>
|
<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')">
|
<mat-error *ngIf="hasError('text')">
|
||||||
{{'comment.text.error' | i18n}}
|
{{'comment.text.error' | i18n}}
|
||||||
</mat-error>
|
</mat-error>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<mat-progress-bar *ngIf="!entries || !entries.content" mode="indeterminate"></mat-progress-bar>
|
<mat-progress-bar *ngIf="!entries || !entries.content" mode="indeterminate"></mat-progress-bar>
|
||||||
|
|
||||||
<div *ngIf="entries && entries.content" fxLayout="column" fxFlexFill>
|
<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">
|
<ng-container *ngFor="let entry of entries.content; let i = index">
|
||||||
<mat-divider *ngIf="i > 0"></mat-divider>
|
<mat-divider *ngIf="i > 0"></mat-divider>
|
||||||
<mat-list-item>
|
<mat-list-item>
|
||||||
@ -13,7 +13,9 @@
|
|||||||
|
|
||||||
<p *ngIf="entries.totalElements == 0">{{'entries.nothing' | i18n}}</p>
|
<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"
|
<mat-paginator *ngIf="entries.totalElements > 0" [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.number"
|
||||||
[length]="entries.totalElements" [pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons>
|
[length]="entries.totalElements" [pageSize]="entries.size" (page)="update && update($event)" showFirstLastButtons>
|
||||||
</mat-paginator>
|
</mat-paginator>
|
||||||
|
@ -36,21 +36,17 @@
|
|||||||
<a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
|
<a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
|
||||||
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
|
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
|
||||||
</a>
|
</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>
|
</mat-nav-list>
|
||||||
|
|
||||||
<span class="spacer"></span>
|
<span class="spacer"></span>
|
||||||
|
|
||||||
|
|
||||||
<mat-nav-list>
|
<mat-nav-list>
|
||||||
<a *ngFor="let locale of locales" mat-list-item (click)="setLocale(locale)">
|
<a *ngFor="let locale of locales" mat-list-item (click)="setLocale(locale)">
|
||||||
<mat-icon *ngIf="locale == currentLocale">done</mat-icon>{{'locale.' + locale + '.long' |
|
<mat-icon *ngIf="locale == currentLocale">done</mat-icon>{{'locale.' + locale + '.long' |
|
||||||
i18n}}
|
i18n}}
|
||||||
</a>
|
</a>
|
||||||
<a mat-list-item>
|
<a mat-list-item (click)="toggleDarkTheme()" >
|
||||||
<mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme == 'true'">
|
<mat-slide-toggle [checked]="darkTheme">
|
||||||
{{'darkTheme' | i18n}}
|
{{'darkTheme' | i18n}}
|
||||||
</mat-slide-toggle>
|
</mat-slide-toggle>
|
||||||
</a>
|
</a>
|
||||||
@ -60,8 +56,6 @@
|
|||||||
|
|
||||||
<!-- Main content -->
|
<!-- Main content -->
|
||||||
<mat-sidenav-content>
|
<mat-sidenav-content>
|
||||||
<div class="container">
|
<router-outlet></router-outlet>
|
||||||
<router-outlet></router-outlet>
|
|
||||||
</div>
|
|
||||||
</mat-sidenav-content>
|
</mat-sidenav-content>
|
||||||
</mat-sidenav-container>
|
</mat-sidenav-container>
|
@ -15,7 +15,7 @@ import { DateAdapter } from '@angular/material/core';
|
|||||||
|
|
||||||
export class UiMain {
|
export class UiMain {
|
||||||
opened = true;
|
opened = true;
|
||||||
darkTheme = "false";
|
darkTheme: boolean = false;
|
||||||
title = 'bstlboard';
|
title = 'bstlboard';
|
||||||
currentLocale: String;
|
currentLocale: String;
|
||||||
datetimeformat: String;
|
datetimeformat: String;
|
||||||
@ -51,7 +51,7 @@ export class UiMain {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (localStorage.getItem("bstlboard.darkTheme") == "true") {
|
if (localStorage.getItem("bstlboard.darkTheme") == "true") {
|
||||||
this.darkTheme = "true";
|
this.darkTheme = true;
|
||||||
window.document.body.classList.add("dark-theme");
|
window.document.body.classList.add("dark-theme");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -72,18 +72,14 @@ export class UiMain {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
darkThemeChange($event) {
|
toggleDarkTheme() {
|
||||||
if ($event.checked) {
|
this.darkTheme = !this.darkTheme;
|
||||||
this.darkTheme = "true";
|
|
||||||
} else {
|
|
||||||
this.darkTheme = "false";
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem("bstlboard.darkTheme", this.darkTheme);
|
localStorage.setItem("bstlboard.darkTheme", this.darkTheme ? "true" : "false");
|
||||||
|
|
||||||
if (this.auth && this.auth.authenticated) {
|
if (this.auth && this.auth.authenticated) {
|
||||||
this.userService.get().subscribe((user: any) => {
|
this.userService.get().subscribe((user: any) => {
|
||||||
user.darkTheme = $event.checked;
|
user.darkTheme = this.darkTheme;
|
||||||
this.userService.update(user).subscribe(() => {
|
this.userService.update(user).subscribe(() => {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
})
|
})
|
||||||
@ -95,6 +91,7 @@ export class UiMain {
|
|||||||
}
|
}
|
||||||
|
|
||||||
logout() {
|
logout() {
|
||||||
|
localStorage.removeItem("bstlboard.autologin");
|
||||||
this.authService.logout().subscribe(data => {
|
this.authService.logout().subscribe(data => {
|
||||||
this.router.navigate([ "" ]).then(() => {
|
this.router.navigate([ "" ]).then(() => {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
|
@ -174,34 +174,12 @@ mat-sidenav-container {
|
|||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding-right: 2px;
|
padding-right: 15px;
|
||||||
padding-left: 2px;
|
padding-left: 15px;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
margin-bottom: 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 {
|
.text-center {
|
||||||
|
Loading…
Reference in New Issue
Block a user