Added basic skelleton with login

Cette révision appartient à :
Lukas Metzger 2018-04-08 13:02:00 +02:00
Parent 983ee5171a
révision 266a583a4d
66 fichiers modifiés avec 14008 ajouts et 0 suppressions

2
.gitignore externe
Voir le fichier

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

Voir le fichier

@ -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
.travis/frontend-build.sh Fichier exécutable
Voir le fichier

@ -0,0 +1,5 @@
#!/bin/bash
cd frontend
npm run build

60
frontend/.angular-cli.json Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 générée Fichier normal

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

51
frontend/package.json Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

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

Voir le fichier

@ -0,0 +1,11 @@
export class SessionApitype {
public username: string = null;
public token: string = null;
constructor(init: Object) {
Object.assign(this, init);
}
}

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

Voir le fichier

@ -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 Fichier normal
Voir le fichier

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

Voir le fichier

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

Voir le fichier

@ -0,0 +1,10 @@
export class SortEventDatatype {
public field: string;
public order: number;
constructor(init: Object) {
Object.assign(this, init);
}
}

Voir le fichier

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

Voir le fichier

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

Voir le fichier

Voir le fichier

@ -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() { }
}

Voir le fichier

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

Voir le fichier

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

@ -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() { }
}

Voir le fichier

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

Voir le fichier

Voir le fichier

@ -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() { }
}

Voir le fichier

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

Voir le fichier

Voir le fichier

@ -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() { }
}

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

@ -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() { }
}

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

Voir le fichier

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

Voir le fichier

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

Voir le fichier

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

Voir le fichier

@ -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 Fichier normal
Voir le fichier

Voir le fichier

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

Voir le fichier

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

Fichier binaire non affiché.

Après

Largeur:  |  Hauteur:  |  Taille: 5.3 KiB

17
frontend/src/index.html Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

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

Voir le fichier

@ -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 externe Fichier normal
Voir le fichier

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

19
frontend/tsconfig.json Fichier normal
Voir le fichier

@ -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 Fichier normal
Voir le fichier

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