styling
This commit is contained in:
parent
a7ec8f8aa1
commit
6a61edd3f8
@ -33,7 +33,7 @@ export class AuthGuard implements CanActivate {
|
||||
return true;
|
||||
}
|
||||
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + next.url), { skipLocationChange: true });
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { skipLocationChange: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -78,7 +78,7 @@ export class AuthenticatedGuard implements CanActivate {
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/login?target=' + encodeURIComponent(state.url)), { skipLocationChange: true, replaceUrl: true });
|
||||
}
|
||||
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + next.url), { skipLocationChange: true });
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { skipLocationChange: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -98,7 +98,7 @@ export class AnonymousGuard implements CanActivate {
|
||||
if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) {
|
||||
return true;
|
||||
}
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + next.url), { replaceUrl: true });
|
||||
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { replaceUrl: true });
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1,48 +1,51 @@
|
||||
<mat-card *ngIf="externals && externals.length > 0">
|
||||
<mat-card-content>
|
||||
<h2>{{'login.external' | i18n}}</h2>
|
||||
<mat-error *ngIf="externalLoginInvalid">
|
||||
{{'login.external.invalid' | i18n}}
|
||||
</mat-error>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<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 action="{{apiUrl}}/login" method="POST" #loginForm>
|
||||
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
|
||||
<div class="container">
|
||||
<mat-card *ngIf="externals && externals.length > 0" class="box">
|
||||
<mat-card-content>
|
||||
<h2>{{'login.internal' | i18n}}</h2>
|
||||
<mat-error *ngIf="loginInvalid">
|
||||
{{'login.invalid' | i18n}}
|
||||
<h2>{{'login.external' | i18n}}</h2>
|
||||
<mat-error *ngIf="externalLoginInvalid">
|
||||
{{'login.external.invalid' | i18n}}
|
||||
</mat-error>
|
||||
<mat-form-field>
|
||||
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required matAutofocus>
|
||||
<mat-error>
|
||||
{{'username.missing' | i18n}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
|
||||
required>
|
||||
<mat-error>
|
||||
{{'password.invalid.hint' | i18n}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-slide-toggle id="remember-me" name="remember-me">
|
||||
{{'login.keepSession' | i18n}}
|
||||
</mat-slide-toggle>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
|
||||
[disabled]="loginForm.invalid">{{'login' |
|
||||
i18n}}<mat-icon style="font-size: 1em;">open_in_new
|
||||
</mat-icon></button>
|
||||
<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>
|
||||
|
||||
<form action="{{apiUrl}}/login" method="POST" #loginForm class="box">
|
||||
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
|
||||
<mat-card-content>
|
||||
<h2>{{'login.internal' | i18n}}</h2>
|
||||
<mat-error *ngIf="loginInvalid">
|
||||
{{'login.invalid' | i18n}}
|
||||
</mat-error>
|
||||
<mat-form-field>
|
||||
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required
|
||||
matAutofocus>
|
||||
<mat-error>
|
||||
{{'username.missing' | i18n}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
|
||||
required>
|
||||
<mat-error>
|
||||
{{'password.invalid.hint' | i18n}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-slide-toggle id="remember-me" name="remember-me">
|
||||
{{'login.keepSession' | i18n}}
|
||||
</mat-slide-toggle>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
|
||||
[disabled]="loginForm.invalid">{{'login' |
|
||||
i18n}}<mat-icon style="font-size: 1em;">open_in_new
|
||||
</mat-icon></button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</form>
|
||||
</div>
|
@ -5,4 +5,21 @@ mat-form-field {
|
||||
a.external-login {
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 5px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
<mat-card class="accent">
|
||||
<mat-card class="accent box">
|
||||
<mat-card-header>
|
||||
<mat-card-title>404</mat-card-title>
|
||||
<mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle>
|
||||
|
16
src/app/pages/notfound/notfound.page.scss
Normal file
16
src/app/pages/notfound/notfound.page.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.box {
|
||||
margin: 5px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
@ -1,14 +1,12 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'page-notfound',
|
||||
templateUrl: './notfound.page.html'
|
||||
templateUrl: './notfound.page.html',
|
||||
styleUrls: [ './notfound.page.scss' ]
|
||||
})
|
||||
export class PageNotFound implements OnInit {
|
||||
export class PageNotFound {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -3,8 +3,7 @@ mat-form-field, mat-slider {
|
||||
}
|
||||
|
||||
form {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin: 5px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
@ -12,6 +11,7 @@ form {
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
|
@ -3,8 +3,7 @@ mat-form-field {
|
||||
}
|
||||
|
||||
form {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin: 5px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
@ -12,6 +11,7 @@ form {
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
|
@ -1,4 +1,4 @@
|
||||
<mat-card class="warn">
|
||||
<mat-card class="warn box">
|
||||
<mat-card-header>
|
||||
<mat-card-title>503</mat-card-title>
|
||||
<mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>
|
||||
|
16
src/app/pages/unavailable/unavailable.page.scss
Normal file
16
src/app/pages/unavailable/unavailable.page.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.box {
|
||||
margin: 5px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
@ -4,7 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'page-unavailable',
|
||||
templateUrl: './unavailable.page.html'
|
||||
templateUrl: './unavailable.page.html',
|
||||
styleUrls: [ './unavailable.page.scss' ]
|
||||
})
|
||||
export class PageUnavailable implements OnInit {
|
||||
|
||||
|
@ -1,6 +1,17 @@
|
||||
<div class="container">
|
||||
<page-notfound *ngIf="notfound"></page-notfound>
|
||||
<ng-container *ngIf="user">
|
||||
<mat-card class="accent box" *ngIf="notfound">
|
||||
<mat-card-header>
|
||||
<mat-card-title>404</mat-card-title>
|
||||
<mat-card-subtitle>{{'user.not-found' | i18n}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p>
|
||||
{{'user.not-found.text' | i18n:username}}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<div class="box" *ngIf="user">
|
||||
<table>
|
||||
<tr *ngIf="user.metadata && user.metadata.self">
|
||||
<th></th>
|
||||
@ -16,7 +27,9 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{'user.about' | i18n}}</th>
|
||||
<td><p class="text">{{user.about}}</p></td>
|
||||
<td>
|
||||
<p class="text">{{user.about}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
@ -27,5 +40,5 @@
|
||||
<td><a routerLink="/u/c/{{user.username}}">{{'user.comments' | i18n}}</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
@ -4,10 +4,8 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
.box {
|
||||
margin: 0px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
@ -15,6 +13,7 @@ table {
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
|
@ -4,8 +4,7 @@ mat-form-field {
|
||||
|
||||
|
||||
form {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin: 5px;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
max-width: 100%;
|
||||
@ -13,6 +12,7 @@ form {
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
|
@ -36,17 +36,17 @@
|
||||
<mat-icon>history</mat-icon> {{'page.last' | i18n}}
|
||||
</a>
|
||||
<mat-divider></mat-divider>
|
||||
<a (click)="openExternal('https://wiki.bstly.de/services/bstlboard#faq','_blank')" routerLinkActive="active" mat-list-item>
|
||||
<mat-icon>help</mat-icon> {{'page.faq' | i18n}}
|
||||
</a>
|
||||
<mat-divider *ngIf="authenticated"></mat-divider>
|
||||
<a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
|
||||
<mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}}
|
||||
</a>
|
||||
<a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item>
|
||||
<mat-icon>tune</mat-icon> {{'settings' | i18n}}
|
||||
</a>
|
||||
<mat-divider></mat-divider>
|
||||
<a (click)="openExternal('https://wiki.bstly.de/services/bstlboard#faq','_blank')" routerLinkActive="active" mat-list-item>
|
||||
<mat-icon>help</mat-icon> {{'page.faq' | i18n}}
|
||||
</a>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-divider *ngIf="authenticated" ></mat-divider>
|
||||
<a *ngIf="authenticated" (click)="logout()" mat-list-item>
|
||||
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
|
||||
</a>
|
||||
@ -69,7 +69,7 @@
|
||||
{{'page.imprint' | i18n}}
|
||||
</a>
|
||||
<a (click)="openExternal('https://www.bstly.de/privacy-policy/#bstlboard')" mat-list-item style="font-size: 0.7em;">
|
||||
{{'page.privacy-policy' | i18n}}
|
||||
{{'pageprivacy-policy' | i18n}}
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
|
@ -87,11 +87,19 @@
|
||||
"keepSession": "eingeloggt bleiben"
|
||||
},
|
||||
"logout": "Logout",
|
||||
"new": "Neuste",
|
||||
"not-found": {
|
||||
".": "Nicht gefunden",
|
||||
"text": "Seite nicht gefunden"
|
||||
},
|
||||
"page": {
|
||||
"faq": "F.A.Q.",
|
||||
"hot": "Meist diskutiert",
|
||||
"imprint": "Impressum",
|
||||
"last": "Zuletzt diskutiert",
|
||||
"new": "Neuste",
|
||||
"privacy-policy": "Datenschutzerklärung",
|
||||
"top": "Top"
|
||||
},
|
||||
"paginator": {
|
||||
"firstPage": "Erste Seite",
|
||||
"itemsPerPage": "Einträge pro Seite:",
|
||||
@ -113,6 +121,14 @@
|
||||
".": "Einstellungen",
|
||||
"about": "Über",
|
||||
"darkTheme": "Dunkles Thema",
|
||||
"email": "E-Mail Adresse",
|
||||
"gravity": {
|
||||
".": "Bewertungsexponent",
|
||||
"hint" : "Je niedriger der Exponent desto weniger wird das Datum bei der Bewertung gewichtet!",
|
||||
"zero" : "Ein Wert von 0 bedeutet dass das Datum für die Bewertung keine Rolle spielt!"
|
||||
},
|
||||
"pagesettings": "Seiteneinstellungen",
|
||||
"success": "Erfolgreich gespeichert",
|
||||
"update": "Aktualisieren",
|
||||
"username": "Username"
|
||||
},
|
||||
@ -136,7 +152,6 @@
|
||||
"error": "Url erforderlich"
|
||||
}
|
||||
},
|
||||
"top": "Top",
|
||||
"user": {
|
||||
".": "User",
|
||||
"about": "Über",
|
||||
|
@ -87,11 +87,19 @@
|
||||
"keepSession": "stay logged in"
|
||||
},
|
||||
"logout": "logout",
|
||||
"new": "new",
|
||||
"not-found": {
|
||||
".": "Not found",
|
||||
"text": "Page not found"
|
||||
},
|
||||
"page": {
|
||||
"faq": "F.A.Q.",
|
||||
"hot": "hot",
|
||||
"imprint": "imprint",
|
||||
"last": "last",
|
||||
"new": "new",
|
||||
"privacy-policy": "privacy policy",
|
||||
"top": "top"
|
||||
},
|
||||
"paginator": {
|
||||
"firstPage": "first page",
|
||||
"itemsPerPage": "items per page:",
|
||||
@ -113,6 +121,14 @@
|
||||
".": "settings",
|
||||
"about": "about",
|
||||
"darkTheme": "dark theme",
|
||||
"email": "email address",
|
||||
"gravity": {
|
||||
".": "ranking gravity",
|
||||
"hint": "The lower the gravity the less the date will be weighted bay ranking!",
|
||||
"zero": "A value of 0 means that the date will be ignored by ranking!"
|
||||
},
|
||||
"pagesettings": "pagesettings",
|
||||
"success": "success",
|
||||
"update": "update",
|
||||
"username": "username"
|
||||
},
|
||||
@ -136,7 +152,6 @@
|
||||
"error": "url required"
|
||||
}
|
||||
},
|
||||
"top": "top",
|
||||
"user": {
|
||||
".": "user",
|
||||
"about": "about",
|
||||
|
@ -1,7 +1,7 @@
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
$light-primary: mat.define-palette(mat.$deep-orange-palette, 800);
|
||||
$light-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400);
|
||||
$light-accent: mat.define-palette(mat.$grey-palette, A400, A200, A700);
|
||||
$light-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
$primary: mat.get-color-from-palette($light-primary);
|
||||
|
Loading…
Reference in New Issue
Block a user