+
+ `,
+})
+export class FormlyWrapperCardComponent extends FieldWrapper {}
+
+@Component({
+ selector: 'formly-wrapper-div',
+ template: `
+ Its time to party
+{{ props.label }}
+
+
+
+
+ `,
+})
+export class FormlyWrapperDivComponent extends FieldWrapper {}
diff --git a/front/app/src/app/material-extensions.module.ts b/front/app/src/app/material-extensions.module.ts
new file mode 100644
index 00000000..9baa9281
--- /dev/null
+++ b/front/app/src/app/material-extensions.module.ts
@@ -0,0 +1,66 @@
+import { NgModule } from '@angular/core';
+
+import { MtxAlertModule } from '@ng-matero/extensions/alert';
+import { MtxButtonModule } from '@ng-matero/extensions/button';
+import { MtxCheckboxGroupModule } from '@ng-matero/extensions/checkbox-group';
+import { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
+import { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';
+import { MtxDialogModule } from '@ng-matero/extensions/dialog';
+import { MtxDrawerModule } from '@ng-matero/extensions/drawer';
+import { MtxGridModule } from '@ng-matero/extensions/grid';
+import { MtxLoaderModule } from '@ng-matero/extensions/loader';
+import { MtxPopoverModule } from '@ng-matero/extensions/popover';
+import { MtxProgressModule } from '@ng-matero/extensions/progress';
+import { MtxSelectModule } from '@ng-matero/extensions/select';
+import { MtxSliderModule } from '@ng-matero/extensions/slider';
+import { MtxSplitModule } from '@ng-matero/extensions/split';
+import { MtxTooltipModule } from '@ng-matero/extensions/tooltip';
+import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
+import { MtxMomentDatetimeModule } from '@ng-matero/extensions-moment-adapter';
+
+@NgModule({
+ exports: [
+ MtxAlertModule,
+ MtxButtonModule,
+ MtxCheckboxGroupModule,
+ MtxColorpickerModule,
+ MtxDatetimepickerModule,
+ MtxDialogModule,
+ MtxDrawerModule,
+ MtxGridModule,
+ MtxLoaderModule,
+ MtxPopoverModule,
+ MtxProgressModule,
+ MtxSelectModule,
+ MtxSliderModule,
+ MtxSplitModule,
+ MtxTooltipModule,
+ MtxMomentDatetimeModule, // <= You can import the other adapter you need (luxon, date-fns)
+ ],
+ providers: [
+ {
+ provide: MTX_DATETIME_FORMATS,
+ useValue: {
+ parse: {
+ dateInput: 'YYYY-MM-DD',
+ yearInput: 'YYYY',
+ monthInput: 'MMMM',
+ datetimeInput: 'YYYY-MM-DD HH:mm',
+ timeInput: 'HH:mm',
+ },
+ display: {
+ dateInput: 'YYYY-MM-DD',
+ yearInput: 'YYYY',
+ monthInput: 'MMMM',
+ datetimeInput: 'YYYY-MM-DD HH:mm',
+ timeInput: 'HH:mm',
+ monthYearLabel: 'YYYY MMMM',
+ dateA11yLabel: 'LL',
+ monthYearA11yLabel: 'MMMM YYYY',
+ popupHeaderDateLabel: 'MMM DD, ddd',
+ },
+ },
+ },
+ ],
+})
+export class MaterialExtensionsModule {}
diff --git a/front/app/src/app/material.module.ts b/front/app/src/app/material.module.ts
new file mode 100644
index 00000000..39155df7
--- /dev/null
+++ b/front/app/src/app/material.module.ts
@@ -0,0 +1,117 @@
+import { NgModule } from '@angular/core';
+
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatRippleModule, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import {
+ MatDialogConfig,
+ MatDialogModule,
+ MAT_DIALOG_DEFAULT_OPTIONS,
+} from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+
+import { PaginatorI18nService } from '@shared/services/paginator-i18n.service';
+
+@NgModule({
+ exports: [
+ MatAutocompleteModule,
+ MatBadgeModule,
+ MatBottomSheetModule,
+ MatButtonModule,
+ MatButtonToggleModule,
+ MatCardModule,
+ MatCheckboxModule,
+ MatChipsModule,
+ MatStepperModule,
+ MatDatepickerModule,
+ MatMomentDateModule,
+ MatDialogModule,
+ MatDividerModule,
+ MatExpansionModule,
+ MatFormFieldModule,
+ MatGridListModule,
+ MatIconModule,
+ MatInputModule,
+ MatListModule,
+ MatMenuModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatProgressSpinnerModule,
+ MatRadioModule,
+ MatRippleModule,
+ MatSelectModule,
+ MatSidenavModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatSortModule,
+ MatTableModule,
+ MatTabsModule,
+ MatToolbarModule,
+ MatTooltipModule,
+ MatTreeModule,
+ ],
+ providers: [
+ {
+ provide: MatPaginatorIntl,
+ deps: [PaginatorI18nService],
+ useFactory: (paginatorI18nSrv: PaginatorI18nService) => paginatorI18nSrv.getPaginatorIntl(),
+ },
+ {
+ provide: MAT_DIALOG_DEFAULT_OPTIONS,
+ useValue: {
+ ...new MatDialogConfig(),
+ },
+ },
+ {
+ provide: MAT_DATE_LOCALE,
+ useFactory: () => navigator.language, // <= This will be overrided by runtime setting
+ },
+ {
+ provide: MAT_DATE_FORMATS,
+ useValue: {
+ parse: {
+ dateInput: 'YYYY-MM-DD',
+ },
+ display: {
+ dateInput: 'YYYY-MM-DD',
+ monthYearLabel: 'YYYY MMM',
+ dateA11yLabel: 'LL',
+ monthYearA11yLabel: 'YYYY MMM',
+ },
+ },
+ },
+ ],
+})
+export class MaterialModule {}
diff --git a/front/app/src/app/routes/dashboard/dashboard.component.html b/front/app/src/app/routes/dashboard/dashboard.component.html
new file mode 100644
index 00000000..f2649e73
--- /dev/null
+++ b/front/app/src/app/routes/dashboard/dashboard.component.html
@@ -0,0 +1 @@
+
+
+
+ {{'login.title' | translate}}!
+
+
+
+
+
+
+
diff --git a/front/app/src/app/routes/sessions/login/login.component.scss b/front/app/src/app/routes/sessions/login/login.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/front/app/src/app/routes/sessions/login/login.component.ts b/front/app/src/app/routes/sessions/login/login.component.ts
new file mode 100644
index 00000000..679f97c8
--- /dev/null
+++ b/front/app/src/app/routes/sessions/login/login.component.ts
@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
+import { filter } from 'rxjs/operators';
+import { AuthService } from '@core/authentication';
+
+@Component({
+ selector: 'app-login',
+ templateUrl: './login.component.html',
+ styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent {
+ isSubmitting = false;
+
+ loginForm = this.fb.nonNullable.group({
+ username: ['ng-matero', [Validators.required]],
+ password: ['ng-matero', [Validators.required]],
+ rememberMe: [false],
+ });
+
+ constructor(private fb: FormBuilder, private router: Router, private auth: AuthService) {}
+
+ get username() {
+ return this.loginForm.get('username')!;
+ }
+
+ get password() {
+ return this.loginForm.get('password')!;
+ }
+
+ get rememberMe() {
+ return this.loginForm.get('rememberMe')!;
+ }
+
+ login() {
+ this.isSubmitting = true;
+
+ this.auth
+ .login(this.username.value, this.password.value, this.rememberMe.value)
+ .pipe(filter(authenticated => authenticated))
+ .subscribe(
+ () => this.router.navigateByUrl('/'),
+ (errorRes: HttpErrorResponse) => {
+ if (errorRes.status === 422) {
+ const form = this.loginForm;
+ const errors = errorRes.error.errors;
+ Object.keys(errors).forEach(key => {
+ form.get(key === 'email' ? 'username' : key)?.setErrors({
+ remote: errors[key][0],
+ });
+ });
+ }
+ this.isSubmitting = false;
+ }
+ );
+ }
+}
diff --git a/front/app/src/app/routes/sessions/register/register.component.html b/front/app/src/app/routes/sessions/register/register.component.html
new file mode 100644
index 00000000..64f61c75
--- /dev/null
+++ b/front/app/src/app/routes/sessions/register/register.component.html
@@ -0,0 +1,52 @@
+
+
+
+
+ {{'register.welcome' | translate}},
+ {{'register.title' | translate}} +
+
+
+
+
+
+
+
diff --git a/front/app/src/app/routes/sessions/register/register.component.scss b/front/app/src/app/routes/sessions/register/register.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/front/app/src/app/routes/sessions/register/register.component.ts b/front/app/src/app/routes/sessions/register/register.component.ts
new file mode 100644
index 00000000..99db87ba
--- /dev/null
+++ b/front/app/src/app/routes/sessions/register/register.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators, AbstractControl } from '@angular/forms';
+
+@Component({
+ selector: 'app-register',
+ templateUrl: './register.component.html',
+ styleUrls: ['./register.component.scss'],
+})
+export class RegisterComponent {
+ registerForm = this.fb.nonNullable.group(
+ {
+ username: ['', [Validators.required]],
+ password: ['', [Validators.required]],
+ confirmPassword: ['', [Validators.required]],
+ },
+ {
+ validators: [this.matchValidator('password', 'confirmPassword')],
+ }
+ );
+
+ constructor(private fb: FormBuilder) {}
+
+ matchValidator(source: string, target: string) {
+ return (control: AbstractControl) => {
+ const sourceControl = control.get(source)!;
+ const targetControl = control.get(target)!;
+ if (targetControl.errors && !targetControl.errors.mismatch) {
+ return null;
+ }
+ if (sourceControl.value !== targetControl.value) {
+ targetControl.setErrors({ mismatch: true });
+ return { mismatch: true };
+ } else {
+ targetControl.setErrors(null);
+ return null;
+ }
+ };
+ }
+}
diff --git a/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.html b/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.html
new file mode 100644
index 00000000..27c3068b
--- /dev/null
+++ b/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.html
@@ -0,0 +1,12 @@
+
diff --git a/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.scss b/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.scss
new file mode 100644
index 00000000..39f0958e
--- /dev/null
+++ b/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.scss
@@ -0,0 +1,33 @@
+.matero-breadcrumb {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 1rem;
+ padding: 0;
+ font-size: .875rem;
+ list-style: none;
+}
+
+.matero-breadcrumb-item {
+ line-height: 18px;
+ text-transform: capitalize;
+
+ > * {
+ vertical-align: middle;
+ }
+
+ > a.link {
+ color: currentColor;
+
+ &:hover {
+ color: currentColor;
+ text-decoration: underline;
+ }
+ }
+
+ > .chevron {
+ width: 18px;
+ height: 18px;
+ font-size: 18px;
+ user-select: none;
+ }
+}
diff --git a/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.ts b/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.ts
new file mode 100644
index 00000000..bbc59972
--- /dev/null
+++ b/front/app/src/app/shared/components/breadcrumb/breadcrumb.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuService } from '@core/bootstrap/menu.service';
+
+@Component({
+ selector: 'breadcrumb',
+ templateUrl: './breadcrumb.component.html',
+ styleUrls: ['./breadcrumb.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class BreadcrumbComponent implements OnInit {
+ @Input() nav: string[] = [];
+
+ constructor(private router: Router, private menu: MenuService) {}
+
+ ngOnInit() {
+ this.nav = Array.isArray(this.nav) ? this.nav : [];
+
+ if (this.nav.length === 0) {
+ this.genBreadcrumb();
+ }
+ }
+
+ trackByNavlink(index: number, navLink: string): string {
+ return navLink;
+ }
+
+ genBreadcrumb() {
+ const routes = this.router.url.slice(1).split('/');
+ this.nav = this.menu.getLevel(routes);
+ this.nav.unshift('home');
+ }
+}
diff --git a/front/app/src/app/shared/components/error-code/_error-code-theme.scss b/front/app/src/app/shared/components/error-code/_error-code-theme.scss
new file mode 100644
index 00000000..3971559a
--- /dev/null
+++ b/front/app/src/app/shared/components/error-code/_error-code-theme.scss
@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+ $background: map.get($theme, background);
+ $foreground: map.get($theme, foreground);
+
+ .matero-error-code {
+ color: mat.get-color-from-palette($foreground, text);
+ }
+}
diff --git a/front/app/src/app/shared/components/error-code/_long-shadow.scss b/front/app/src/app/shared/components/error-code/_long-shadow.scss
new file mode 100644
index 00000000..24dac9a8
--- /dev/null
+++ b/front/app/src/app/shared/components/error-code/_long-shadow.scss
@@ -0,0 +1,55 @@
+// Long Shadow
+//
+// https://codepen.io/c_fitzmaurice/pen/ZYJeRY
+
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:math';
+
+@function long-shadow($direction, $length, $color, $fade: false, $shadow-count: 100) {
+ $shadows: ();
+ $conversion-map: (
+ to top: 180deg,
+ to top right: 135deg,
+ to right top: 135deg,
+ to right: 90deg,
+ to bottom right: 45deg,
+ to right bottom: 45deg,
+ to bottom: 0deg,
+ to bottom left: 315deg,
+ to left bottom: 315deg,
+ to left: 270deg,
+ to left top: 225deg,
+ to top left: 225deg
+ );
+
+ @if map-has-key($conversion-map, $direction) {
+ $direction: map.get($conversion-map, $direction);
+ }
+
+ @for $i from 1 through $shadow-count {
+ $current-step: math.div($i * $length, $shadow-count);
+ $current-color: if(
+ not $fade,
+ $color,
+ if(
+ meta.type-of($fade) == 'color',
+ color.mix($fade, $color, math.div($i, $shadow-count) * 100%),
+ color.rgba($color, 1 - math.div($i, $shadow-count))
+ )
+ );
+
+ $shadows: list.append(
+ $shadows,
+ (math.sin(0deg + $direction) * $current-step)
+ (math.cos(0deg + $direction) * $current-step)
+ 0
+ $current-color,
+ 'comma'
+ );
+ }
+
+ @return $shadows;
+}
diff --git a/front/app/src/app/shared/components/error-code/error-code.component.html b/front/app/src/app/shared/components/error-code/error-code.component.html
new file mode 100644
index 00000000..76b02749
--- /dev/null
+++ b/front/app/src/app/shared/components/error-code/error-code.component.html
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/front/app/src/app/shared/components/error-code/error-code.component.scss b/front/app/src/app/shared/components/error-code/error-code.component.scss
new file mode 100644
index 00000000..440ac0c1
--- /dev/null
+++ b/front/app/src/app/shared/components/error-code/error-code.component.scss
@@ -0,0 +1,32 @@
+@use 'long-shadow';
+
+.matero-error-wrap {
+ text-align: center;
+}
+
+.matero-error-code {
+ padding: 20px 0;
+ font-size: 150px;
+ text-shadow:
+ long-shadow.long-shadow(
+ $direction: 45deg,
+ $length: 60px,
+ $color: rgba(0, 0, 0, .03),
+ $fade: rgba(0, 0, 0, .0015),
+ $shadow-count: 20
+ );
+}
+
+.matero-error-title {
+ margin: 0 0 16px;
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 32px;
+}
+
+.matero-error-message {
+ margin: 0 0 16px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 28px;
+}
diff --git a/front/app/src/app/shared/components/error-code/error-code.component.ts b/front/app/src/app/shared/components/error-code/error-code.component.ts
new file mode 100644
index 00000000..51cdce54
--- /dev/null
+++ b/front/app/src/app/shared/components/error-code/error-code.component.ts
@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation, Input } from '@angular/core';
+
+@Component({
+ selector: 'error-code',
+ templateUrl: './error-code.component.html',
+ styleUrls: ['./error-code.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class ErrorCodeComponent {
+ @Input() code = '';
+ @Input() title = '';
+ @Input() message = '';
+}
diff --git a/front/app/src/app/shared/components/page-header/page-header.component.html b/front/app/src/app/shared/components/page-header/page-header.component.html
new file mode 100644
index 00000000..94d9cb98
--- /dev/null
+++ b/front/app/src/app/shared/components/page-header/page-header.component.html
@@ -0,0 +1,4 @@
++ {{'register.title' | translate}} +
+
diff --git a/front/app/src/app/shared/components/page-header/page-header.component.scss b/front/app/src/app/shared/components/page-header/page-header.component.scss
new file mode 100644
index 00000000..5c7fe177
--- /dev/null
+++ b/front/app/src/app/shared/components/page-header/page-header.component.scss
@@ -0,0 +1,18 @@
+.matero-page-header {
+ display: block;
+ margin: -16px -16px 16px;
+ padding: 16px;
+ color: #fff;
+ background-color: #3f51b5;
+
+ .matero-breadcrumb {
+ margin-top: 8px;
+ margin-bottom: 0;
+ }
+}
+
+.matero-page-title {
+ margin: 0;
+ font-weight: 400;
+ font-size: 24px;
+}
diff --git a/front/app/src/app/shared/components/page-header/page-header.component.ts b/front/app/src/app/shared/components/page-header/page-header.component.ts
new file mode 100644
index 00000000..bf27e9e2
--- /dev/null
+++ b/front/app/src/app/shared/components/page-header/page-header.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit, ViewEncapsulation, Input, HostBinding } from '@angular/core';
+import { MenuService } from '@core/bootstrap/menu.service';
+import { Router } from '@angular/router';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+
+@Component({
+ selector: 'page-header',
+ templateUrl: './page-header.component.html',
+ styleUrls: ['./page-header.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class PageHeaderComponent implements OnInit {
+ @HostBinding('class') class = 'matero-page-header';
+
+ @Input() title = '';
+ @Input() subtitle = '';
+ @Input() nav: string[] = [];
+ @Input()
+ get hideBreadcrumb() {
+ return this._hideBreadCrumb;
+ }
+ set hideBreadcrumb(value: boolean) {
+ this._hideBreadCrumb = coerceBooleanProperty(value);
+ }
+ private _hideBreadCrumb = false;
+
+ constructor(private router: Router, private menu: MenuService) {}
+
+ ngOnInit() {
+ this.nav = Array.isArray(this.nav) ? this.nav : [];
+
+ if (this.nav.length === 0) {
+ this.genBreadcrumb();
+ }
+
+ this.title = this.title || this.nav[this.nav.length - 1];
+ }
+
+ genBreadcrumb() {
+ const routes = this.router.url.slice(1).split('/');
+ this.nav = this.menu.getLevel(routes);
+ this.nav.unshift('home');
+ }
+
+ static ngAcceptInputType_hideBreadcrumb: BooleanInput;
+}
diff --git a/front/app/src/app/shared/directives/disable-control.directive.ts b/front/app/src/app/shared/directives/disable-control.directive.ts
new file mode 100644
index 00000000..a55ee2d9
--- /dev/null
+++ b/front/app/src/app/shared/directives/disable-control.directive.ts
@@ -0,0 +1,14 @@
+import { NgControl } from '@angular/forms';
+import { Directive, Input, SkipSelf, Optional } from '@angular/core';
+
+@Directive({
+ selector: '[disableControl]',
+})
+export class DisableControlDirective {
+ @Input() set disableControl(condition: boolean) {
+ const action = condition ? 'disable' : 'enable';
+ this.ngControl.control?.[action]();
+ }
+
+ constructor(@Optional() @SkipSelf() private ngControl: NgControl) {}
+}
diff --git a/front/app/src/app/shared/in-mem/in-mem-data.service.spec.ts b/front/app/src/app/shared/in-mem/in-mem-data.service.spec.ts
new file mode 100644
index 00000000..3d497005
--- /dev/null
+++ b/front/app/src/app/shared/in-mem/in-mem-data.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InMemDataService } from './in-mem-data.service';
+
+describe('InMemDataService', () => {
+ let service: InMemDataService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(InMemDataService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/front/app/src/app/shared/in-mem/in-mem-data.service.ts b/front/app/src/app/shared/in-mem/in-mem-data.service.ts
new file mode 100644
index 00000000..75933714
--- /dev/null
+++ b/front/app/src/app/shared/in-mem/in-mem-data.service.ts
@@ -0,0 +1,209 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest } from '@angular/common/http';
+import { InMemoryDbService, RequestInfo, STATUS } from 'angular-in-memory-web-api';
+import { from, Observable } from 'rxjs';
+import { ajax } from 'rxjs/ajax';
+import { find, map, switchMap } from 'rxjs/operators';
+import { environment } from '@env/environment';
+import { base64, currentTimestamp, filterObject, User } from '@core/authentication';
+
+class JWT {
+ generate(user: User) {
+ const expiresIn = 3600;
+ const refreshTokenExpiresIn = 86400;
+
+ return filterObject({
+ access_token: this.createToken(user, expiresIn),
+ token_type: 'bearer',
+ expires_in: user.refresh_token ? expiresIn : undefined,
+ refresh_token: user.refresh_token ? this.createToken(user, refreshTokenExpiresIn) : undefined,
+ });
+ }
+
+ getUser(req: HttpRequest{{title | translate}} {{subtitle}}
+
+
diff --git a/front/app/src/app/theme/auth-layout/auth-layout.component.scss b/front/app/src/app/theme/auth-layout/auth-layout.component.scss
new file mode 100644
index 00000000..8085a917
--- /dev/null
+++ b/front/app/src/app/theme/auth-layout/auth-layout.component.scss
@@ -0,0 +1,26 @@
+.matero-auth-container {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ min-height: 100%;
+ padding: 16px;
+ background-color: #212121;
+ background-image:
+ linear-gradient(
+ 45deg,
+ rgba(255, 255, 255, .05) 25%,
+ transparent 25%,
+ transparent 75%,
+ rgba(255, 255, 255, .05) 75%,
+ rgba(255, 255, 255, .05)
+ ),
+ linear-gradient(
+ -45deg,
+ rgba(255, 255, 255, .05) 25%,
+ transparent 25%,
+ transparent 75%,
+ rgba(255, 255, 255, .05) 75%,
+ rgba(255, 255, 255, .05)
+ );
+ background-size: 60px 60px;
+}
diff --git a/front/app/src/app/theme/auth-layout/auth-layout.component.ts b/front/app/src/app/theme/auth-layout/auth-layout.component.ts
new file mode 100644
index 00000000..bec0a8f1
--- /dev/null
+++ b/front/app/src/app/theme/auth-layout/auth-layout.component.ts
@@ -0,0 +1,9 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'app-auth-layout',
+ templateUrl: './auth-layout.component.html',
+ styleUrls: ['./auth-layout.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class AuthLayoutComponent {}
diff --git a/front/app/src/app/theme/header/_header-theme.scss b/front/app/src/app/theme/header/_header-theme.scss
new file mode 100644
index 00000000..41e98c5f
--- /dev/null
+++ b/front/app/src/app/theme/header/_header-theme.scss
@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+ $background: map.get($theme, background);
+ $foreground: map.get($theme, foreground);
+
+ .matero-toolbar {
+ border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
+ }
+}
diff --git a/front/app/src/app/theme/header/header.component.html b/front/app/src/app/theme/header/header.component.html
new file mode 100644
index 00000000..34c00332
--- /dev/null
+++ b/front/app/src/app/theme/header/header.component.html
@@ -0,0 +1,27 @@
+
+ ![avatar]()
+
+ `,
+ styleUrls: ['./user-panel.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class UserPanelComponent implements OnInit {
+ user!: User;
+
+ constructor(private router: Router, private auth: AuthService) {}
+
+ ngOnInit(): void {
+ this.auth.user().subscribe(user => (this.user = user));
+ }
+
+ logout() {
+ this.auth.logout().subscribe(() => this.router.navigateByUrl('/auth/login'));
+ }
+}
diff --git a/front/app/src/app/theme/sidemenu/_sidemenu-theme.scss b/front/app/src/app/theme/sidemenu/_sidemenu-theme.scss
new file mode 100644
index 00000000..c184cbba
--- /dev/null
+++ b/front/app/src/app/theme/sidemenu/_sidemenu-theme.scss
@@ -0,0 +1,64 @@
+@use 'sass:color';
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+ $is-dark-theme: map.get($theme, is-dark);
+ $primary: map.get($theme, primary);
+ $accent: map.get($theme, accent);
+ $background: map.get($theme, background);
+ $foreground: map.get($theme, foreground);
+
+ .matero-sidemenu {
+ > .menu-item {
+ > .menu-heading {
+ color: mat.get-color-from-palette($foreground, text);
+
+ &:hover,
+ &:focus {
+ background: mat.get-color-from-palette($background, hover);
+ }
+ }
+
+ &.active {
+ > .menu-heading {
+ color:
+ if(
+ $is-dark-theme,
+ color.adjust(mat.get-color-from-palette($primary), $lightness: 25%),
+ mat.get-color-from-palette($accent)
+ );
+ background-color: if($is-dark-theme, rgba(mat.get-color-from-palette($primary), .15), transparent);
+
+ &:hover,
+ &:focus {
+ background: mat.get-color-from-palette($background, hover);
+ }
+ }
+ }
+
+ &.expanded {
+ background: mat.get-color-from-palette($background, hover);
+ }
+ }
+
+ &.submenu {
+ > .menu-item {
+ &.active {
+ > .menu-heading {
+ background-color: transparent;
+
+ &:hover,
+ &:focus {
+ background: mat.get-color-from-palette($background, hover);
+ }
+ }
+ }
+
+ &.expanded {
+ background: transparent;
+ }
+ }
+ }
+ }
+}
diff --git a/front/app/src/app/theme/sidemenu/nav-accordion-item.directive.ts b/front/app/src/app/theme/sidemenu/nav-accordion-item.directive.ts
new file mode 100644
index 00000000..c0bf016e
--- /dev/null
+++ b/front/app/src/app/theme/sidemenu/nav-accordion-item.directive.ts
@@ -0,0 +1,43 @@
+import { Directive, HostBinding, Inject, Input, OnInit, OnDestroy } from '@angular/core';
+import { NavAccordionDirective } from './nav-accordion.directive';
+
+@Directive({
+ selector: '[navAccordionItem]',
+})
+export class NavAccordionItemDirective implements OnInit, OnDestroy {
+ protected nav: NavAccordionDirective;
+ protected isExpanded = false;
+
+ @Input() route = '';
+ @Input() type: 'link' | 'sub' | 'extLink' | 'extTabLink' = 'link';
+
+ @HostBinding('class.expanded')
+ @Input()
+ get expanded() {
+ return this.isExpanded;
+ }
+ set expanded(value: boolean) {
+ // Only sub menu can be expanded
+ this.isExpanded = this.type === 'sub' && value;
+
+ if (value) {
+ this.nav.closeOtherLinks(this);
+ }
+ }
+
+ constructor(@Inject(NavAccordionDirective) nav: NavAccordionDirective) {
+ this.nav = nav;
+ }
+
+ ngOnInit() {
+ this.nav.addLink(this);
+ }
+
+ ngOnDestroy() {
+ this.nav.removeLink(this);
+ }
+
+ toggle() {
+ this.expanded = !this.expanded;
+ }
+}
diff --git a/front/app/src/app/theme/sidemenu/nav-accordion-toggle.directive.ts b/front/app/src/app/theme/sidemenu/nav-accordion-toggle.directive.ts
new file mode 100644
index 00000000..8c2e9156
--- /dev/null
+++ b/front/app/src/app/theme/sidemenu/nav-accordion-toggle.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, HostListener, Inject } from '@angular/core';
+import { NavAccordionItemDirective } from './nav-accordion-item.directive';
+
+@Directive({
+ selector: '[navAccordionToggle]',
+})
+export class NavAccordionToggleDirective {
+ protected navLink: NavAccordionItemDirective;
+
+ constructor(@Inject(NavAccordionItemDirective) navLink: NavAccordionItemDirective) {
+ this.navLink = navLink;
+ }
+
+ @HostListener('click', ['$event'])
+ onClick() {
+ this.navLink.toggle();
+ }
+}
diff --git a/front/app/src/app/theme/sidemenu/nav-accordion.directive.ts b/front/app/src/app/theme/sidemenu/nav-accordion.directive.ts
new file mode 100644
index 00000000..a6a2538b
--- /dev/null
+++ b/front/app/src/app/theme/sidemenu/nav-accordion.directive.ts
@@ -0,0 +1,53 @@
+import { Directive } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { MenuService } from '@core';
+import { filter } from 'rxjs/operators';
+import { NavAccordionItemDirective } from './nav-accordion-item.directive';
+
+@Directive({
+ selector: '[navAccordion]',
+})
+export class NavAccordionDirective {
+ protected navLinks: NavAccordionItemDirective[] = [];
+
+ constructor(private router: Router, private menu: MenuService) {
+ this.router.events
+ .pipe(filter(event => event instanceof NavigationEnd))
+ .subscribe(() => this.checkOpenLinks());
+
+ // Fix opening status for async menu data
+ this.menu.change().subscribe(() => {
+ setTimeout(() => this.checkOpenLinks());
+ });
+ }
+
+ addLink(link: NavAccordionItemDirective) {
+ this.navLinks.push(link);
+ }
+
+ removeLink(link: NavAccordionItemDirective) {
+ const index = this.navLinks.indexOf(link);
+ if (index !== -1) {
+ this.navLinks.splice(index, 1);
+ }
+ }
+
+ closeOtherLinks(openLink: NavAccordionItemDirective) {
+ this.navLinks.forEach(link => {
+ if (link !== openLink) {
+ link.expanded = false;
+ }
+ });
+ }
+
+ checkOpenLinks() {
+ this.navLinks.forEach(link => {
+ if (link.route) {
+ if (this.router.url.split('/').includes(link.route)) {
+ link.expanded = true;
+ this.closeOtherLinks(link);
+ }
+ }
+ });
+ }
+}
diff --git a/front/app/src/app/theme/sidemenu/sidemenu.component.html b/front/app/src/app/theme/sidemenu/sidemenu.component.html
new file mode 100644
index 00000000..fdf52aa7
--- /dev/null
+++ b/front/app/src/app/theme/sidemenu/sidemenu.component.html
@@ -0,0 +1,70 @@
+{{ user.name }}
+{{ user.email }}
+ +
+ MATERO
+
+ `,
+ styles: [
+ `
+ .brand-logo {
+ width: 30px;
+ height: 30px;
+ }
+ `,
+ ],
+})
+export class BrandingComponent {}
diff --git a/front/app/src/app/theme/widgets/github.component.ts b/front/app/src/app/theme/widgets/github.component.ts
new file mode 100644
index 00000000..f4fa3536
--- /dev/null
+++ b/front/app/src/app/theme/widgets/github.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-github-button',
+ template: `
+
+
+
+ `,
+})
+export class GithubButtonComponent {}
diff --git a/front/app/src/app/theme/widgets/notification.component.ts b/front/app/src/app/theme/widgets/notification.component.ts
new file mode 100644
index 00000000..45648f49
--- /dev/null
+++ b/front/app/src/app/theme/widgets/notification.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-notification',
+ template: `
+
+
+