form builder adding

Author: iamsaquib8

codecamp-front/src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { PracticeComponent } from './components/practice/practice.component';
 import { DiscussComponent } from './components/discuss/discuss.component';
 import { ContestComponent } from './components/contest/contest.component';
 import { AboutComponent } from './components/about/about.component';
+import { IdeComponent } from './components/ide/ide.component';
 
 
 
@@ -23,8 +24,9 @@ const appRoutes: Routes = [
     {path: 'practice' , component: PracticeComponent},
     {path: 'contest' , component: ContestComponent},
     {path: 'discuss' , component: DiscussComponent},
-    {path: 'profile' , component: ProfileComponent}
-]
+    {path: 'profile' , component: ProfileComponent},
+    {path: 'ide', component: IdeComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(appRoutes)],

codecamp-front/src/app/app.module.ts

@@ -17,8 +17,8 @@ import { ContestComponent } from './components/contest/contest.component';
 import { AboutComponent } from './components/about/about.component';
 
 import { AuthService } from './services/auth.service';
-import { ValidateService } from './services/validate.service';
 import { HttpModule } from '@angular/http';
+import { IdeComponent } from './components/ide/ide.component';
 
 
 @NgModule({
@@ -32,15 +32,16 @@ import { HttpModule } from '@angular/http';
     PracticeComponent,
     DiscussComponent,
     ContestComponent,
-    AboutComponent
+    AboutComponent,
+    IdeComponent
   ],
   imports: [
     BrowserModule,
     HttpModule,
     ReactiveFormsModule,
     AppRoutingModule
   ],
-  providers: [ValidateService, AuthService],
+  providers: [ AuthService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

codecamp-front/src/app/components/ide/ide.component.css

@@ -8,4 +8,4 @@
 
 input[type="file"] {
    display: none;
-}
+}

codecamp-front/src/app/components/ide/ide.component.html

@@ -1,8 +1,8 @@
 <div class="container">
     <div class="row">
         <div class="col-md-12">
-            <p>Online IDE</p>
-            <textarea name="" id="" cols="100" rows="28" ></textarea>  
+            <h1 class="display-4">Online IDE</h1>
+            <textarea name="" id="" cols="105" rows="28" ></textarea>  
             <div class="row">
             <div class="col-md-8">
                 <label class="file-upload">Upload File
@@ -11,9 +11,14 @@
             </div>
             <div class="col-md-4">
                 <div class="form-check mr-auto">
-                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
-                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                     <button class="btn btn-dark">Compile</button>
+                    <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="gridCheck">
+                            <label class="form-check-label" for="gridCheck">
+                              Check me out
+                            </label>
+                          </div>
+                    
                 </div>
             </div>
             </div>

codecamp-front/src/app/components/login/login.component.html

@@ -0,0 +1,36 @@
+<div class="container">
+        <div class="row show-hide-message">
+          <div [ngClass]="messageClass">
+            {{ message }}
+          </div>
+        </div>
+      
+        <form [formGroup]="form" (submit)="onSignupSubmit()">      
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input type="text"
+             name="username" 
+             formControlName="username" 
+             class="form-control" 
+             placeholder="Enter username(XYZ)" 
+             autocomplete="off"
+             [ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty) , 'is-valid': !form.controls.username.errors}">
+          </div>
+      
+          <!-- Email Input -->
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" 
+            name="password" 
+            formControlName="password" 
+            class="form-control" 
+            placeholder="Enter password" 
+            autocomplete="off"
+            [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty) , 'is-valid': !form.controls.password.errors}">
+          </div>
+      
+          <input 
+          [disabled]="!form.valid"
+          type="submit" class="btn btn-primary" value="Sign up">
+        </form>
+      </div>

codecamp-front/src/app/components/login/login.component.ts

@@ -18,19 +18,4 @@ export class LoginComponent implements OnInit {
   ngOnInit() {
   }
 
-  onLoginSubmit(){
-    const user = {
-      username: this.username,
-      password: this.password
-    }
-    this.authService.authenticateUser( user ).subscribe(data => {
-      if (data.success) {
-          this.authService.storeUserData(data.token, data.user);
-          alert('login success');
-          this.router.navigate(['']);
-        } else {
-        this.router.navigate(['/login']);
-      }
-    } )
-    }
 }

codecamp-front/src/app/components/navbar/navbar.component.ts

@@ -16,9 +16,5 @@ export class NavbarComponent implements OnInit {
 
   ngOnInit() {
   }
-  onLogoutClick() {
-     this.authService.logout();
-     this.router.navigate(['/login']);
-     return false;
-  }
+
 }

codecamp-front/src/app/components/profile/profile.component.ts

@@ -16,13 +16,6 @@ export class ProfileComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.authService.getProfile().subscribe(profile =>{
-      this.user = profile.user;
-    },
-    err =>{
-      console.log(err);
-      return false;
-    });
   }
 
 }

codecamp-front/src/app/components/register/register.component.html

@@ -1,7 +1,10 @@
-<h2 class="display-4">
-  Register
-</h2>
-  <div class="container">
+<div class="container">
+  <div class="row show-hide-message">
+    <div [ngClass]="messageClass">
+      {{ message }}
+    </div>
+  </div>
+
   <form [formGroup]="form" (submit)="onSignupSubmit()">
     <div class="form-group">  
       <label for="name">Name</label>
@@ -29,17 +32,16 @@ <h2 class="display-4">
   <div class="form-group">
     <label for="email">Email</label>
       <input type="text" 
-      name="email" 
+      name="email_id" 
       class="form-control" 
-      [ngClass]="{'is-invalid': (form.controls.email.errors && form.controls.email.dirty) , 'is-valid': !form.controls.email.errors}"
+      [ngClass]="{'is-invalid': (form.controls.email_id.errors && form.controls.email_id.dirty) , 'is-valid': !form.controls.email_id.errors}"
       autocomplete="off" 
-      placeholder="*Email" 
-      formControlName="email" 
-      (blur)="checkEmail()">
+      placeholder="*email" 
+      formControlName="email_id">
       <!-- Validation -->
-      <div *ngIf="form.controls.email.errors?.required && form.controls.email.dirty" class="invalid-feedback">This Field is required</div>
-      <div class="invalid-feedback" *ngIf="(form.controls.email.errors?.minlength && form.controls.email.dirty || form.controls.email.errors?.maxlength && form.controls.email.dirty ) && form.controls.email.dirty">Minimum characters: 5, Maximum characters: 30</div>
-      <div class="invalid-feedback" *ngIf="form.controls.email.errors?.validateEmail && form.controls.email.dirty">This must be a valid e-mail</div>
+      <div *ngIf="form.controls.email_id.errors?.required && form.controls.email_id.dirty" class="invalid-feedback">This Field is required</div>
+      <div class="invalid-feedback" *ngIf="(form.controls.email_id.errors?.minlength && form.controls.email_id.dirty || form.controls.email_id.errors?.maxlength && form.controls.email_id.dirty ) && form.controls.email_id.dirty">Minimum characters: 5, Maximum characters: 30</div>
+      <div class="invalid-feedback" *ngIf="form.controls.email_id.errors?.validateemail && form.controls.email_id.dirty">This must be a valid e-mail</div>
   </div>
 
     <div class="form-group">
@@ -55,29 +57,59 @@ <h2 class="display-4">
 
     <div class="form-group">
       <label for="city">City</label>
-      <input type="text" name="city" formControlName="city" class="form-control" placeholder="Enter city" autocomplete="off"> 
+      <input type="text" 
+      name="city" 
+      formControlName="city" 
+      class="form-control" placeholder="Enter city" autocomplete="off"> 
     </div>
 
     <div class="form-group">
       <label for="dob">Date Of Birth</label>
-      <input type="date" name="dob" formControlName="dob" class="form-control" autocomplete="off">
+      <input type="date"
+       name="dob" 
+       formControlName="dob" 
+       class="form-control" 
+       autocomplete="off"
+       [ngClass]="{'is-invalid': (form.controls.dob.errors && form.controls.dob.dirty) , 'is-valid': !form.controls.dob.errors}">
     </div>
 
     <div class="form-group">
       <label for="gender">Gender</label>
-      <input type="text" name="gender" formControlName="gender" class="form-control" placeholder="Male/Female" autocomplete="off">
+      <input type="text" 
+      name="gender" 
+      formControlName="gender" 
+      class="form-control" 
+      placeholder="Male/Female" 
+      autocomplete="off">
     </div>
 
     <div class="form-group">
       <label for="password">Password</label>
-      <input type="password" name="password" formControlName="password" class="form-control" placeholder="Enter password" autocomplete="off">
+      <input type="password" 
+      name="password" 
+      formControlName="password" 
+      class="form-control" 
+      placeholder="Enter password" 
+      autocomplete="off"
+      [ngClass]="{'is-invalid': (form.controls.password.errors && form.controls.password.dirty) , 'is-valid': !form.controls.password.errors}">
     </div>
 
     <div class="form-group">
       <label for="confirmpassword">Confirm Password</label>
-      <input type="password" name="confirm" formControlName="confirm" class="form-control" placeholder="Confrim password" autocomplete="off">
+      <input type="password" 
+      name="confirm" 
+      formControlName="confirm" 
+      class="form-control" 
+      placeholder="Confrim password" 
+      autocomplete="off"
+      [ngClass]="{'is-invalid':  (form.controls.confirm.errors && form.controls.confirm.dirty) || (form.errors?.matchingPasswords && form.controls.confirm.dirty) , 'is-valid': !form.controls.confirm.errors && !form.errors?.matchingPasswords}">
+      <div *ngIf="form.errors?.matchingPasswords && form.controls.confirm.dirty"
+      class="invalid-feedback">Password do not match</div>
+      
     </div>
 
-    <input type="submit" class="btn btn-primary" value="Sign up">
+    <input 
+    [disabled]="!form.valid"
+    type="submit" class="btn btn-primary" value="Sign up">
   </form>
 </div>

codecamp-front/src/app/components/register/register.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ValidateService } from '../../services/validate.service';
 import { AuthService } from '../../services/auth.service';
 import { Router } from '@angular/router';
 
@@ -12,9 +11,10 @@ import { Router } from '@angular/router';
 export class RegisterComponent implements OnInit {
 
   form: FormGroup;
-  
+  message;
+  messageClass;
+
   constructor(
-    private validateService: ValidateService,
     private authService: AuthService,
     private router: Router,
     private formBuilder: FormBuilder
@@ -27,21 +27,24 @@ export class RegisterComponent implements OnInit {
 
   createForm() {
     this.form = this.formBuilder.group({
-      name: '',
-      email: ['', Validators.compose([
+      name: ['', Validators.required],
+      email_id: ['', Validators.compose([
         Validators.required, // Field is required
         Validators.minLength(5), // Minimum length is 5 characters
         Validators.maxLength(30), // Maximum length is 30 characters
         this.validateEmail // Custom validation
       ])],
-      password: ['', Validators.required],
+      password: ['', Validators.compose([
+        Validators.required,
+        Validators.minLength(8)
+      ])],
       username: ['', Validators.required],
       confirm: ['', Validators.required],
       college: ['', Validators.required],
       gender: '',
       dob: ['', Validators.required],
       city: ['', Validators.required]
-    });
+    }, { validator: this.matchingPasswords('password', 'confirm')});
   }
 
   validateEmail(controls) {
@@ -51,13 +54,34 @@ export class RegisterComponent implements OnInit {
     if (regExp.test(controls.value)) {
       return null; // Return as valid email
     } else {
-      return { 'validateEmail': true } // Return as invalid email
+      return { 'validateEmail': true }; // Return as invalid email
     }
   }
 
-  
+  matchingPasswords(password, confirm) {
+    return (group: FormGroup) => {
+      // Check if both fields are the same
+      if (group.controls[password].value === group.controls[confirm].value) {
+        return null; // Return as a match
+      } else {
+        return { 'matchingPasswords': true }; // Return as error: do not match
+      }
+    };
+  }
   onSignupSubmit() {
-
+    const user = {
+      username: this.form.get('username').value,
+      email_id: this.form.get('email_id').value,
+      name: this.form.get('name').value,
+      college: this.form.get('college').value,
+      password: this.form.get('password').value,
+      dob: this.form.get('dob').value,
+      city: this.form.get('city').value,
+      gender: this.form.get('gender').value
+    };
+    this.authService.registerUser(user).subscribe(data => {
+      console.log(data);
+    });
+    this.router.navigate(['/login']);
   }
-
 }