[README] -

Design improvement
User can't create program and kata with void values

client/src/app/app.module.ts

@@ -7,7 +7,15 @@ import {TerminalAssertComponent} from './component/terminal-assert/terminal-asse
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MainLeftSideNavComponent} from './component/main-left-side-nav/main-left-side-nav.component';
 import {LayoutModule} from '@angular/cdk/layout';
-import {MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule} from '@angular/material';
+import {
+  MatToolbarModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatIconModule,
+  MatListModule,
+  MatCardModule,
+  MatInputModule, MatFormFieldModule, MatExpansionModule, MatGridListModule, MatSnackBarModule
+} from '@angular/material';
 import {AppRoutingModule} from './app-routing.module';
 import {RouterModule} from '@angular/router';
 import {KataDisplayerComponent} from './component/kata-displayer/kata-displayer.component';
@@ -60,6 +68,11 @@ import { CardNoneallDisplayerComponent } from './component/program-displayer/car
     MatButtonModule,
     MatSidenavModule,
     MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatSnackBarModule,
     MatListModule,
     AppRoutingModule,
     RouterModule,

client/src/app/component/kata-create/kata-create.component.html

 <div class="d-flex justify-content-center" style="margin-top:2%">
   <div class="d-flex flex-column">
+    <form [formGroup]="CreateForm">
 
-    <div class="p-2"><label (click)="toggleOptions()" class="header">Kata's options (click me)</label></div>
-    <div class="p-2" [hidden]="options">
-      <input type="text" placeholder=" Some title.." [(ngModel)]="title"/>
-      <select (change)="UpdateChoice($event)">
-        <option value="true" selected="selected">
-          Display assert box
-        </option>
-        <option value="false">Don't display assert box</option>
+      <mat-accordion>
+        <mat-expansion-panel expanded="true">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Kata's informations
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <div class="form-group">
+            <label for="title">Title</label>
+            <input type="text" formControlName="title" class="form-control"
+                   [ngClass]="{ 'is-invalid': submitted && f.title.errors }"/>
+            <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
+              <div *ngIf="f.title.errors.required">Kata needs a title</div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="assert">Display assert box</label>
+            <select class="form-control" formControlName="assert"
+                    [ngClass]="{ 'is-invalid': submitted && f.assert.errors}">
+              <option value="true">yes</option>
+              <option value="false">no</option>
             </select>
-      Unlock solution at
-      <input type="number" value="0" [(ngModel)]="numberOfAttempt"/> attempts.
+            <div *ngIf="submitted && f.assert.errors" class="invalid-feedback">
+              <div *ngIf="f.assert.errors.required">Please choose an option</div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="number">Unlock solution at (> -1)</label>
+            <input type="number" formControlName="number" value="1" class="form-control"
+                   [ngClass]="{ 'is-invalid': submitted && f.assert.errors}"/>
+            <div *ngIf="submitted && f.number.errors" class="invalid-feedback">
+              <div *ngIf="f.number.errors.required">Please choose the number of tries before unlocking the "surrender
+                option"
+              </div>
+            </div>
           </div>
-    <div class="p-2"><label (click)="toggleInstructions()" class="header">Kata's instructions (click me)</label></div>
-    <div class="p-2" [hidden]="instructions"><textarea class="rules" [(ngModel)]="rules"></textarea></div>
-
 
-    <div class="p-2"><label class="header">Kata's Solution and assert</label></div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Kata's instruction
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div class="form-group">
+            <textarea class="form-control" style="width:100%" formControlName="instruction"
+                      [ngClass]="{ 'is-invalid': submitted && f.instruction.errors }"></textarea>
+            <div *ngIf="submitted && f.instruction.errors" class="invalid-feedback">
+              <div *ngIf="f.instruction.errors.required">Kata needs instructions</div>
+            </div>
+          </div>
+        </mat-expansion-panel>
 
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Kata
+            </mat-panel-title>
+          </mat-expansion-panel-header>
 
-    <div class="p-2">
-      <app-terminal-code [code]="solution" [type]="language" (new)="OnNewEventSolution($event)"></app-terminal-code>
-      <app-terminal-code style="margin-left: 20px;" [code]="assert" [type]="language"
+          <mat-grid-list cols="2" rowHeight="310px">
+            <mat-grid-tile>
+              <app-terminal-code [code]="solution" [type]="language"
+                                 (new)="OnNewEventSolution($event)"></app-terminal-code>
+            </mat-grid-tile>
+            <mat-grid-tile>
+              <app-terminal-code [code]="assert" [type]="language"
                                  (new)="OnNewEventAssert($event)"></app-terminal-code>
-    </div>
-
+            </mat-grid-tile>
 
-    <div class="p-2">
+            <mat-grid-tile>
               <app-terminal-code [code]="canva" [type]="language" (new)="OnNewEventCanva($event)"></app-terminal-code>
+            </mat-grid-tile>
+            <mat-grid-tile>
                         <textarea [ngClass]="{'success':status === 0,'error':status === 1,'':status === 2}"
-                style="white-space: pre-wrap" disabled>{{result}}</textarea>
-    </div>
+                                  style="white-space: pre-wrap;" disabled>{{result}}</textarea>
+            </mat-grid-tile>
+          </mat-grid-list>
 
+          <br/>
 
-    <div class="p-2">
-      <button mat-button (click)="try()">Try my solution</button>
-      <button mat-button (click)="publish()" style="float:right">Create kata</button>
-    </div>
+          <button mat-button [disabled]="compiling" (click)="try()">Try my solution</button>
+          <button mat-button [disabled]="compiling" (click)="publish()" style="float:right">Create kata</button>
+
+        </mat-expansion-panel>
+      </mat-accordion>
 
+    </form>
   </div>
 </div>
 

client/src/app/component/kata-create/kata-create.component.scss

@@ -9,44 +9,34 @@
 }
 
 * {
-  display: inline-block;
   font-family: "Helvetica Neue";
 }
+mat-expansion-panel {
+  width: 1100px;
+  background-color: var(--color-dark-blue);
+  color:var(--color-cloud);
+}
 
+mat-panel-title{
+  color:var(--color-cloud);
+}
 textarea {
-  background-color: rgba(43, 47, 57, 1);
+  background-color: var(--color-soft-light-blue);
   border: 2px solid rgba(44, 62, 80, 1.0);
-  color: white;
+  color: var(--color-cloud);
   font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-
   border-radius: 6px;
-
   resize: none;
   outline: none;
+
   height: 300px;
-  width: 500px;
   padding: 10px;
-  margin-left: 20px;
-}
-
-textarea.rules {
-  width: 100%;
-  height: 200px;
-  margin: 0;
+  width: 500px;
 }
 
+input{
 
-input[type=number]{
-  width: 100px;
-  background-color: rgba(43, 47, 57, 1);
-  border: 1px solid rgba(63, 67, 77, 1);
-  border-radius: 7px;
-  color: rgba(236, 240, 241, 1.0);
-  padding: .6em 1.4em .5em .8em;
-}
-input[type=text]{
-
-  background-color: rgba(43, 47, 57, 1);
+  background-color: var(--color-soft-light-blue);
   border: 1px solid rgba(63, 67, 77, 1);
   border-radius: 7px;
   color: rgba(236, 240, 241, 1.0);
@@ -54,9 +44,8 @@ input[type=text]{
 }
 
 select {
-  padding: .6em 1.4em .5em .8em;
-  color: rgba(236, 240, 241, 1.0);
-  background-color: rgba(43, 47, 57, 1);
+  color: var(--color-cloud);
+  background-color: var(--color-soft-light-blue);
   max-width: 100%;
   margin: 0;
   border: 1px solid rgba(63, 67, 77, 1);
@@ -66,6 +55,9 @@ select {
   appearance: none;
 }
 
+label{
+  color:var(--color-cloud);
+}
 .header{
   width: 100%;
   height: 20px;
@@ -79,3 +71,18 @@ select {
 .animated{
   transition: all .3s;
 }
+
+select:focus{
+  color:var(--color-cloud);
+  background-color: var(--color-soft-light-blue);
+}
+
+input:focus{
+  color:var(--color-cloud);
+  background-color: var(--color-soft-light-blue);
+}
+
+textarea:focus{
+  color:var(--color-cloud);
+  background-color: var(--color-soft-light-blue);
+}

client/src/app/component/kata-create/kata-create.component.ts

@@ -6,6 +6,8 @@ import {Location} from '@angular/common';
 import {CompilationService} from '../../services/compilation/compilation.service';
 import {v4 as uuid} from 'uuid';
 import {KataService} from '../../services/kata/kata.service';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
 @Component({
   selector: 'app-kata-create',
   templateUrl: './kata-create.component.html',
@@ -18,7 +20,8 @@ export class KataCreateComponent implements OnInit {
               private location: Location,
               private kataService: KataService,
               public router: Router,
-              private compilationService: CompilationService
+              private compilationService: CompilationService,
+              private formBuilder: FormBuilder,
   ) {
   }
 
@@ -31,26 +34,19 @@ export class KataCreateComponent implements OnInit {
   result = '';
   canva = '';
   solution = '';
-  rules = '';
 
   programId = '';
 
   LANG: Canva;
 
-  keepAssertForKata = true;
-  numberOfAttempt = 0;
-
-  options = false;
-  instructions = true;
+  CreateForm: FormGroup;
+  submitted = false;
 
+  compiling = false;
 
-  toggleOptions() {
-    this.options = !this.options;
-    console.log(this.options);
-  }
 
-  toggleInstructions() {
-    this.instructions = !this.instructions;
+  get f() {
+    return this.CreateForm.controls;
   }
 
   getLANG(id: string): void {
@@ -72,28 +68,36 @@ export class KataCreateComponent implements OnInit {
     this.solution = event.toString();
   }
 
-  UpdateChoice(event: any): void {
-    this.keepAssertForKata = event.target.value;
-  }
 
   publish(): void {
 
+    this.submitted = true;
+
+    if (this.CreateForm.invalid) {
+      return;
+    }
+
+    if (this.f.number.value < 0) {
+      return;
+    }
+
     this.kataService.publish(JSON.stringify({
       id: uuid(),
-      title: this.title,
+      title: this.f.title.value,
       language: this.language,
       canva: this.canva,
       cassert: this.assert,
       solution: this.solution,
-      rules: this.rules,
-      keepAssert: this.keepAssertForKata,
-      nbAttempt: this.numberOfAttempt,
+      rules: this.f.instruction.value,
+      keepAssert: this.f.assert.value,
+      nbAttempt: this.f.number.value,
       programID: this.programId,
       difficulty: 'Ceinture blanche'
     })).subscribe(data => this.router.navigate(['/kata-displayer/' + this.programId + '']));
   }
 
   try(): void {
+    this.compiling = true;
     let response;
 
     this.compilationService.compilationServer(JSON.stringify({
@@ -101,7 +105,6 @@ export class KataCreateComponent implements OnInit {
       stream: this.solution,
       assert: this.assert
     })).subscribe((data: string) => {
-      console.log(data);
       response = data;
       if (response.exit === 0) {
         this.status = 0;
@@ -110,7 +113,7 @@ export class KataCreateComponent implements OnInit {
         this.status = 1;
         this.result = response.error;
       }
-
+      this.compiling = false;
       this.result += '\nExecuted in : ' + response.time + 'ms';
     });
   }
@@ -120,6 +123,13 @@ export class KataCreateComponent implements OnInit {
     this.language = this.route.snapshot.paramMap.get('language');
     this.getLANG(this.language);
 
+    this.CreateForm = this.formBuilder.group({
+      title: ['', Validators.required],
+      assert: ['', Validators.required],
+      number: ['', Validators.required],
+      instruction: ['', Validators.required],
+    });
+
   }
 
 }

client/src/app/component/kata-displayer/kata-displayer.component.html

@@ -20,7 +20,7 @@
 
     <div class="d-flex flex-wrap justify-content-start">
     <span *ngFor="let kata of katas">
-        <div class="card" style="width: 18rem;margin: 2rem" routerLink="/kata/{{idProgram}}/{{kata.id}}">
+        <div class="card" routerLink="/kata/{{idProgram}}/{{kata.id}}">
           <div class="card-body">
             <h5 class="card-title"><a class="title"
                                       routerLink="/kata/{{idProgram}}/{{kata.id}}">{{kata.title}}</a>

client/src/app/component/kata-displayer/kata-displayer.component.scss

@@ -24,6 +24,8 @@
 
 }
 .card {
+  width: 18rem;
+  margin: 2rem;
   background-color: var(--color-dark-blue);
 }
 a {

client/src/app/component/kata-displayer/kata-displayer.component.ts

@@ -10,6 +10,8 @@ import {v4 as uuid} from 'uuid';
 import {ProgramSubscriptionService} from '../../services/program/subs/program-subscription.service';
 import {ProgramService} from '../../services/program/program.service';
 import {KataService} from '../../services/kata/kata.service';
+import {MatSnackBar} from '@angular/material';
+
 
 @Component({
   selector: 'app-kata-displayer',
@@ -47,6 +49,7 @@ export class KataDisplayerComponent implements OnInit {
     private auth: AuthenticationService,
     private programSubscription: ProgramSubscriptionService,
     private router: Router,
+    private snackBar: MatSnackBar
   ) {
   }
 
@@ -78,8 +81,14 @@ export class KataDisplayerComponent implements OnInit {
       this.programSubscription.toggle(JSON.stringify({programid: this.idProgram, userid: this.currentUser.id})).subscribe(() => {
         if (this.isSubscribed) {
           this.subvalue = 'Unsubscribe';
+          this.snackBar.open('Subscribed to ' + this.programTitle,'', {
+            duration: 2000
+          });
         } else {
           this.subvalue = 'Subscribe';
+          this.snackBar.open('Unsubscribed from ' + this.programTitle,'', {
+            duration: 2000
+          });
         }
       });
     }

client/src/app/component/kata/kata.component.html

@@ -20,15 +20,19 @@
   [ngClass]="{'header':true,'no-assert':assert===true}">output :</label></div>
     <div class="p-2">
       <app-terminal-assert [hidden]="assert" [code]="kata.cassert" [type]="kata.language"></app-terminal-assert>
-      <textarea [ngClass]="{'success':status === 0,'error':status === 1,'':status === 2,'no-assert':assert===true}" style="white-space: pre-wrap;"
+      <textarea [ngClass]="{'success':status === 0,'error':status === 1,'':status === 2,'no-assert':assert===true}"
+                style="white-space: pre-wrap;"
                 disabled>{{result}}</textarea>
     </div>
 
     <div class="p-2">
 
       <button mat-button [hidden]="!isResolved" [disabled]="newTry" (click)="newtry()" style="margin-right: 10px">Try again</button>
-      <button mat-button [disabled]="compiling || (isResolved && !newTry )" (click)="compile(kata.language,kata.canva,kata.cassert)"
+      <button mat-button [disabled]="compiling || (isResolved && !newTry )"
+              (click)="compile(kata.language,kata.canva,kata.cassert)"
               style="float:right">Run</button>
+      <img style="float:right" *ngIf="compiling"
+           src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
       <button mat-button [disabled]="compiling || isResolved" (click)="Surrender()"
               style="margin-right: 10px">Surrender</button>
     </div>

client/src/app/component/kata/kata.component.ts

@@ -96,6 +96,7 @@ export class KataComponent implements OnInit {
 
   newtry() {
     this.newTry = true;
+    this.alertService.info('This won\'t affect your overall score');
   }
 
   Surrender() {

client/src/app/component/login/login.component.html

@@ -22,5 +22,5 @@
     <br>
     <div *ngIf="error" class="alert alert-danger">{{error}}</div>
   </form>
-
 </div>
+

client/src/app/component/mine/mine.component.html

 <div class="container" *ngIf="programs">
   <h1 style="margin:2rem 0 0 2rem;text-align: center">My created programs</h1>
-
+  <hr>
   <app-card-noneall-displayer [programs]="programs"></app-card-noneall-displayer>
 
+
 </div>
 
 <div *ngIf="programReceivedFailed">

client/src/app/component/program-create/program-create.component.html

@@ -2,24 +2,47 @@
     <div class="d-flex flex-column">
     <fieldset>
       <legend>New program</legend>
-      <div class="p-2"><label>Title</label><input placeholder="Some title.." type="text" [(ngModel)]="programTitle"/>
+      <form [formGroup]="CreateForm">
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input type="text" formControlName="title" class="form-control"
+                 [ngClass]="{ 'is-invalid': submitted && f.title.errors }"/>
+          <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
+            <div *ngIf="f.title.errors.required">Program needs a title</div>
           </div>
-      <div class="p-2"><label>Targeted language</label><select (change)="update($event)">
+        </div>
+        <div class="form-group">
+          <label for="language">Targeted language</label>
+          <select class="form-control" formControlName="language"
+                  [ngClass]="{ 'is-invalid': submitted && f.language.errors}">
             <option value="python">python</option>
             <option value="java">java</option>
-      </select></div>
-      <div class="p-2"><label>Program description</label><textarea [(ngModel)]="programDescr"
-                                                                   placeholder="Some text.."></textarea></div>
-      <div class="p-2"><label>Tags</label><input type="text" [(ngModel)]="programTags"
-                                                 placeholder=" arrays,writeable,.."/></div>
-      <div class="p-2">
-
+          </select>
+          <div *ngIf="submitted && f.language.errors" class="invalid-feedback">
+            <div *ngIf="f.language.errors.required">Program needs a language</div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea class="form-control" formControlName="description"
+                    [ngClass]="{ 'is-invalid': submitted && f.description.errors }"></textarea>
+          <div *ngIf="submitted && f.description.errors" class="invalid-feedback">
+            <div *ngIf="f.description.errors.required">Program needs a description</div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="tags">Tags</label>
+          <input class="form-control" type="text" [ngClass]="{ 'is-invalid': submitted && f.tags.errors }" formControlName="tags" placeholder="format: tag1,tag2,.."/>
+          <div *ngIf="submitted && f.tags.errors" class="invalid-feedback">
+            <div *ngIf="f.tags.errors.required">Program needs one or more tags</div>
+          </div>
+        </div>
+        <div class="form-group">
           <button mat-button (click)="createProgram(false)">Create</button>
           <button mat-button (click)="createProgram(true)" class="button" style="float:right">Create with kata</button>
-
         </div>
+      </form>
     </fieldset>
   </div>
-</div>
-
 
+</div>

client/src/app/component/program-create/program-create.component.scss

-input[type=text]{
+input{
   width: 100%;
   background-color: rgba(43, 47, 57, 1);
   border: 1px solid rgba(63, 67, 77, 1);
@@ -7,11 +7,15 @@ input[type=text]{
   padding: .6em 1.4em .5em .8em;
 }
 
-
+input:focus{
+  background-color: rgba(43, 47, 57, 1);
+  color: var(--color-cloud);
+  outline:none;
+}
 
 select {
 
-  padding: .6em 1.4em .5em .8em;
+  //padding: .6em 1.4em .5em .8em;
   color: rgba(236, 240, 241, 1.0);
   background-color: rgba(43, 47, 57, 1);
   width: 100%;
@@ -24,8 +28,21 @@ select {
   appearance: none;
 }
 
+select:focus{
+  background-color: rgba(43, 47, 57, 1);
+  color: var(--color-cloud);
+  outline:none;
+}
+
+textarea:focus{
+  background-color: rgba(43, 47, 57, 1);
+  color: var(--color-cloud);
+  outline:none;
+}
+
 label{
   margin-top:.4em;
+  color : var(--color-cloud);
 }
 
 textarea{
@@ -46,17 +63,18 @@ textarea{
 fieldset {
   border: 3px solid var(--color-light-blue);
   border-radius: 6px;
-
+  width:500px;
   padding: 1rem;
 }
 
 legend {
   text-align: center;
+  color : var(--color-cloud);
 
 }
 
 *{
   font-family: "Helvetica Neue";
-  color : var(--color-cloud);
+
 }
 

client/src/app/component/program-create/program-create.component.ts

@@ -5,6 +5,7 @@ import {User} from '../../_helper/_models/user';
 import {v4 as uuid} from 'uuid';
 import {ProgramSubscriptionService} from '../../services/program/subs/program-subscription.service';
 import {ProgramService} from '../../services/program/program.service';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   selector: 'app-program-create',
@@ -17,29 +18,35 @@ export class ProgramCreateComponent implements OnInit {
   constructor(private programService: ProgramService,
               public router: Router,
               private auth: AuthenticationService,
-              private programSubscription: ProgramSubscriptionService) {
+              private programSubscription: ProgramSubscriptionService,
+              private formBuilder: FormBuilder) {
     this.currentUser = this.auth.currentUserValue;
   }
 
-  programTitle = '';
-  programDescr = '';
-  programTags = '';
-  programLanguage = 'python';
+  CreateForm: FormGroup;
+
+  submitted = false;
   programToKata = 0;
 
-  update(event: any) {
-    this.programLanguage = event.target.value;
+  get f() {
+    return this.CreateForm.controls;
   }
 
   createProgram(newkata: boolean): void {
+    this.submitted = true;
+
+    if (this.CreateForm.invalid) {
+      return;
+    }
+
     this.programService.createProgram(JSON.stringify({
       id: this.programToKata,
       sensei: this.currentUser.username,
-      language: this.programLanguage,
+      language: this.f.language.value,
       nbKata: 0,
-      title: this.programTitle,
-      description: this.programDescr,
-      tags: this.programTags.split(','),
+      title: this.f.title.value,
+      description: this.f.description.value,
+      tags: this.f.tags.value.split(','),
       idsensei: this.currentUser.id,
       katas: []
     })).subscribe(() => {
@@ -52,7 +59,7 @@ export class ProgramCreateComponent implements OnInit {
         katas: []
       })).subscribe(() => {
           if (newkata) {
-            this.router.navigate(['/kata_create/' + this.programToKata + '/' + this.programLanguage + '']);
+            this.router.navigate(['/kata_create/' + this.programToKata + '/' + this.f.language.value + '']);
           } else {
             this.router.navigate(['/program/mine']);
           }
@@ -65,6 +72,13 @@ export class ProgramCreateComponent implements OnInit {
 
   ngOnInit() {
     this.programToKata = uuid();
+
+    this.CreateForm = this.formBuilder.group({
+      title: ['', Validators.required],
+      language: ['', Validators.required],
+      description: ['', Validators.required],
+      tags: ['', Validators.required],
+    });
   }
 
 }

client/src/app/component/program-displayer/card-displayer/card-displayer.component.css

@@ -4,16 +4,21 @@
 }
 
 .language:hover {
-  color: var(--color-language-hover);
 
+  border-bottom: 1px solid var(--color-language-hover);
+  cursor: pointer;
 }
 
-
+a:hover{
+  color: var(--color-cloud);
+}
 .sensei {
   color: var(--color-dark-grey) !important;
 }
+
 .sensei:hover {
-  color:blue;
+  border-bottom: 1px solid var(--color-dark-grey);
+  cursor: pointer;
 }
 
 .tag {
@@ -23,6 +28,11 @@
   margin-right: 3px;
 }
 
+.tag:hover {
+  border-bottom: 1px solid rgba(9, 132, 227, 1.0);
+  cursor: pointer;
+}
+
 .nbkata {
   font-size: 15px;
   color: var(--color-amethyst);
@@ -32,7 +42,7 @@
 .card {
   background-color: var(--color-dark-blue);
   width: 18.4rem;
-  margin: 2rem
+  margin:2rem;
 }
 
 

client/src/app/component/program-displayer/card-displayer/card-displayer.component.html

 <h6 *ngIf="filter" style="margin:0 0 0 2rem">Filtered by {{filterType}} : <span
   class="filter-value">{{filterValue}}</span></h6>
-<div class="d-flex flex-wrap justify-content-start">
+<div class="d-flex flex-wrap justify-content-around">
   <div *ngFor="let program of programs">
     <div class="card">
       <div class="card-body">

client/src/app/component/program-displayer/card-noneall-displayer/card-noneall-displayer.component.css

-.language {
-  color: var(--color-language);
-  float: right;
-}
-
-.language:hover {
-  color: var(--color-language-hover);
-
-}
-
-
-.sensei {
-  color: var(--color-dark-grey) !important;
-}
-.sensei:hover{
-  color:blue;
-}
-
-.tag {
-  background-color: rgba(99, 110, 114, 0.4);
-  color: rgba(9, 132, 227, 1.0);
-  padding: 3px;
-  margin-right: 3px;
-}
-
-.nbkata {
-  font-size: 15px;
-  color: var(--color-amethyst);
-  float: right;
-}
-
-.card {
-  background-color: var(--color-dark-blue);
-}
-
-
-.card:hover {
-  background-color: var(--color-electro);
-  border: 1px solid var(--color-electro);
-}
-
-* {
-  color: var(--color-cloud);
-}
-
-.filter-value{
-  color:var(--color-language);
-}

client/src/app/component/program-displayer/card-noneall-displayer/card-noneall-displayer.component.html

 <h6 *ngIf="filter" style="margin:0 0 0 2rem">Filtered by {{filterType}} : <span
   class="filter-value">{{filterValue}}</span></h6>
-<div class="d-flex flex-wrap justify-content-start">
+<div class="d-flex flex-wrap justify-content-around">
   <div *ngFor="let program of programs">
-    <div class="card" style="width: 18rem;margin: 2rem">
+    <div class="card">
       <div class="card-body">
         <a routerLink="/kata-displayer/{{program.programID}}"><h5 class="card-title">{{program.title}}<span
           style="float:right" [hidden]="program.nbKataDone == -1">{{+program.nbKataDone / +program.nbKata * 100}}
           %</span></h5></a>
-        <h6 class="card-subtitle mb-2 text-muted"><a><span class="sensei">{{program.sensei}}</span> </a>
+        <h6 class="card-subtitle mb-2 text-muted"><a><span (click)="querySearch('sensei',program.sensei)" class="sensei">{{program.sensei}}</span> </a>
           <a><span (click)="querySearch('language',program.language)" class="language">{{program.language}}</span></a>
         </h6>
         <br/>

client/src/app/component/program-displayer/card-noneall-displayer/card-noneall-displayer.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'app-card-noneall-displayer',
   templateUrl: './card-noneall-displayer.component.html',
-  styleUrls: ['./card-noneall-displayer.component.css']
+  styleUrls: ['../card-displayer/card-displayer.component.css']
 })
 export class CardNoneallDisplayerComponent implements OnInit {
 
@@ -24,6 +24,9 @@ export class CardNoneallDisplayerComponent implements OnInit {
     this.filterValue = res;
     this.filter = true;
     this.programs = this.programs.filter((x) => {
+      if (type === 'tags') {
+        return x[type].filter((t) => t === res);
+      }
       return x[type] === res;
     });
   }

client/src/app/component/program-displayer/program-displayer.component.html

 <div class="container" *ngIf="programs">
   <h1 style="margin:2rem 0 0 2rem;text-align: center">All available programs</h1>
-
+<hr/>
     <app-card-displayer [programs]="programs"></app-card-displayer>
 
 </div>