-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/login-page/login-page.component.less b/src/app/login-page/login-page.component.less
index a869a56..446dabc 100644
--- a/src/app/login-page/login-page.component.less
+++ b/src/app/login-page/login-page.component.less
@@ -1,6 +1,6 @@
@import '../../assets/less/modules/variables';
-mat-card {
+.login-card {
display: flex;
flex-direction: column;
max-width: 320px;
@@ -9,29 +9,61 @@ mat-card {
position: absolute;
right: 0;
left: 0;
+ top: 30%;
margin: 0 auto;
- transform: translate(0%, 100%);
-}
-
-mat-card-header {
- margin-bottom: 20px;
-}
+ background-color: @color-white;
+ font-family: 'SourseSansPro Semibold';
-mat-card-content {
-
- .mat-card-content-message {
- display: flex;
- flex-direction: column;
- a {
- margin-top: 20px;
+ &-header {
+ margin-bottom: 20px;
+ p {
+ font-family: 'SourseSansPro Regular';
+ font-size: 22px;
}
}
- form table {
- min-width: 100%;
- }
-}
+ &-content {
+
+ &-input {
+ margin-bottom: 20px;
+
+ input {
+ border: 1px solid @color-gray2;
+ border-radius: 3px;
+ padding: 7px;
+ width: 100%;
+ font-size: 14px;
+ color: @color-black;
+ box-sizing: border-box;
-mat-form-field {
- display: block;
+ &:focus {
+ outline: 1px solid @color-gray2;
+ }
+
+ &::placeholder {
+ color: @color-gray2;
+ }
+ }
+
+ .error-input {
+ border: 1px solid @color-red;
+ }
+
+ .error-message {
+ display: flex;
+ justify-content: flex-start;
+ padding-left: 10px;
+ color: @color-red;
+ }
+ }
+
+ &-actions {
+ button {
+ margin-top: 15px;
+ &:hover {
+ box-shadow: inset 0 0 100px 100px @color-black1;
+ }
+ }
+ }
+ }
}
diff --git a/src/app/login-page/login-page.component.ts b/src/app/login-page/login-page.component.ts
index e2f648d..f83c2a2 100644
--- a/src/app/login-page/login-page.component.ts
+++ b/src/app/login-page/login-page.component.ts
@@ -1,6 +1,8 @@
import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../core/services/auth.service';
+import { GetFormControls } from '../core/models';
@Component({
selector: 'app-login-page',
@@ -9,17 +11,27 @@ import { AuthService } from '../core/services/auth.service';
})
export class LoginPageComponent {
public isAuth: boolean = false;
- public username: string;
- public password: string;
public isAuthentificated: boolean;
+ public loginFormGroup: FormGroup;
constructor(
private authService: AuthService,
private router: Router,
- ) { }
+ private fb: FormBuilder
+ ) {
+ this.loginFormGroup = fb.group({
+ 'username': ['', [Validators.required]],
+ 'password': ['', [Validators.required]],
+ });
+ }
+
+ get formControls(): GetFormControls {
+ return this.loginFormGroup.controls;
+ }
public userLogin(): void {
- this.authService.userLogin(this.username, this.password).subscribe(
+ const { username, password} = this.loginFormGroup.value;
+ this.authService.userLogin(username, password).subscribe(
data => this.router.navigate(['courses'])
);
}
diff --git a/src/app/login-page/login-page.module.ts b/src/app/login-page/login-page.module.ts
index 652f603..079c63b 100644
--- a/src/app/login-page/login-page.module.ts
+++ b/src/app/login-page/login-page.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginPageComponent } from './login-page.component';
import { CustomMaterialModule } from '../core/modules/material.module';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [LoginPageComponent],
@@ -10,6 +10,7 @@ import { RouterModule } from '@angular/router';
CommonModule,
CustomMaterialModule,
FormsModule,
+ ReactiveFormsModule,
RouterModule
]
})
diff --git a/src/app/root/app-routing.module.ts b/src/app/root/app-routing.module.ts
index 53ccd1c..df487fa 100644
--- a/src/app/root/app-routing.module.ts
+++ b/src/app/root/app-routing.module.ts
@@ -5,13 +5,12 @@ import { HomePageComponent } from '../home-page/home-page.component';
import { LoginPageComponent } from '../login-page/login-page.component';
import { AddCoursePageComponent } from '../add-course-page/add-course-page.component';
import { NotFoundPageComponent } from '../not-found-page/not-found-page.component';
-import { EditCoursePageComponent } from '../edit-course-page/edit-course-page.component';
const routes: Routes = [
{ path: '', redirectTo: '/courses', pathMatch: 'full' },
{ path: 'courses', component: HomePageComponent, canActivate: [AuthGuard] },
{ path: 'courses/new', component: AddCoursePageComponent, canActivate: [AuthGuard] },
- { path: 'courses/:courseId', component: EditCoursePageComponent, canActivate: [AuthGuard] },
+ { path: 'courses/:courseId', component: AddCoursePageComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginPageComponent, resolve: [AuthGuard] },
{ path: '**', component: NotFoundPageComponent, canActivate: [AuthGuard] }
];
diff --git a/src/app/root/app.component.less b/src/app/root/app.component.less
index 5e29cdf..cb09205 100644
--- a/src/app/root/app.component.less
+++ b/src/app/root/app.component.less
@@ -18,4 +18,4 @@
color: white;
background-color: #4b4b4b;
border: 1px solid black;
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.component.html b/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.component.html
new file mode 100644
index 0000000..e2d8eed
--- /dev/null
+++ b/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.component.html
@@ -0,0 +1,35 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.component.ts b/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.component.ts
new file mode 100644
index 0000000..dd2a697
--- /dev/null
+++ b/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.component.ts
@@ -0,0 +1,113 @@
+import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { BehaviorSubject, EMPTY } from 'rxjs';
+import { debounceTime, mergeMap } from 'rxjs/operators';
+import { CourseAuthors } from 'src/app/core/models';
+import { CustomAuthorsInputService } from 'src/app/core/services/custom-authors-input';
+
+@Component({
+ selector: 'app-authors-input',
+ templateUrl: './custom-authors-input.component.html',
+ styleUrls: ['./custom-authors-input.less'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => CustomAuthorsInputComponent),
+ multi: true,
+ },
+ {
+ provide: NG_VALIDATORS,
+ useExisting: forwardRef(() => CustomAuthorsInputComponent),
+ multi: true,
+ }],
+ encapsulation: ViewEncapsulation.None
+})
+
+export class CustomAuthorsInputComponent implements ControlValueAccessor, Validator {
+ @Input() public formControl: FormControl;
+ public searchInputValueSubject: BehaviorSubject
= new BehaviorSubject('');
+ public searchInputValue: string = '';
+ public authorsSearchResult: CourseAuthors;
+ public authorsTagCloudSet: Set = new Set();
+
+ public onChange: (_: string[]) => void;
+ public onTouched: () => void;
+
+ constructor (
+ private addCoursePageService: CustomAuthorsInputService
+ ) { }
+
+ public ngOnInit(): void {
+ this.searchInputValueSubject
+ .pipe(
+ debounceTime(200),
+ mergeMap(result => {
+ if (result) {
+ return this.addCoursePageService.searchAuthors(result);
+ }
+ this.authorsSearchResult = undefined;
+ return EMPTY;
+ })
+ )
+ .subscribe(data => {
+ this.authorsSearchResult = data;
+ });
+
+ this.formControl.valueChanges
+ .subscribe(data => {
+ const authorsTagsCloud: Set = new Set(data);
+ this.authorsTagCloudSet = authorsTagsCloud;
+ this.formControl.updateValueAndValidity({ emitEvent: false });
+ });
+ }
+
+ public ngOnDestroy(): void {
+ this.searchInputValueSubject.unsubscribe();
+ }
+
+ public changeInputValue(): void {
+ this.searchInputValueSubject.next(this.searchInputValue);
+ }
+
+ public setAuthorInTagsCloud(authorId: string): void {
+ this.addCoursePageService.getAuthors(authorId).subscribe(
+ data => {
+ let authorsArr: string[];
+
+ this.authorsTagCloudSet.add(data.name);
+ authorsArr = [...this.authorsTagCloudSet];
+
+ this.authorsSearchResult = undefined;
+ this.searchInputValue = '';
+ this.onChange(authorsArr);
+
+ this.formControl.setValue(authorsArr);
+ this.formControl.markAsTouched();
+ }
+ );
+ }
+
+ public deleteAuthorFromTagsCloud(item: string): void {
+ this.authorsTagCloudSet.delete(item);
+ this.formControl.setValue([...this.authorsTagCloudSet]);
+ }
+
+ public writeValue(_: string[]): void {
+ return undefined;
+ }
+
+ public registerOnChange(fn: (_: string[]) => void): void {
+ this.onChange = fn;
+ }
+
+ public registerOnTouched(fn: () => void): void {
+ this.onTouched = fn;
+ }
+
+ public validate(control: AbstractControl): ValidationErrors | null {
+ const isValid: boolean = this.authorsTagCloudSet.size !== 0;
+ if (!isValid) {
+ return { requiredError: true };
+ }
+ }
+}
diff --git a/src/app/course-page/course-page.component.less b/src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.less
similarity index 100%
rename from src/app/course-page/course-page.component.less
rename to src/app/shared/custom-form-field-control/custom-authors-input/custom-authors-input.less
diff --git a/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.html b/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.html
new file mode 100644
index 0000000..3fd9f58
--- /dev/null
+++ b/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.html
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.less b/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.ts b/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.ts
new file mode 100644
index 0000000..8b8152b
--- /dev/null
+++ b/src/app/shared/custom-form-field-control/custom-created-at-date-field/custom-created-at-date-field.component.ts
@@ -0,0 +1,63 @@
+import { Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import {
+ ControlValueAccessor,
+ NG_VALUE_ACCESSOR,
+ NG_VALIDATORS,
+ Validator,
+ AbstractControl,
+ ValidationErrors
+} from '@angular/forms';
+
+@Component({
+ selector: 'app-created-at-date-field',
+ templateUrl: './custom-created-at-date-field.component.html',
+ styleUrls: ['./custom-created-at-date-field.component.less'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => CustomCreatedAtDateFieldComponent),
+ multi: true,
+ },
+ {
+ provide: NG_VALIDATORS,
+ useExisting: forwardRef(() => CustomCreatedAtDateFieldComponent),
+ multi: true,
+ }],
+ encapsulation: ViewEncapsulation.None
+})
+
+export class CustomCreatedAtDateFieldComponent implements ControlValueAccessor, Validator {
+ private _value: string = '';
+ public onChange: (_: string) => void;
+ public onTouched: () => void;
+
+ get value(): string {
+ return this._value;
+ }
+
+ set value(v: string) {
+ if (v !== this._value) {
+ this._value = v;
+ this.onChange(v);
+ }
+ }
+
+ public writeValue(value: string): void {
+ this._value = value;
+ }
+
+ public registerOnChange(fn: (_: string) => void): void {
+ this.onChange = fn;
+ }
+
+ public registerOnTouched(fn: () => void): void {
+ this.onTouched = fn;
+ }
+ public validate(control: AbstractControl): ValidationErrors | null {
+ const dateMask: RegExp = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
+ const isValid: boolean = dateMask.test(this._value);
+ if (!isValid && this._value) {
+ return { wrongFormatError: true };
+ }
+ }
+}
diff --git a/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.html b/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.html
new file mode 100644
index 0000000..05465c3
--- /dev/null
+++ b/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.html
@@ -0,0 +1,9 @@
+
+
+ {{value | transformMinutesToHours}}
+
\ No newline at end of file
diff --git a/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.less b/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.ts b/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.ts
new file mode 100644
index 0000000..f1e5e8c
--- /dev/null
+++ b/src/app/shared/custom-form-field-control/custom-duration-field/custom-duration-field.component.ts
@@ -0,0 +1,67 @@
+import { Component, forwardRef } from '@angular/core';
+import {
+ ControlValueAccessor,
+ NG_VALUE_ACCESSOR,
+ NG_VALIDATORS,
+ Validator,
+ AbstractControl,
+ ValidationErrors
+} from '@angular/forms';
+
+@Component({
+ selector: 'app-duration-field',
+ templateUrl: './custom-duration-field.component.html',
+ styleUrls: ['./custom-duration-field.component.less'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => CustomDurationFieldComponent),
+ multi: true,
+ },
+ {
+ provide: NG_VALIDATORS,
+ useExisting: forwardRef(() => CustomDurationFieldComponent),
+ multi: true,
+ }
+ ],
+})
+
+export class CustomDurationFieldComponent implements ControlValueAccessor, Validator {
+ private _value: number;
+ public onChange: (_: number) => void;
+ public onTouched: () => void;
+
+ get value(): number {
+ return this._value;
+ }
+
+ set value(v: number) {
+ if (v !== this._value) {
+ this._value = v;
+ this.onChange(v);
+ }
+ }
+
+ public writeValue(value: number): void {
+ this._value = value;
+ }
+
+ public registerOnChange(fn: (_: number) => void): void {
+ this.onChange = fn;
+ }
+
+ public registerOnTouched(fn: () => void): void {
+ this.onTouched = fn;
+ }
+
+ public correctInputValue(): boolean {
+ return this._value && !isNaN(this._value);
+ }
+
+ public validate(control: AbstractControl): ValidationErrors | null {
+ const isNotValid: boolean = isNaN(this._value);
+ if (isNotValid) {
+ return { onlyNumberError: true };
+ }
+ }
+}
diff --git a/src/app/shared/loading-block/loading-block.component.html b/src/app/shared/loading-block/loading-block.component.html
index 42c6635..608e255 100644
--- a/src/app/shared/loading-block/loading-block.component.html
+++ b/src/app/shared/loading-block/loading-block.component.html
@@ -1,3 +1,3 @@
-
+
diff --git a/src/app/shared/loading-block/loading-block.component.ts b/src/app/shared/loading-block/loading-block.component.ts
index 1d387ae..205bb0c 100644
--- a/src/app/shared/loading-block/loading-block.component.ts
+++ b/src/app/shared/loading-block/loading-block.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { LoadingBlockService } from 'src/app/core/services/loading-block.service';
import { Subscription } from 'rxjs';
@@ -7,15 +7,22 @@ import { Subscription } from 'rxjs';
templateUrl: './loading-block.component.html',
styleUrls: ['./loading-block.component.less']
})
+
export class LoadingBlockComponent implements OnInit {
private subscription: Subscription;
public loadingState: boolean;
- constructor (public loadingBlockService: LoadingBlockService) {}
+ constructor (
+ public loadingBlockService: LoadingBlockService,
+ private ref: ChangeDetectorRef
+ ) { }
public ngOnInit(): void {
this.subscription = this.loadingBlockService.stateLoadingBlockNotify.subscribe(
- data => this.loadingState = data
+ data => {
+ this.loadingState = data;
+ this.ref.detectChanges();
+ }
);
}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7ab02a1..d1947af 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -23,13 +23,13 @@ import { LoadingBlockComponent } from './loading-block/loading-block.component';
exports: [
HeaderComponent,
FooterComponent,
- LoadingBlockComponent
+ LoadingBlockComponent,
],
imports: [
CommonModule,
FontAwesomeModule,
CustomMaterialModule,
- RouterModule
+ RouterModule,
],
entryComponents: [
ConfirmationDialogComponent
diff --git a/src/styles.less b/src/styles.less
index 70cb456..427b34f 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -24,4 +24,4 @@ mat-card-header {
.mat-card-header-text {
margin-left: 0;
}
-}
\ No newline at end of file
+}