Added basic skelleton with login
This commit is contained in:
parent
983ee5171a
commit
266a583a4d
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -6,3 +6,5 @@ backend/src/config/ConfigOverride.php
|
||||||
backend/test/config.sh
|
backend/test/config.sh
|
||||||
backend/test/node_modules/
|
backend/test/node_modules/
|
||||||
backend/test/logfile.log
|
backend/test/logfile.log
|
||||||
|
|
||||||
|
.vscode/
|
||||||
|
|
|
@ -19,5 +19,6 @@ before_script:
|
||||||
- .travis/backend-start-server.sh > /dev/null 2>&1 &
|
- .travis/backend-start-server.sh > /dev/null 2>&1 &
|
||||||
script:
|
script:
|
||||||
- .travis/frontend-lint.sh
|
- .travis/frontend-lint.sh
|
||||||
|
- .travis/frontend-build.sh
|
||||||
- .travis/backend-lint.sh
|
- .travis/backend-lint.sh
|
||||||
- .travis/backend-test.sh
|
- .travis/backend-test.sh
|
||||||
|
|
5
.travis/frontend-build.sh
Executable file
5
.travis/frontend-build.sh
Executable file
|
@ -0,0 +1,5 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
cd frontend
|
||||||
|
|
||||||
|
npm run build
|
60
frontend/.angular-cli.json
Normal file
60
frontend/.angular-cli.json
Normal file
|
@ -0,0 +1,60 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"project": {
|
||||||
|
"name": "pdnsmanager"
|
||||||
|
},
|
||||||
|
"apps": [
|
||||||
|
{
|
||||||
|
"root": "src",
|
||||||
|
"outDir": "dist",
|
||||||
|
"assets": [
|
||||||
|
"assets",
|
||||||
|
"favicon.ico"
|
||||||
|
],
|
||||||
|
"index": "index.html",
|
||||||
|
"main": "main.ts",
|
||||||
|
"polyfills": "polyfills.ts",
|
||||||
|
"test": "test.ts",
|
||||||
|
"tsconfig": "tsconfig.app.json",
|
||||||
|
"testTsconfig": "tsconfig.spec.json",
|
||||||
|
"prefix": "app",
|
||||||
|
"styles": [
|
||||||
|
"styles.scss"
|
||||||
|
],
|
||||||
|
"scripts": [],
|
||||||
|
"environmentSource": "environments/environment.ts",
|
||||||
|
"environments": {
|
||||||
|
"dev": "environments/environment.ts",
|
||||||
|
"prod": "environments/environment.prod.ts"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"e2e": {
|
||||||
|
"protractor": {
|
||||||
|
"config": "./protractor.conf.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": [
|
||||||
|
{
|
||||||
|
"project": "src/tsconfig.app.json",
|
||||||
|
"exclude": "**/node_modules/**"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "src/tsconfig.spec.json",
|
||||||
|
"exclude": "**/node_modules/**"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"project": "e2e/tsconfig.e2e.json",
|
||||||
|
"exclude": "**/node_modules/**"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"test": {
|
||||||
|
"karma": {
|
||||||
|
"config": "./karma.conf.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaults": {
|
||||||
|
"styleExt": "scss",
|
||||||
|
"component": {}
|
||||||
|
}
|
||||||
|
}
|
14
frontend/e2e/app.e2e-spec.ts
Normal file
14
frontend/e2e/app.e2e-spec.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
import { AppPage } from './app.po';
|
||||||
|
|
||||||
|
describe('pdnsmanager App', () => {
|
||||||
|
let page: AppPage;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new AppPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display welcome message', () => {
|
||||||
|
page.navigateTo();
|
||||||
|
expect(page.getParagraphText()).toEqual('Welcome to app!');
|
||||||
|
});
|
||||||
|
});
|
11
frontend/e2e/app.po.ts
Normal file
11
frontend/e2e/app.po.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import { browser, by, element } from 'protractor';
|
||||||
|
|
||||||
|
export class AppPage {
|
||||||
|
navigateTo() {
|
||||||
|
return browser.get('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
getParagraphText() {
|
||||||
|
return element(by.css('app-root h1')).getText();
|
||||||
|
}
|
||||||
|
}
|
14
frontend/e2e/tsconfig.e2e.json
Normal file
14
frontend/e2e/tsconfig.e2e.json
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/e2e",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"jasminewd2",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
33
frontend/karma.conf.js
Normal file
33
frontend/karma.conf.js
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
// Karma configuration file, see link for more information
|
||||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
config.set({
|
||||||
|
basePath: '',
|
||||||
|
frameworks: ['jasmine', '@angular/cli'],
|
||||||
|
plugins: [
|
||||||
|
require('karma-jasmine'),
|
||||||
|
require('karma-chrome-launcher'),
|
||||||
|
require('karma-jasmine-html-reporter'),
|
||||||
|
require('karma-coverage-istanbul-reporter'),
|
||||||
|
require('@angular/cli/plugins/karma')
|
||||||
|
],
|
||||||
|
client:{
|
||||||
|
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
coverageIstanbulReporter: {
|
||||||
|
reports: [ 'html', 'lcovonly' ],
|
||||||
|
fixWebpackSourcePaths: true
|
||||||
|
},
|
||||||
|
angularCli: {
|
||||||
|
environment: 'dev'
|
||||||
|
},
|
||||||
|
reporters: ['progress', 'kjhtml'],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: true,
|
||||||
|
browsers: ['Chrome'],
|
||||||
|
singleRun: false
|
||||||
|
});
|
||||||
|
};
|
12637
frontend/package-lock.json
generated
Normal file
12637
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
51
frontend/package.json
Normal file
51
frontend/package.json
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "pdnsmanager",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve --proxy-config proxy.conf.json",
|
||||||
|
"build": "ng build --prod",
|
||||||
|
"test": "ng test",
|
||||||
|
"lint": "ng lint",
|
||||||
|
"e2e": "ng e2e"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "^5.2.0",
|
||||||
|
"@angular/common": "^5.2.0",
|
||||||
|
"@angular/compiler": "^5.2.0",
|
||||||
|
"@angular/core": "^5.2.0",
|
||||||
|
"@angular/forms": "^5.2.0",
|
||||||
|
"@angular/http": "^5.2.0",
|
||||||
|
"@angular/platform-browser": "^5.2.0",
|
||||||
|
"@angular/platform-browser-dynamic": "^5.2.0",
|
||||||
|
"@angular/router": "^5.2.0",
|
||||||
|
"axios": "^0.18.0",
|
||||||
|
"bootstrap": "^4.0.0",
|
||||||
|
"core-js": "^2.4.1",
|
||||||
|
"font-awesome": "^4.7.0",
|
||||||
|
"rxjs": "^5.5.6",
|
||||||
|
"zone.js": "^0.8.19"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular/cli": "~1.7.3",
|
||||||
|
"@angular/compiler-cli": "^5.2.0",
|
||||||
|
"@angular/language-service": "^5.2.0",
|
||||||
|
"@types/jasmine": "~2.8.3",
|
||||||
|
"@types/jasminewd2": "~2.0.2",
|
||||||
|
"@types/node": "~6.0.60",
|
||||||
|
"codelyzer": "^4.0.1",
|
||||||
|
"jasmine-core": "~2.8.0",
|
||||||
|
"jasmine-spec-reporter": "~4.2.1",
|
||||||
|
"karma": "~2.0.0",
|
||||||
|
"karma-chrome-launcher": "~2.2.0",
|
||||||
|
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||||
|
"karma-jasmine": "~1.1.0",
|
||||||
|
"karma-jasmine-html-reporter": "^0.2.2",
|
||||||
|
"protractor": "~5.1.2",
|
||||||
|
"ts-node": "~4.1.0",
|
||||||
|
"tslint": "~5.9.1",
|
||||||
|
"typescript": "~2.5.3"
|
||||||
|
}
|
||||||
|
}
|
28
frontend/protractor.conf.js
Normal file
28
frontend/protractor.conf.js
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
// Protractor configuration file, see link for more information
|
||||||
|
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||||
|
|
||||||
|
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||||
|
|
||||||
|
exports.config = {
|
||||||
|
allScriptsTimeout: 11000,
|
||||||
|
specs: [
|
||||||
|
'./e2e/**/*.e2e-spec.ts'
|
||||||
|
],
|
||||||
|
capabilities: {
|
||||||
|
'browserName': 'chrome'
|
||||||
|
},
|
||||||
|
directConnect: true,
|
||||||
|
baseUrl: 'http://localhost:4200/',
|
||||||
|
framework: 'jasmine',
|
||||||
|
jasmineNodeOpts: {
|
||||||
|
showColors: true,
|
||||||
|
defaultTimeoutInterval: 30000,
|
||||||
|
print: function() {}
|
||||||
|
},
|
||||||
|
onPrepare() {
|
||||||
|
require('ts-node').register({
|
||||||
|
project: 'e2e/tsconfig.e2e.json'
|
||||||
|
});
|
||||||
|
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||||
|
}
|
||||||
|
};
|
9
frontend/proxy.conf.json
Normal file
9
frontend/proxy.conf.json
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"/api": {
|
||||||
|
"target": "http://localhost:8000",
|
||||||
|
"secure": false,
|
||||||
|
"pathRewrite": {
|
||||||
|
"^/api": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
11
frontend/src/app/apitypes/Session.apitype.ts
Normal file
11
frontend/src/app/apitypes/Session.apitype.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
export class SessionApitype {
|
||||||
|
|
||||||
|
public username: string = null;
|
||||||
|
|
||||||
|
public token: string = null;
|
||||||
|
|
||||||
|
constructor(init: Object) {
|
||||||
|
Object.assign(this, init);
|
||||||
|
}
|
||||||
|
}
|
17
frontend/src/app/apitypes/User.apitype.ts
Normal file
17
frontend/src/app/apitypes/User.apitype.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
export class UserApitype {
|
||||||
|
|
||||||
|
public id: number = null;
|
||||||
|
|
||||||
|
public name: string = null;
|
||||||
|
|
||||||
|
public type: string = null;
|
||||||
|
|
||||||
|
public native: boolean = null;
|
||||||
|
|
||||||
|
public password: string = null;
|
||||||
|
|
||||||
|
constructor(init: Object) {
|
||||||
|
Object.assign(this, init);
|
||||||
|
}
|
||||||
|
}
|
28
frontend/src/app/app-routing.module.ts
Normal file
28
frontend/src/app/app-routing.module.ts
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
import { DomainsComponent } from './pages/domains/domains.component';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
import { LoginComponent } from './pages/login/login.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
pathMatch: 'full',
|
||||||
|
component: LoginComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'domains',
|
||||||
|
pathMatch: 'full',
|
||||||
|
component: DomainsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
redirectTo: '/',
|
||||||
|
pathMatch: 'prefix'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class AppRoutingModule { }
|
12
frontend/src/app/app.component.html
Normal file
12
frontend/src/app/app.component.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<app-navbar *ngIf="gs.isLoggedIn" brand="PDNS Manager">
|
||||||
|
<app-navbar-entry icon="navicon" target="/domains">Domains</app-navbar-entry>
|
||||||
|
|
||||||
|
<app-navbar-entry icon="sign-out" right (click)="onLogout()" neverActive>Logout</app-navbar-entry>
|
||||||
|
</app-navbar>
|
||||||
|
<app-navbar *ngIf="!gs.isLoggedIn" brand="PDNS Manager"></app-navbar>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<app-modal-container></app-modal-container>
|
0
frontend/src/app/app.component.scss
Normal file
0
frontend/src/app/app.component.scss
Normal file
19
frontend/src/app/app.component.ts
Normal file
19
frontend/src/app/app.component.ts
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { StateService } from './services/state.service';
|
||||||
|
import { SessionOperation } from './operations/session.operation';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.scss']
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
|
||||||
|
constructor(public gs: StateService, private session: SessionOperation, private router: Router) { }
|
||||||
|
|
||||||
|
public async onLogout() {
|
||||||
|
await this.session.logout();
|
||||||
|
this.router.navigate(['/']);
|
||||||
|
}
|
||||||
|
}
|
47
frontend/src/app/app.module.ts
Normal file
47
frontend/src/app/app.module.ts
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
|
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
import { AlertComponent } from './partials/alert/alert.component';
|
||||||
|
import { AlertMessageComponent } from './partials/alert-message/alert-message.component';
|
||||||
|
import { FaIconComponent } from './partials/fa-icon/fa-icon.component';
|
||||||
|
import { NavbarComponent } from './partials/navbar/navbar.component';
|
||||||
|
import { NavbarEntryComponent } from './partials/navbar-entry/navbar-entry.component';
|
||||||
|
import { SortComponent } from './partials/sort/sort.component';
|
||||||
|
import { ModalContainerComponent } from './partials/modal-container/modal-container.component';
|
||||||
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
|
import { ModalService } from './services/modal.service';
|
||||||
|
import { LoginComponent } from './pages/login/login.component';
|
||||||
|
import { StateService } from './services/state.service';
|
||||||
|
import { HttpService } from './services/http.service';
|
||||||
|
import { SessionOperation } from './operations/session.operation';
|
||||||
|
import { DomainsComponent } from './pages/domains/domains.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
AlertComponent,
|
||||||
|
AlertMessageComponent,
|
||||||
|
FaIconComponent,
|
||||||
|
NavbarComponent,
|
||||||
|
NavbarEntryComponent,
|
||||||
|
SortComponent,
|
||||||
|
ModalContainerComponent,
|
||||||
|
LoginComponent,
|
||||||
|
DomainsComponent
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
ReactiveFormsModule
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
ModalService,
|
||||||
|
StateService,
|
||||||
|
HttpService,
|
||||||
|
SessionOperation
|
||||||
|
],
|
||||||
|
bootstrap: [AppComponent]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
17
frontend/src/app/datatypes/modal-options.datatype.ts
Normal file
17
frontend/src/app/datatypes/modal-options.datatype.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
export class ModalOptionsDatatype {
|
||||||
|
|
||||||
|
public heading: '';
|
||||||
|
|
||||||
|
public body: '';
|
||||||
|
|
||||||
|
public acceptText: '';
|
||||||
|
|
||||||
|
public dismisText: '';
|
||||||
|
|
||||||
|
public acceptClass: 'primary';
|
||||||
|
|
||||||
|
constructor(init: Object) {
|
||||||
|
Object.assign(this, init);
|
||||||
|
}
|
||||||
|
}
|
10
frontend/src/app/datatypes/sort-event.datatype.ts
Normal file
10
frontend/src/app/datatypes/sort-event.datatype.ts
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
export class SortEventDatatype {
|
||||||
|
|
||||||
|
public field: string;
|
||||||
|
public order: number;
|
||||||
|
|
||||||
|
constructor(init: Object) {
|
||||||
|
Object.assign(this, init);
|
||||||
|
}
|
||||||
|
}
|
49
frontend/src/app/operations/session.operation.ts
Normal file
49
frontend/src/app/operations/session.operation.ts
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import { UserApitype } from './../apitypes/User.apitype';
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpService } from '../services/http.service';
|
||||||
|
import { StateService } from '../services/state.service';
|
||||||
|
import { AxiosResponse, AxiosError } from 'axios';
|
||||||
|
import { SessionApitype } from '../apitypes/Session.apitype';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class SessionOperation {
|
||||||
|
|
||||||
|
constructor(private http: HttpService, private gs: StateService) { }
|
||||||
|
|
||||||
|
public async login(username: string, password: string): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const session = new SessionApitype(await this.http.post('/sessions', {
|
||||||
|
username: username,
|
||||||
|
password: password
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.gs.apiToken = session.token;
|
||||||
|
this.gs.isLoggedIn = true;
|
||||||
|
|
||||||
|
const user = new UserApitype(await this.http.get('/users/me'));
|
||||||
|
|
||||||
|
this.gs.isAdmin = user.type === 'admin';
|
||||||
|
this.gs.isNative = user.native;
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
if (e.response.status !== 403) {
|
||||||
|
console.error('Unknown login error', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async logout(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await this.http.delete(['/sessions', this.gs.apiToken]);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Logout failed for unknown reason', e);
|
||||||
|
} finally {
|
||||||
|
this.gs.isLoggedIn = false;
|
||||||
|
this.gs.apiToken = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
3
frontend/src/app/pages/domains/domains.component.html
Normal file
3
frontend/src/app/pages/domains/domains.component.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<p>
|
||||||
|
domains works!
|
||||||
|
</p>
|
12
frontend/src/app/pages/domains/domains.component.ts
Normal file
12
frontend/src/app/pages/domains/domains.component.ts
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-domains',
|
||||||
|
templateUrl: './domains.component.html',
|
||||||
|
styleUrls: ['./domains.component.scss']
|
||||||
|
})
|
||||||
|
export class DomainsComponent {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
}
|
34
frontend/src/app/pages/login/login.component.html
Normal file
34
frontend/src/app/pages/login/login.component.html
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<div class="row mt-md-5">
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 mx-auto">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>Login</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form autocomplete="off" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Username</label>
|
||||||
|
<input type="text" class="form-control auto-invalid" formControlName="username" autofocus />
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Username is required.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" class="form-control auto-invalid" formControlName="password" />
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
Password is required.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<app-alert *ngIf="loginError">
|
||||||
|
<app-alert-message>Username or password is invalid!</app-alert-message>
|
||||||
|
</app-alert>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-success float-right" [disabled]="!loginForm.valid">Login</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
0
frontend/src/app/pages/login/login.component.scss
Normal file
0
frontend/src/app/pages/login/login.component.scss
Normal file
40
frontend/src/app/pages/login/login.component.ts
Normal file
40
frontend/src/app/pages/login/login.component.ts
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { StateService } from '../../services/state.service';
|
||||||
|
import { HttpService } from '../../services/http.service';
|
||||||
|
import { SessionOperation } from '../../operations/session.operation';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-login',
|
||||||
|
templateUrl: './login.component.html',
|
||||||
|
styleUrls: ['./login.component.scss']
|
||||||
|
})
|
||||||
|
export class LoginComponent {
|
||||||
|
loginForm: FormGroup;
|
||||||
|
|
||||||
|
loginError = false;
|
||||||
|
|
||||||
|
constructor(private router: Router, private fb: FormBuilder, public gs: StateService,
|
||||||
|
public sessions: SessionOperation) {
|
||||||
|
this.createForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
private createForm() {
|
||||||
|
this.loginForm = this.fb.group({
|
||||||
|
username: ['', Validators.required],
|
||||||
|
password: ['', Validators.required]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onSubmit() {
|
||||||
|
const v = this.loginForm.value;
|
||||||
|
if (await this.sessions.login(v.username, v.password)) {
|
||||||
|
this.loginError = false;
|
||||||
|
this.loginForm.reset();
|
||||||
|
this.router.navigate(['/domains']);
|
||||||
|
} else {
|
||||||
|
this.loginError = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
<p>
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</p>
|
|
@ -0,0 +1,3 @@
|
||||||
|
p {
|
||||||
|
margin: 0px !important;
|
||||||
|
}
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-alert-message',
|
||||||
|
templateUrl: './alert-message.component.html',
|
||||||
|
styleUrls: ['./alert-message.component.scss']
|
||||||
|
})
|
||||||
|
export class AlertMessageComponent {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
}
|
3
frontend/src/app/partials/alert/alert.component.html
Normal file
3
frontend/src/app/partials/alert/alert.component.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="alert" [ngClass]="'alert-' + type" role="alert">
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</div>
|
13
frontend/src/app/partials/alert/alert.component.ts
Normal file
13
frontend/src/app/partials/alert/alert.component.ts
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-alert',
|
||||||
|
templateUrl: './alert.component.html',
|
||||||
|
styleUrls: ['./alert.component.scss']
|
||||||
|
})
|
||||||
|
export class AlertComponent {
|
||||||
|
|
||||||
|
@Input() type = 'danger';
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
}
|
3
frontend/src/app/partials/fa-icon/fa-icon.component.html
Normal file
3
frontend/src/app/partials/fa-icon/fa-icon.component.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<span class="fa" [class.fa-lg]="size == 1" [class.fa-2x]="size == 2" [class.fa-3x]="size == 3"
|
||||||
|
[class.fa-4x]="size == 4" [class.fa-5x]="size == 5" [class.fa-fw]="fixedWidth !== false"
|
||||||
|
[class.fa-spin]="animate == 'spin'" [class.fa-pulse]="animate == 'pulse'" [ngClass]="'fa-' + icon"></span>
|
16
frontend/src/app/partials/fa-icon/fa-icon.component.ts
Normal file
16
frontend/src/app/partials/fa-icon/fa-icon.component.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-fa-icon',
|
||||||
|
templateUrl: './fa-icon.component.html',
|
||||||
|
styleUrls: ['./fa-icon.component.scss']
|
||||||
|
})
|
||||||
|
export class FaIconComponent {
|
||||||
|
|
||||||
|
@Input() icon: string;
|
||||||
|
@Input() size = 0;
|
||||||
|
@Input() fixedWidth = false;
|
||||||
|
@Input() animate = '';
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div class="modal fade" [class.show]="animate" [class.in]="animate" [hidden]="!show" (click)="onDismis()">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">{{options.heading}}</h5>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>{{options.body}}</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-default" (click)="onDismis()">{{options.dismisText}}</button>
|
||||||
|
<button type="button" class="btn" [ngClass]="'btn-' + options.acceptClass" (click)="onAccept()">{{options.acceptText}}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-backdrop fade" [hidden]="!show" [class.show]="animate" [class.in]="animate"></div>
|
|
@ -0,0 +1,3 @@
|
||||||
|
div.modal {
|
||||||
|
display: block;
|
||||||
|
}
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { ModalService } from '../../services/modal.service';
|
||||||
|
import { ModalOptionsDatatype } from '../../datatypes/modal-options.datatype';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-modal-container',
|
||||||
|
templateUrl: './modal-container.component.html',
|
||||||
|
styleUrls: ['./modal-container.component.scss']
|
||||||
|
})
|
||||||
|
export class ModalContainerComponent implements OnInit {
|
||||||
|
|
||||||
|
public options = new ModalOptionsDatatype({
|
||||||
|
heading: '',
|
||||||
|
body: '',
|
||||||
|
acceptText: '',
|
||||||
|
dismisText: '',
|
||||||
|
acceptClass: 'primary'
|
||||||
|
});
|
||||||
|
|
||||||
|
public show = false;
|
||||||
|
public animate = false;
|
||||||
|
|
||||||
|
private currentResolve: Function;
|
||||||
|
private currentReject: Function;
|
||||||
|
|
||||||
|
constructor(private modalService: ModalService) { }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Registers this ModalContainerComponent to the ModalService.
|
||||||
|
*/
|
||||||
|
ngOnInit() {
|
||||||
|
this.modalService.registerModalContainer(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Receives a modal options component and sets the internal config
|
||||||
|
* accordingly. Also the modal dialog is shown with correct animation.
|
||||||
|
*/
|
||||||
|
showMessage(options: ModalOptionsDatatype): Promise<void> {
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
|
this.show = true;
|
||||||
|
window.setTimeout(() => this.animate = true, 50);
|
||||||
|
|
||||||
|
return new Promise<void>((resolve, reject) => {
|
||||||
|
this.currentResolve = resolve;
|
||||||
|
this.currentReject = reject;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hides the modal dialog with correct animation.
|
||||||
|
*/
|
||||||
|
hideModal() {
|
||||||
|
this.animate = false;
|
||||||
|
window.setTimeout(() => this.show = false, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handler if the user triggers a dismis action.
|
||||||
|
*/
|
||||||
|
onDismis() {
|
||||||
|
this.hideModal();
|
||||||
|
if (this.currentReject) {
|
||||||
|
this.currentReject();
|
||||||
|
this.currentResolve = null;
|
||||||
|
this.currentReject = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handler if the user triggers a accept action.
|
||||||
|
*/
|
||||||
|
onAccept() {
|
||||||
|
this.hideModal();
|
||||||
|
if (this.currentResolve) {
|
||||||
|
this.currentResolve();
|
||||||
|
this.currentResolve = null;
|
||||||
|
this.currentReject = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
<li class="nav-item" [routerLinkActive]="neverActive === false ? 'active' : ''">
|
||||||
|
<a [routerLink]="target" class="nav-link">
|
||||||
|
<app-fa-icon *ngIf="icon" [icon]="icon"></app-fa-icon>
|
||||||
|
<span *ngIf="icon"> </span>
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</a>
|
||||||
|
</li>
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-navbar-entry',
|
||||||
|
templateUrl: './navbar-entry.component.html',
|
||||||
|
styleUrls: ['./navbar-entry.component.scss']
|
||||||
|
})
|
||||||
|
export class NavbarEntryComponent {
|
||||||
|
|
||||||
|
@Input() icon: string;
|
||||||
|
@Input() target: string;
|
||||||
|
@Input() neverActive = false;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
}
|
19
frontend/src/app/partials/navbar/navbar.component.html
Normal file
19
frontend/src/app/partials/navbar/navbar.component.html
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<a class="navbar-brand" href="#">{{ brand }}</a>
|
||||||
|
|
||||||
|
<button *ngIf="true" class="navbar-toggler navbar-toggler-right" (click)="toggleMenu()">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="navbar-collapse" [class.collapse]="!open">
|
||||||
|
<ul #navbarEntries class="navbar-nav mr-auto">
|
||||||
|
<ng-content select="app-navbar-entry:not([right])"></ng-content>
|
||||||
|
</ul>
|
||||||
|
<ul #navbarEntriesRight class="navbar-nav">
|
||||||
|
<ng-content select="app-navbar-entry[right]"></ng-content>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
6
frontend/src/app/partials/navbar/navbar.component.scss
Normal file
6
frontend/src/app/partials/navbar/navbar.component.scss
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
/* Workaround for bootstrap 4 alpha 6*/
|
||||||
|
@media(max-width:768px){
|
||||||
|
.navbar .container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
46
frontend/src/app/partials/navbar/navbar.component.ts
Normal file
46
frontend/src/app/partials/navbar/navbar.component.ts
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-navbar',
|
||||||
|
templateUrl: './navbar.component.html',
|
||||||
|
styleUrls: ['./navbar.component.scss']
|
||||||
|
})
|
||||||
|
export class NavbarComponent {
|
||||||
|
@Input() brand: string;
|
||||||
|
|
||||||
|
public open: Boolean = false;
|
||||||
|
|
||||||
|
@ViewChild('navbarEntries') navbarEntries: any;
|
||||||
|
@ViewChild('navbarEntriesRight') navbarEntriesRight: any;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles if the menu is open.
|
||||||
|
*/
|
||||||
|
toggleMenu() {
|
||||||
|
this.open = !this.open;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true if both ng-content slots are empty.
|
||||||
|
*
|
||||||
|
* @returns true if the slots are empty, false otherwise
|
||||||
|
*/
|
||||||
|
isEmpty() {
|
||||||
|
let isEmpty = true;
|
||||||
|
|
||||||
|
if (this.navbarEntries && this.navbarEntries.nativeElement.children) {
|
||||||
|
if (this.navbarEntries.nativeElement.children.length > 0) {
|
||||||
|
isEmpty = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.navbarEntriesRight && this.navbarEntriesRight.nativeElement.children) {
|
||||||
|
if (this.navbarEntriesRight.nativeElement.children.length > 0) {
|
||||||
|
isEmpty = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return isEmpty;
|
||||||
|
}
|
||||||
|
}
|
3
frontend/src/app/partials/sort/sort.component.html
Normal file
3
frontend/src/app/partials/sort/sort.component.html
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<app-fa-icon *ngIf="order === 0" icon="sort" fixedWidth (click)="toggle()"></app-fa-icon>
|
||||||
|
<app-fa-icon *ngIf="order === 1" icon="sort-amount-asc" fixedWidth (click)="toggle()"></app-fa-icon>
|
||||||
|
<app-fa-icon *ngIf="order === -1" icon="sort-amount-desc" fixedWidth (click)="toggle()"></app-fa-icon>
|
0
frontend/src/app/partials/sort/sort.component.scss
Normal file
0
frontend/src/app/partials/sort/sort.component.scss
Normal file
56
frontend/src/app/partials/sort/sort.component.ts
Normal file
56
frontend/src/app/partials/sort/sort.component.ts
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
|
||||||
|
import { SortEventDatatype } from '../../datatypes/sort-event.datatype';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-sort',
|
||||||
|
templateUrl: './sort.component.html',
|
||||||
|
styleUrls: ['./sort.component.scss']
|
||||||
|
})
|
||||||
|
export class SortComponent {
|
||||||
|
|
||||||
|
@Output() sort = new EventEmitter<SortEventDatatype>();
|
||||||
|
|
||||||
|
@Input() field: string;
|
||||||
|
public order = 0;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets the sort order for this field. No SortEvent is emitted.
|
||||||
|
*/
|
||||||
|
public reset() {
|
||||||
|
this.order = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets the sort order for this field, except if this field is the one
|
||||||
|
* provided as parameter.
|
||||||
|
*
|
||||||
|
* @param field The fieldname not to reset
|
||||||
|
*/
|
||||||
|
public resetIfNotField(field: string) {
|
||||||
|
if (this.field !== field) {
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cycles between the three sort states possible. Emits a SortEvent.
|
||||||
|
*/
|
||||||
|
toggle() {
|
||||||
|
if (this.order === 0) {
|
||||||
|
this.order = 1;
|
||||||
|
} else if (this.order === 1) {
|
||||||
|
this.order = -1;
|
||||||
|
} else if (this.order === -1) {
|
||||||
|
this.order = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sort.emit(new SortEventDatatype({
|
||||||
|
field: this.field,
|
||||||
|
order: this.order
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
84
frontend/src/app/services/http.service.ts
Normal file
84
frontend/src/app/services/http.service.ts
Normal file
|
@ -0,0 +1,84 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
import { AxiosInstance, AxiosResponse } from 'axios';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { StateService } from './state.service';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class HttpService {
|
||||||
|
|
||||||
|
http: AxiosInstance;
|
||||||
|
|
||||||
|
constructor(private gs: StateService) {
|
||||||
|
this.http = axios.create({
|
||||||
|
baseURL: 'api/v1/'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public async get(url: string, params: Object = {}): Promise<any> {
|
||||||
|
console.log('Get request');
|
||||||
|
const parts = [];
|
||||||
|
for (const [k, v] of Object.entries(params)) {
|
||||||
|
let value;
|
||||||
|
if (v instanceof Array) {
|
||||||
|
value = v.join(',');
|
||||||
|
} else {
|
||||||
|
value = v.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
parts.push(k + '=' + value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryStr = parts.join('&');
|
||||||
|
|
||||||
|
const reqUrl = queryStr.length > 0 ? this.makeUrl(url) + '?' + queryStr : url;
|
||||||
|
|
||||||
|
return (await this.http({
|
||||||
|
url: reqUrl,
|
||||||
|
method: 'get',
|
||||||
|
headers: this.buildHeaders()
|
||||||
|
})).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async post(url: string | Array<string>, data: Object = {}): Promise<any> {
|
||||||
|
return (await this.http({
|
||||||
|
url: this.makeUrl(url),
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
headers: this.buildHeaders()
|
||||||
|
})).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async put(url: string | Array<string>, data: Object = {}): Promise<any> {
|
||||||
|
return (await this.http({
|
||||||
|
url: this.makeUrl(url),
|
||||||
|
method: 'put',
|
||||||
|
data: data,
|
||||||
|
headers: this.buildHeaders()
|
||||||
|
})).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async delete(url: string | Array<string>): Promise<any> {
|
||||||
|
return (await this.http({
|
||||||
|
url: this.makeUrl(url),
|
||||||
|
method: 'delete',
|
||||||
|
headers: this.buildHeaders()
|
||||||
|
})).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
private buildHeaders(): Object {
|
||||||
|
if (this.gs.apiToken !== null) {
|
||||||
|
return {
|
||||||
|
'X-Authentication': this.gs.apiToken
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private makeUrl(url: string | Array<string>): string {
|
||||||
|
if (url instanceof Array) {
|
||||||
|
return url.join('/');
|
||||||
|
} else {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
32
frontend/src/app/services/modal.service.ts
Normal file
32
frontend/src/app/services/modal.service.ts
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
import { ModalContainerComponent } from '../partials/modal-container/modal-container.component';
|
||||||
|
import { ModalOptionsDatatype } from '../datatypes/modal-options.datatype';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ModalService {
|
||||||
|
|
||||||
|
container: ModalContainerComponent;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Registers a ModalContainerComponent as output for the service
|
||||||
|
*
|
||||||
|
* @param container ModalContainerComponent to use
|
||||||
|
*/
|
||||||
|
registerModalContainer(container: ModalContainerComponent) {
|
||||||
|
this.container = container;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Forwards modal options to a ModalContainerComponent to show them there.
|
||||||
|
*
|
||||||
|
* @param options ModalOptions to use
|
||||||
|
*/
|
||||||
|
showMessage(options: ModalOptionsDatatype) {
|
||||||
|
if (this.container) {
|
||||||
|
return this.container.showMessage(options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
53
frontend/src/app/services/state.service.ts
Normal file
53
frontend/src/app/services/state.service.ts
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class StateService {
|
||||||
|
|
||||||
|
public _isLoggedIn = false;
|
||||||
|
get isLoggedIn(): boolean {
|
||||||
|
return this._isLoggedIn;
|
||||||
|
}
|
||||||
|
set isLoggedIn(_isLoggedIn: boolean) {
|
||||||
|
this._isLoggedIn = _isLoggedIn;
|
||||||
|
this.saveSessionStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
public _isAdmin = false;
|
||||||
|
get isAdmin(): boolean {
|
||||||
|
return this._isAdmin;
|
||||||
|
}
|
||||||
|
set isAdmin(_isAdmin: boolean) {
|
||||||
|
this._isAdmin = _isAdmin;
|
||||||
|
this.saveSessionStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
public _apiToken: string = null;
|
||||||
|
get apiToken(): string {
|
||||||
|
return this._apiToken;
|
||||||
|
}
|
||||||
|
set apiToken(_apiToken: string) {
|
||||||
|
this._apiToken = _apiToken;
|
||||||
|
this.saveSessionStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
public _isNative = false;
|
||||||
|
get isNative(): boolean {
|
||||||
|
return this._isNative;
|
||||||
|
}
|
||||||
|
set isNative(_isNative: boolean) {
|
||||||
|
this._isNative = _isNative;
|
||||||
|
this.saveSessionStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadSessiontorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
private saveSessionStorage() {
|
||||||
|
sessionStorage.setItem('pdnsmanagerstate', JSON.stringify(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadSessiontorage() {
|
||||||
|
Object.assign(this, JSON.parse(sessionStorage.getItem('pdnsmanagerstate')));
|
||||||
|
}
|
||||||
|
}
|
0
frontend/src/assets/.gitkeep
Normal file
0
frontend/src/assets/.gitkeep
Normal file
3
frontend/src/environments/environment.prod.ts
Normal file
3
frontend/src/environments/environment.prod.ts
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export const environment = {
|
||||||
|
production: true
|
||||||
|
};
|
8
frontend/src/environments/environment.ts
Normal file
8
frontend/src/environments/environment.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
// The file contents for the current environment will overwrite these during build.
|
||||||
|
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
|
||||||
|
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
|
||||||
|
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||||
|
|
||||||
|
export const environment = {
|
||||||
|
production: false
|
||||||
|
};
|
BIN
frontend/src/favicon.ico
Normal file
BIN
frontend/src/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.3 KiB |
17
frontend/src/index.html
Normal file
17
frontend/src/index.html
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>PDNS Manager</title>
|
||||||
|
<base href="/">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
12
frontend/src/main.ts
Normal file
12
frontend/src/main.ts
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import { enableProdMode } from '@angular/core';
|
||||||
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
|
import { AppModule } from './app/app.module';
|
||||||
|
import { environment } from './environments/environment';
|
||||||
|
|
||||||
|
if (environment.production) {
|
||||||
|
enableProdMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||||
|
.catch(err => console.log(err));
|
79
frontend/src/polyfills.ts
Normal file
79
frontend/src/polyfills.ts
Normal file
|
@ -0,0 +1,79 @@
|
||||||
|
/**
|
||||||
|
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||||
|
* You can add your own extra polyfills to this file.
|
||||||
|
*
|
||||||
|
* This file is divided into 2 sections:
|
||||||
|
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||||
|
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||||
|
* file.
|
||||||
|
*
|
||||||
|
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||||
|
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||||
|
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||||
|
*
|
||||||
|
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* BROWSER POLYFILLS
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
||||||
|
// import 'core-js/es6/symbol';
|
||||||
|
// import 'core-js/es6/object';
|
||||||
|
// import 'core-js/es6/function';
|
||||||
|
// import 'core-js/es6/parse-int';
|
||||||
|
// import 'core-js/es6/parse-float';
|
||||||
|
// import 'core-js/es6/number';
|
||||||
|
// import 'core-js/es6/math';
|
||||||
|
// import 'core-js/es6/string';
|
||||||
|
// import 'core-js/es6/date';
|
||||||
|
// import 'core-js/es6/array';
|
||||||
|
// import 'core-js/es6/regexp';
|
||||||
|
// import 'core-js/es6/map';
|
||||||
|
// import 'core-js/es6/weak-map';
|
||||||
|
// import 'core-js/es6/set';
|
||||||
|
|
||||||
|
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||||
|
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||||
|
|
||||||
|
/** IE10 and IE11 requires the following for the Reflect API. */
|
||||||
|
// import 'core-js/es6/reflect';
|
||||||
|
|
||||||
|
|
||||||
|
/** Evergreen browsers require these. **/
|
||||||
|
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
|
||||||
|
import 'core-js/es7/reflect';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Required to support Web Animations `@angular/platform-browser/animations`.
|
||||||
|
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||||
|
**/
|
||||||
|
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||||
|
|
||||||
|
/**
|
||||||
|
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||||
|
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||||
|
*/
|
||||||
|
|
||||||
|
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||||
|
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||||
|
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||||
|
|
||||||
|
/*
|
||||||
|
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||||
|
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||||
|
*/
|
||||||
|
// (window as any).__Zone_enable_cross_context_check = true;
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* Zone JS is required by default for Angular itself.
|
||||||
|
*/
|
||||||
|
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* APPLICATION IMPORTS
|
||||||
|
*/
|
29
frontend/src/styles.scss
Normal file
29
frontend/src/styles.scss
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
/* Bootstrap and customizations */
|
||||||
|
@import '~bootstrap/scss/bootstrap.scss';
|
||||||
|
|
||||||
|
/* Add font awesome */
|
||||||
|
$fa-font-path: "~font-awesome/fonts";
|
||||||
|
@import '~font-awesome/scss/font-awesome';
|
||||||
|
|
||||||
|
/* Custom global rules */
|
||||||
|
.no-shadow {
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-color: #CCC !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add validation rules for angular classes */
|
||||||
|
.ng-dirty.ng-invalid.auto-invalid {
|
||||||
|
@extend .is-invalid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-dirty.ng-invalid.auto-validstate {
|
||||||
|
@extend .is-invalid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-dirty.ng-valid.auto-valid {
|
||||||
|
@extend .is-valid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-dirty.ng-valid.auto-validstate {
|
||||||
|
@extend .is-valid;
|
||||||
|
}
|
20
frontend/src/test.ts
Normal file
20
frontend/src/test.ts
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||||
|
|
||||||
|
import 'zone.js/dist/zone-testing';
|
||||||
|
import { getTestBed } from '@angular/core/testing';
|
||||||
|
import {
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting
|
||||||
|
} from '@angular/platform-browser-dynamic/testing';
|
||||||
|
|
||||||
|
declare const require: any;
|
||||||
|
|
||||||
|
// First, initialize the Angular testing environment.
|
||||||
|
getTestBed().initTestEnvironment(
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting()
|
||||||
|
);
|
||||||
|
// Then we find all the tests.
|
||||||
|
const context = require.context('./', true, /\.spec\.ts$/);
|
||||||
|
// And load the modules.
|
||||||
|
context.keys().map(context);
|
13
frontend/src/tsconfig.app.json
Normal file
13
frontend/src/tsconfig.app.json
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/app",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"module": "es2015",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"test.ts",
|
||||||
|
"**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
19
frontend/src/tsconfig.spec.json
Normal file
19
frontend/src/tsconfig.spec.json
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/spec",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"module": "commonjs",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"test.ts"
|
||||||
|
],
|
||||||
|
"include": [
|
||||||
|
"**/*.spec.ts",
|
||||||
|
"**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
5
frontend/src/typings.d.ts
vendored
Normal file
5
frontend/src/typings.d.ts
vendored
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
/* SystemJS module definition */
|
||||||
|
declare var module: NodeModule;
|
||||||
|
interface NodeModule {
|
||||||
|
id: string;
|
||||||
|
}
|
19
frontend/tsconfig.json
Normal file
19
frontend/tsconfig.json
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": false,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"target": "es5",
|
||||||
|
"typeRoots": [
|
||||||
|
"node_modules/@types"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es2017",
|
||||||
|
"dom"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
143
frontend/tslint.json
Normal file
143
frontend/tslint.json
Normal file
|
@ -0,0 +1,143 @@
|
||||||
|
{
|
||||||
|
"rulesDirectory": [
|
||||||
|
"node_modules/codelyzer"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"arrow-return-shorthand": true,
|
||||||
|
"callable-types": true,
|
||||||
|
"class-name": true,
|
||||||
|
"comment-format": [
|
||||||
|
true,
|
||||||
|
"check-space"
|
||||||
|
],
|
||||||
|
"curly": true,
|
||||||
|
"deprecation": {
|
||||||
|
"severity": "warn"
|
||||||
|
},
|
||||||
|
"eofline": true,
|
||||||
|
"forin": true,
|
||||||
|
"import-blacklist": [
|
||||||
|
true,
|
||||||
|
"rxjs",
|
||||||
|
"rxjs/Rx"
|
||||||
|
],
|
||||||
|
"import-spacing": true,
|
||||||
|
"indent": [
|
||||||
|
true,
|
||||||
|
"spaces"
|
||||||
|
],
|
||||||
|
"interface-over-type-literal": true,
|
||||||
|
"label-position": true,
|
||||||
|
"max-line-length": [
|
||||||
|
true,
|
||||||
|
140
|
||||||
|
],
|
||||||
|
"member-access": false,
|
||||||
|
"member-ordering": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"order": [
|
||||||
|
"static-field",
|
||||||
|
"instance-field",
|
||||||
|
"static-method",
|
||||||
|
"instance-method"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-arg": true,
|
||||||
|
"no-bitwise": true,
|
||||||
|
"no-console": [
|
||||||
|
true,
|
||||||
|
"debug",
|
||||||
|
"info",
|
||||||
|
"time",
|
||||||
|
"timeEnd",
|
||||||
|
"trace"
|
||||||
|
],
|
||||||
|
"no-construct": true,
|
||||||
|
"no-debugger": true,
|
||||||
|
"no-duplicate-super": true,
|
||||||
|
"no-empty": false,
|
||||||
|
"no-empty-interface": true,
|
||||||
|
"no-eval": true,
|
||||||
|
"no-inferrable-types": [
|
||||||
|
true,
|
||||||
|
"ignore-params"
|
||||||
|
],
|
||||||
|
"no-misused-new": true,
|
||||||
|
"no-non-null-assertion": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-string-literal": false,
|
||||||
|
"no-string-throw": true,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-trailing-whitespace": true,
|
||||||
|
"no-unnecessary-initializer": true,
|
||||||
|
"no-unused-expression": true,
|
||||||
|
"no-use-before-declare": true,
|
||||||
|
"no-var-keyword": true,
|
||||||
|
"object-literal-sort-keys": false,
|
||||||
|
"one-line": [
|
||||||
|
true,
|
||||||
|
"check-open-brace",
|
||||||
|
"check-catch",
|
||||||
|
"check-else",
|
||||||
|
"check-whitespace"
|
||||||
|
],
|
||||||
|
"prefer-const": true,
|
||||||
|
"quotemark": [
|
||||||
|
true,
|
||||||
|
"single"
|
||||||
|
],
|
||||||
|
"radix": true,
|
||||||
|
"semicolon": [
|
||||||
|
true,
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"triple-equals": [
|
||||||
|
true,
|
||||||
|
"allow-null-check"
|
||||||
|
],
|
||||||
|
"typedef-whitespace": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"call-signature": "nospace",
|
||||||
|
"index-signature": "nospace",
|
||||||
|
"parameter": "nospace",
|
||||||
|
"property-declaration": "nospace",
|
||||||
|
"variable-declaration": "nospace"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unified-signatures": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": [
|
||||||
|
true,
|
||||||
|
"check-branch",
|
||||||
|
"check-decl",
|
||||||
|
"check-operator",
|
||||||
|
"check-separator",
|
||||||
|
"check-type"
|
||||||
|
],
|
||||||
|
"directive-selector": [
|
||||||
|
true,
|
||||||
|
"attribute",
|
||||||
|
"app",
|
||||||
|
"camelCase"
|
||||||
|
],
|
||||||
|
"component-selector": [
|
||||||
|
true,
|
||||||
|
"element",
|
||||||
|
"app",
|
||||||
|
"kebab-case"
|
||||||
|
],
|
||||||
|
"no-output-on-prefix": true,
|
||||||
|
"use-input-property-decorator": true,
|
||||||
|
"use-output-property-decorator": true,
|
||||||
|
"use-host-property-decorator": true,
|
||||||
|
"no-input-rename": true,
|
||||||
|
"no-output-rename": true,
|
||||||
|
"use-life-cycle-interface": true,
|
||||||
|
"use-pipe-transform-interface": true,
|
||||||
|
"component-class-suffix": true,
|
||||||
|
"directive-class-suffix": true
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue