Remove hardcoded name, create input for user, disable button if user is not set

Author: HugoCapocci

README.md

@@ -1,4 +1,4 @@
-# AngularShopTutorial
+# AngularTutorial
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.2.
 
@@ -25,3 +25,19 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+<hr/>
+
+# Exercice
+
+## Setup:
+
+  - Fork the project, and clone it
+  - create your own dev branch `git checkout -b dev`
+  - launch `npm install` to download dependencies
+
+## Sync with forked repository:
+
+ - use command `git fetch upstream` to retrieve master branch from forked repository. It will create a local upstream/master branch.
+ - go to your local master branch: `git checkout master`
+ - merge the upstream master to your local master: ` git merge upstream/master`. You're up to date!

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { TimeAgoPipe } from 'time-ago-pipe';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -14,7 +15,8 @@ import { TimelineComponent } from './timeline/timeline.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/timeline/timeline.component.html

@@ -1,3 +1,9 @@
+<div class="user-box">
+  <div *ngIf="user"><span>Bienvenue, {{ user | uppercase }}</span></div>
+  <div *ngIf="!user"><span>Veuillez saisir votre nom </span></div>
+  <div><small>Modifier: </small><input [(ngModel)]="user" placeholder="votre nom"></div>
+</div>
+
 <div *ngFor="let tweet of tweets" class="tweet-container">
   <div class="tweet-header">
     <strong>{{ tweet.user }}</strong>
@@ -21,6 +27,11 @@
     <textarea cols="50" rows="5" #tweetContent></textarea>
   </div>
   <div class="footer">
-    <button class="send-tweet-button" (click)="addTweet(tweetContent.value)">Tweeter</button>
+    <button
+      class="send-tweet-button"
+      [class.disabled]="!user"
+      [disabled]="!user"
+      (click)="addTweet(tweetContent.value)"
+    >Tweeter</button>
   </div>
 </div>

src/app/timeline/timeline.component.less

@@ -1,3 +1,5 @@
+@grey: #657786;
+
 .tweet-container {
   margin-top: 10px;
   margin-left: 10px;
@@ -12,7 +14,7 @@
 }
 
 .time {
-  color: #657786;
+  color: @grey;
 }
 
 .time:before {
@@ -65,3 +67,13 @@
 .favorite-count {
   margin-left: 4px;
 }
+
+.user-box {
+  margin-bottom: 10px;
+  padding: 5px;
+  color: #14171a;
+}
+
+.disabled {
+  background-color: @grey !important;
+}

src/app/timeline/timeline.component.ts

@@ -23,7 +23,7 @@ export class TimelineComponent implements OnInit {
     },
   ];
 
-  user: string = 'Hugo';
+  private user;
 
   constructor() { }