_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

upgrade angular12

Browse Source
This commit is contained in:
_Bastler 2021-10-05 15:16:59 +02:00
parent bd02651db0
commit 63b1885555
15 changed files with 3581 additions and 5603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
angular.json
View File

@ -22,7 +22,6 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/.htaccess",
"src/favicon.ico",
@ -31,7 +30,13 @@
"styles": [
"src/styles.scss"
],
"scripts": []
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
@ -61,7 +66,8 @@
}
]
}
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",

8918
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

60
package.json
View File

@ -11,47 +11,47 @@
},
"private": true,
"dependencies": {
"@angular-material-components/datetime-picker": "^5.1.0",
"@angular/animations": "~11.2.10",
"@angular/cdk": "^11.2.9",
"@angular/common": "~11.2.10",
"@angular/compiler": "~11.2.10",
"@angular/core": "~11.2.10",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "~11.2.10",
"@angular/material": "^11.2.9",
"@angular/material-moment-adapter": "^11.2.9",
"@angular/platform-browser": "~11.2.10",
"@angular/platform-browser-dynamic": "~11.2.10",
"@angular/router": "~11.2.10",
"angularx-qrcode": "^10.0.11",
"@angular-material-components/datetime-picker": "^6.0.3",
"@angular/animations": "~12.2.8",
"@angular/cdk": "^12.2.8",
"@angular/common": "~12.2.8",
"@angular/compiler": "~12.2.8",
"@angular/core": "~12.2.8",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~12.2.8",
"@angular/material": "^12.2.8",
"@angular/material-moment-adapter": "^12.2.8",
"@angular/platform-browser": "~12.2.8",
"@angular/platform-browser-dynamic": "~12.2.8",
"@angular/router": "~12.2.8",
"moment": "^2.29.1",
"openpgp": "^4.10.8",
"ng-qrcode": "^5.1.1",
"openpgp": "^4.10.10",
"rxjs": "~6.6.7",
"tslib": "^2.0.0",
"unique-names-generator": "^4.3.1",
"zone.js": "~0.10.2"
"tslib": "^2.3.1",
"unique-names-generator": "^4.6.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.9",
"@angular/cli": "~11.2.9",
"@angular/compiler-cli": "~11.2.10",
"@angular/localize": "^11.2.10",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.67",
"@types/openpgp": "^4.4.14",
"codelyzer": "^6.0.0",
"@angular-devkit/build-angular": "^12.2.8",
"@angular/cli": "~12.2.8",
"@angular/compiler-cli": "~12.2.8",
"@angular/localize": "^12.2.8",
"@types/jasmine": "^3.6.11",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^12.20.27",
"@types/openpgp": "^4.4.18",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-jasmine-html-reporter": "^1.7.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
"typescript": "~4.3.5"
}
}

0
src/app/app.component.scss
View File

131
src/app/app.component.ts
View File

@ -1,144 +1,25 @@
import {Component, HostListener} from '@angular/core';
import { Component } from '@angular/core';
import {AuthService} from './services/auth.service';
import {I18nService} from './services/i18n.service';
import {ProfileService} from './services/profile.service';
import {Router} from '@angular/router';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon';
import {DateAdapter} from '@angular/material/core';
import { I18nService } from './services/i18n.service';
import { DateAdapter } from '@angular/material/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
templateUrl: './app.component.html'
})
export class AppComponent {
opened = true;
darkTheme = "false";
title = 'we.bstly';
currentLocale: String;
datetimeformat: String;
locales;
auth;
constructor(
private i18n: I18nService,
private authService: AuthService,
private profileService: ProfileService,
private router: Router,
private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer,
private _adapter: DateAdapter<any>) {
iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
}
ngOnInit() {
this.datetimeformat = this.i18n.get('format.datetime', []);
this.currentLocale = this.i18n.getLocale();
this.locales = this.i18n.getLocales();
this.authService.auth.subscribe(data => {
this.auth = data;
})
this._adapter.setLocale(this.currentLocale);
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 768) {
this.opened = false;
} else {
this.opened = true;
}
if(localStorage.getItem("bstly.darkTheme") == "true") {
this.darkTheme = "true";
this._adapter.setLocale(this.i18n.getLocale());
if (localStorage.getItem("bstly.darkTheme") == "true") {
window.document.body.classList.add("dark-theme");
}
}
setLocale(locale) {
localStorage.setItem("bstly.locale", locale);
if(this.auth && this.auth.authenticated) {
this.profileService.getField("locale").subscribe((profileField: any) => {
if(profileField == null) {
profileField = {
"name": "locale",
"type": "TEXT",
"visibility": "PRIVATE"
}
}
profileField.value = locale;
this.profileService.createOrUpdate(profileField).subscribe((response) => {
window.location.reload();
})
})
} else {
window.location.reload();
}
}
darkThemeChange($event) {
if($event.checked) {
this.darkTheme = "true";
} else {
this.darkTheme = "false";
}
localStorage.setItem("bstly.darkTheme", this.darkTheme);
if(this.auth && this.auth.authenticated) {
this.profileService.getField("darkTheme").subscribe((profileField: any) => {
if(profileField == null) {
profileField = {
"name": "darkTheme",
"type": "BOOL",
"visibility": "PRIVATE"
}
}
profileField.value = this.darkTheme;
this.profileService.createOrUpdate(profileField).subscribe((response) => {
window.location.reload();
})
})
} else {
window.location.reload();
}
}
logout() {
this.authService.logout().subscribe(data => {
this.router.navigate([""]).then(() => {
window.location.reload();
});
})
}
isBiggerScreen() {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 768) {
return false;
} else {
return true;
}
}
openExternal(url, target = '_self') {
window.open(url, target);
}
@HostListener('window:resize', ['$event'])
onResize(event) {
if(event.target.innerWidth < 768) {
this.opened = false;
} else {
this.opened = true;
}
}
}

4
src/app/app.module.ts
View File

@ -6,7 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MaterialModule } from './material/material.module';
import { QRCodeModule } from 'angularx-qrcode';
import { QrCodeModule } from 'ng-qrcode';
import { DatePipe } from '@angular/common';
@ -120,7 +120,7 @@ export class XhrInterceptor implements HttpInterceptor {
HttpClientModule,
FormsModule,
ReactiveFormsModule,
QRCodeModule,
QrCodeModule,
],
exports: [ MaterialModule ],
providers: [ { provide: APP_INITIALIZER, useFactory: init_app, deps: [ I18nService ], multi: true }, { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true }, DatePipe ],

2
src/app/pages/account/security/security-totp.dialog.html
View File

@ -3,7 +3,7 @@
{{'security.2fa.totp.hint' | i18n}}
<qrcode *ngIf="data.qrData" [qrdata]="data.qrData" [width]="400" [errorCorrectionLevel]="'M'" title="{{data.qrData}}"></qrcode>
<qr-code *ngIf="data.qrData" [value]="data.qrData" size="400" errorCorrectionLevel="'M'" title="{{data.qrData}}"></qr-code>
{{'security.2fa.totp.activate' | i18n}}
<mat-form-field>

2
src/app/pages/register/register.dialog.html
View File

@ -6,7 +6,7 @@
<app-quotas [quotas]="data.quotas"></app-quotas>
<h3>{{'pgp.privateKey' | i18n}}</h3>
<mat-form-field>
<qrcode [qrdata]="data.privateKey" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
<qr-code [value]="data.privateKey" size="400" errorCorrectionLevel="'M'"></qr-code>
<mat-label>{{'pgp.privateKey' | i18n}}</mat-label>
<textarea matInput readonly [(ngModel)]="data.privateKey" #privkey></textarea>
</mat-form-field>

2
src/app/pages/urlshortener/urlshortener.share.html
View File

@ -4,7 +4,7 @@
<div mat-dialog-content>
<mat-form-field>
<qrcode [qrdata]="shortenedUrl.link" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
<qr-code [value]="shortenedUrl.link" size="400" errorCorrectionLevel="'M'"></qr-code>
<textarea matInput [(ngModel)]="shortenedUrl.shareText"></textarea>
</mat-form-field>

2
src/app/ui/profilefields/binary/pgp/profilefield.pgp-blob.html
View File

@ -3,7 +3,7 @@
<h3>{{'pgp.privateKey' | i18n}}</h3>
<mat-form-field>
<qrcode [qrdata]="data.privateKey" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
<qr-code [value]="data.privateKey" size="400" errorCorrectionLevel="'M'"></qr-code>
<mat-label>{{'pgp.privateKey' | i18n}}</mat-label>
<textarea matInput readonly [(ngModel)]="data.privateKey" #privkey></textarea>
</mat-form-field>

2
src/environments/environment.ts
View File

@ -15,4 +15,4 @@ export const environment = {
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

2
src/polyfills.ts
View File

@ -59,7 +59,7 @@ import '@angular/localize/init';
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************

19
src/styles.scss
View File

@ -1,12 +1,12 @@
// Custom Theming for Angular Material
@use '~@angular/material' as mat;
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
@include mat.core();
@import './variables.scss';
@ -14,13 +14,13 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$light-theme: mat-light-theme((color: (primary: $light-primary,
$light-theme: mat.define-light-theme((color: (primary: $light-primary,
accent: $light-accent,
warn: $light-warn,
)));
// Define an alternate dark theme.
$dark-theme: mat-dark-theme((color: (primary: $dark-primary,
$dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
accent: $light-accent,
warn: $light-warn,
)));
@ -30,10 +30,10 @@ $dark-theme: mat-dark-theme((color: (primary: $dark-primary,
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($light-theme);
@include mat.all-component-themes($light-theme);
.dark-theme {
@include angular-material-color($dark-theme);
@include mat.all-component-colors($dark-theme);
}
@ -143,12 +143,13 @@ mat-form-field {
}
}
qrcode {
margin: 0 auto;
qr-code {
margin: 15px auto;
text-align: center;
display: block;
}
qrcode canvas {
qr-code canvas {
width: 100% !important;
height: auto !important;
max-width: 400px !important;

2
src/test.ts
View File

@ -1,6 +1,6 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,

26
src/variables.scss
View File

@ -1,19 +1,19 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
$light-primary: mat-palette($mat-gray, 800);
$light-accent: mat-palette($mat-pink, A200, A100, A400);
$light-warn: mat-palette($mat-red);
$light-primary: mat.define-palette(mat.$gray-palette, 800);
$light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$light-warn: mat.define-palette(mat.$red-palette);
$primary: mat-color($light-primary);
$accent: mat-color($light-accent);
$warn: mat-color($light-warn);
$primary: mat.get-color-from-palette($light-primary);
$accent: mat.get-color-from-palette($light-accent);
$warn: mat.get-color-from-palette($light-warn);
$dark-primary: mat-palette($mat-grey, 900, 500, 700);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-primary: mat.define-palette(mat.$grey-palette, 900, 500, 700);
$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$dark-warn: mat.define-palette(mat.$deep-orange-palette);
.dark-theme {
$primary: mat-color($dark-primary);
$accent: mat-color($light-accent);
$warn: mat-color($light-warn);
$primary: mat.get-color-from-palette($dark-primary);
$accent: mat.get-color-from-palette($light-accent);
$warn: mat.get-color-from-palette($light-warn);
}