Browse Source

Added basic skelleton with login

tags/v2.0.0
Lukas Metzger 2 years ago
parent
commit
266a583a4d
66 changed files with 14008 additions and 0 deletions
  1. +2
    -0
      .gitignore
  2. +1
    -0
      .travis.yml
  3. +5
    -0
      .travis/frontend-build.sh
  4. +60
    -0
      frontend/.angular-cli.json
  5. +14
    -0
      frontend/e2e/app.e2e-spec.ts
  6. +11
    -0
      frontend/e2e/app.po.ts
  7. +14
    -0
      frontend/e2e/tsconfig.e2e.json
  8. +33
    -0
      frontend/karma.conf.js
  9. +12637
    -0
      frontend/package-lock.json
  10. +51
    -0
      frontend/package.json
  11. +28
    -0
      frontend/protractor.conf.js
  12. +9
    -0
      frontend/proxy.conf.json
  13. +11
    -0
      frontend/src/app/apitypes/Session.apitype.ts
  14. +17
    -0
      frontend/src/app/apitypes/User.apitype.ts
  15. +28
    -0
      frontend/src/app/app-routing.module.ts
  16. +12
    -0
      frontend/src/app/app.component.html
  17. +0
    -0
      frontend/src/app/app.component.scss
  18. +19
    -0
      frontend/src/app/app.component.ts
  19. +47
    -0
      frontend/src/app/app.module.ts
  20. +17
    -0
      frontend/src/app/datatypes/modal-options.datatype.ts
  21. +10
    -0
      frontend/src/app/datatypes/sort-event.datatype.ts
  22. +49
    -0
      frontend/src/app/operations/session.operation.ts
  23. +3
    -0
      frontend/src/app/pages/domains/domains.component.html
  24. +0
    -0
      frontend/src/app/pages/domains/domains.component.scss
  25. +12
    -0
      frontend/src/app/pages/domains/domains.component.ts
  26. +34
    -0
      frontend/src/app/pages/login/login.component.html
  27. +0
    -0
      frontend/src/app/pages/login/login.component.scss
  28. +40
    -0
      frontend/src/app/pages/login/login.component.ts
  29. +3
    -0
      frontend/src/app/partials/alert-message/alert-message.component.html
  30. +3
    -0
      frontend/src/app/partials/alert-message/alert-message.component.scss
  31. +12
    -0
      frontend/src/app/partials/alert-message/alert-message.component.ts
  32. +3
    -0
      frontend/src/app/partials/alert/alert.component.html
  33. +0
    -0
      frontend/src/app/partials/alert/alert.component.scss
  34. +13
    -0
      frontend/src/app/partials/alert/alert.component.ts
  35. +3
    -0
      frontend/src/app/partials/fa-icon/fa-icon.component.html
  36. +0
    -0
      frontend/src/app/partials/fa-icon/fa-icon.component.scss
  37. +16
    -0
      frontend/src/app/partials/fa-icon/fa-icon.component.ts
  38. +17
    -0
      frontend/src/app/partials/modal-container/modal-container.component.html
  39. +3
    -0
      frontend/src/app/partials/modal-container/modal-container.component.scss
  40. +83
    -0
      frontend/src/app/partials/modal-container/modal-container.component.ts
  41. +7
    -0
      frontend/src/app/partials/navbar-entry/navbar-entry.component.html
  42. +0
    -0
      frontend/src/app/partials/navbar-entry/navbar-entry.component.scss
  43. +15
    -0
      frontend/src/app/partials/navbar-entry/navbar-entry.component.ts
  44. +19
    -0
      frontend/src/app/partials/navbar/navbar.component.html
  45. +6
    -0
      frontend/src/app/partials/navbar/navbar.component.scss
  46. +46
    -0
      frontend/src/app/partials/navbar/navbar.component.ts
  47. +3
    -0
      frontend/src/app/partials/sort/sort.component.html
  48. +0
    -0
      frontend/src/app/partials/sort/sort.component.scss
  49. +56
    -0
      frontend/src/app/partials/sort/sort.component.ts
  50. +84
    -0
      frontend/src/app/services/http.service.ts
  51. +32
    -0
      frontend/src/app/services/modal.service.ts
  52. +53
    -0
      frontend/src/app/services/state.service.ts
  53. +0
    -0
      frontend/src/assets/.gitkeep
  54. +3
    -0
      frontend/src/environments/environment.prod.ts
  55. +8
    -0
      frontend/src/environments/environment.ts
  56. BIN
      frontend/src/favicon.ico
  57. +17
    -0
      frontend/src/index.html
  58. +12
    -0
      frontend/src/main.ts
  59. +79
    -0
      frontend/src/polyfills.ts
  60. +29
    -0
      frontend/src/styles.scss
  61. +20
    -0
      frontend/src/test.ts
  62. +13
    -0
      frontend/src/tsconfig.app.json
  63. +19
    -0
      frontend/src/tsconfig.spec.json
  64. +5
    -0
      frontend/src/typings.d.ts
  65. +19
    -0
      frontend/tsconfig.json
  66. +143
    -0
      frontend/tslint.json

+ 2
- 0
.gitignore View File

@@ -6,3 +6,5 @@ backend/src/config/ConfigOverride.php
backend/test/config.sh
backend/test/node_modules/
backend/test/logfile.log

.vscode/

+ 1
- 0
.travis.yml View File

@@ -19,5 +19,6 @@ before_script:
- .travis/backend-start-server.sh > /dev/null 2>&1 &
script:
- .travis/frontend-lint.sh
- .travis/frontend-build.sh
- .travis/backend-lint.sh
- .travis/backend-test.sh

+ 5
- 0
.travis/frontend-build.sh View File

@@ -0,0 +1,5 @@
#!/bin/bash

cd frontend

npm run build

+ 60
- 0
frontend/.angular-cli.json View 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
- 0
frontend/e2e/app.e2e-spec.ts View 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
- 0
frontend/e2e/app.po.ts View 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
- 0
frontend/e2e/tsconfig.e2e.json View File

@@ -0,0 +1,14 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}

+ 33
- 0
frontend/karma.conf.js View 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
- 0
frontend/package-lock.json
File diff suppressed because it is too large
View File


+ 51
- 0
frontend/package.json View 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
- 0
frontend/protractor.conf.js View 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
- 0
frontend/proxy.conf.json View File

@@ -0,0 +1,9 @@
{
"/api": {
"target": "http://localhost:8000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}

+ 11
- 0
frontend/src/app/apitypes/Session.apitype.ts View File

@@ -0,0 +1,11 @@

export class SessionApitype {

public username: string = null;

public token: string = null;

constructor(init: Object) {
Object.assign(this, init);
}
}

+ 17
- 0
frontend/src/app/apitypes/User.apitype.ts View 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
- 0
frontend/src/app/app-routing.module.ts View 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
- 0
frontend/src/app/app.component.html View 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
- 0
frontend/src/app/app.component.scss View File


+ 19
- 0
frontend/src/app/app.component.ts View 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
- 0
frontend/src/app/app.module.ts View 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
- 0
frontend/src/app/datatypes/modal-options.datatype.ts View 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
- 0
frontend/src/app/datatypes/sort-event.datatype.ts View File

@@ -0,0 +1,10 @@

export class SortEventDatatype {

public field: string;
public order: number;

constructor(init: Object) {
Object.assign(this, init);
}
}

+ 49
- 0
frontend/src/app/operations/session.operation.ts View 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
- 0
frontend/src/app/pages/domains/domains.component.html View File

@@ -0,0 +1,3 @@
<p>
domains works!
</p>

+ 0
- 0
frontend/src/app/pages/domains/domains.component.scss View File


+ 12
- 0
frontend/src/app/pages/domains/domains.component.ts View 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
- 0
frontend/src/app/pages/login/login.component.html View 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
- 0
frontend/src/app/pages/login/login.component.scss View File


+ 40
- 0
frontend/src/app/pages/login/login.component.ts View 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;
}
}
}

+ 3
- 0
frontend/src/app/partials/alert-message/alert-message.component.html View File

@@ -0,0 +1,3 @@
<p>
<ng-content></ng-content>
</p>

+ 3
- 0
frontend/src/app/partials/alert-message/alert-message.component.scss View File

@@ -0,0 +1,3 @@
p {
margin: 0px !important;
}

+ 12
- 0
frontend/src/app/partials/alert-message/alert-message.component.ts View File

@@ -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
- 0
frontend/src/app/partials/alert/alert.component.html View File

@@ -0,0 +1,3 @@
<div class="alert" [ngClass]="'alert-' + type" role="alert">
<ng-content></ng-content>
</div>

+ 0
- 0
frontend/src/app/partials/alert/alert.component.scss View File


+ 13
- 0
frontend/src/app/partials/alert/alert.component.ts View 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
- 0
frontend/src/app/partials/fa-icon/fa-icon.component.html View 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>

+ 0
- 0
frontend/src/app/partials/fa-icon/fa-icon.component.scss View File


+ 16
- 0
frontend/src/app/partials/fa-icon/fa-icon.component.ts View 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() { }
}

+ 17
- 0
frontend/src/app/partials/modal-container/modal-container.component.html View File

@@ -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>

+ 3
- 0
frontend/src/app/partials/modal-container/modal-container.component.scss View File

@@ -0,0 +1,3 @@
div.modal {
display: block;
}

+ 83
- 0
frontend/src/app/partials/modal-container/modal-container.component.ts View File

@@ -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;
}
}

}

+ 7
- 0
frontend/src/app/partials/navbar-entry/navbar-entry.component.html View File

@@ -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
frontend/src/app/partials/navbar-entry/navbar-entry.component.scss View File


+ 15
- 0
frontend/src/app/partials/navbar-entry/navbar-entry.component.ts View File

@@ -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
- 0
frontend/src/app/partials/navbar/navbar.component.html View 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
- 0
frontend/src/app/partials/navbar/navbar.component.scss View File

@@ -0,0 +1,6 @@
/* Workaround for bootstrap 4 alpha 6*/
@media(max-width:768px){
.navbar .container {
width: 100%;
}
}

+ 46
- 0
frontend/src/app/partials/navbar/navbar.component.ts View 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
- 0
frontend/src/app/partials/sort/sort.component.html View 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
- 0
frontend/src/app/partials/sort/sort.component.scss View File


+ 56
- 0
frontend/src/app/partials/sort/sort.component.ts View 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
- 0
frontend/src/app/services/http.service.ts View 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
- 0
frontend/src/app/services/modal.service.ts View 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
- 0
frontend/src/app/services/state.service.ts View 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
- 0
frontend/src/assets/.gitkeep View File


+ 3
- 0
frontend/src/environments/environment.prod.ts View File

@@ -0,0 +1,3 @@
export const environment = {
production: true
};

+ 8
- 0
frontend/src/environments/environment.ts View 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 View File

Before After

+ 17
- 0
frontend/src/index.html View 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
- 0
frontend/src/main.ts View 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
- 0
frontend/src/polyfills.ts View 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
- 0
frontend/src/styles.scss View 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
- 0
frontend/src/test.ts View 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
- 0
frontend/src/tsconfig.app.json View File

@@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}

+ 19
- 0
frontend/src/tsconfig.spec.json View 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
- 0
frontend/src/typings.d.ts View File

@@ -0,0 +1,5 @@
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}

+ 19
- 0
frontend/tsconfig.json View 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
- 0
frontend/tslint.json View 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…
Cancel
Save