Added Rohini's UIs

src/app/moderator-portal/moderator-portal.component.html

+<!-- <mat-radio-group
+  aria-labelledby="example-radio-group-label"
+  class="example-radio-group"
+  [(ngModel)]="favoriteSeason">
+  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
+    {{season}}
+  </mat-radio-button>
+</mat-radio-group> -->
+<div class="portal">
+    <div class="heading">Moderator portal</div>
+    <mat-tab-group class="event">
+        <mat-tab label="User requests">
+            <div class="content">
+                <div class="example-container">
+                    <div class="sub-heading">Requests</div>
+                    <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="userReq"
+                        [cdkDropListConnectedTo]="[doneList]" class="example-list" (cdkDropListDropped)="drop($event)">
+                        <div class="example-box" *ngFor="let item of userReq" cdkDrag>
+                                     <div class="black"> {{item.name}} ({{item.regNo}})</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="example-container">
+                    <div class="sub-heading">Approved</div>
+                    <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="userApprove"
+                        [cdkDropListConnectedTo]="[todoList]" class="example-list" (cdkDropListDropped)="drop($event)">
+                        <div class="example-box" *ngFor="let item of userApprove" cdkDrag> 
+                           <div class="black"> {{item.name}} ({{item.regNo}})</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </mat-tab>
+        <mat-tab label="Event requests">
+                <div class="content">
+                        <div class="example-container">
+                            <div class="sub-heading">Requests</div>
+                            <div cdkDropList #todoListEvent="cdkDropList" [cdkDropListData]="eventReq"
+                                [cdkDropListConnectedTo]="[doneListEvent]" class="example-list" (cdkDropListDropped)="drop($event)">
+                                <div class="example-box" *ngFor="let item of eventReq" cdkDrag>
+                                              <div class="black">{{item.eventName}}</div> 
+                                </div>
+                            </div>
+                        </div>
+        
+                        <div class="example-container">
+                            <div class="sub-heading">Approved</div>
+                            <div cdkDropList #doneListEvent="cdkDropList" [cdkDropListData]="eventApprove"
+                                [cdkDropListConnectedTo]="[todoListEvent]" class="example-list" (cdkDropListDropped)="drop($event)">
+                                <div class="example-box" *ngFor="let item of eventApprove" cdkDrag> 
+                                    <div class="black">{{item.eventName}} </div></div>
+                            </div>
+                        </div>
+                    </div>
+        </mat-tab>
+    </mat-tab-group>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- 
+    <div class="content">
+        <div class="example-container">
+            <h2>To do</h2>
+
+            <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
+                class="example-list" (cdkDropListDropped)="drop($event)">
+                <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+            </div>
+        </div>
+
+        <div class="example-container">
+            <h2>Done</h2>
+
+            <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
+                class="example-list" (cdkDropListDropped)="drop($event)">
+                <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
+            </div>
+        </div>
+    </div> -->
+    <div class="center">
+            <button mat-raised-button color="primary" (click)="approve()">Approve</button>
+    </div>
+</div>
+

src/app/moderator-portal/moderator-portal.component.scss

+.example-container {
+  width: 400px;
+  max-width: 100%;
+  margin: 0 25px 25px 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.example-list {
+  border: solid 1px #ccc;
+  min-height: 60px;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+  display: block;
+}
+
+.example-box {
+  border-bottom: solid 1px #ccc;
+  color: rgba(255, 255, 255, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 16px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.portal {
+  background-image: url("../../assets/images/moderatorBG.jpg");
+
+  background-size: cover;
+  background-position: center;
+  height: 60rem;
+}
+.content {
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.heading {
+  padding: 1rem;
+  font-family: "Pacifico", cursive;
+  font-size: 2.5rem;
+  color: rgb(255, 255, 255);
+  -webkit-text-stroke-width: 1px;
+  letter-spacing: 1px;
+  -webkit-text-stroke-color: black;
+}
+
+.sub-heading {
+  font-size: 1.5rem;
+  color: white;
+}
+
+.center {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.event {
+  height: 30rem;
+}
+.black {
+  padding: 20px 10px;
+  background-color: black;
+  width: 100%;
+  height: 100%;
+  font-weight: 300;
+  text-align: center;
+}

src/app/moderator-portal/moderator-portal.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModeratorPortalComponent } from './moderator-portal.component';
+
+describe('ModeratorPortalComponent', () => {
+  let component: ModeratorPortalComponent;
+  let fixture: ComponentFixture<ModeratorPortalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModeratorPortalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModeratorPortalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/moderator-portal/moderator-portal.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { userInfo } from '../contracts/userInfo';
+import { ModeratorService } from '../services/moderator.service';
+import { eventDetails } from '../contracts/eventDetails';
+
+@Component({
+  selector: 'app-moderator-portal',
+  templateUrl: './moderator-portal.component.html',
+  styleUrls: ['./moderator-portal.component.scss']
+})
+export class ModeratorPortalComponent implements OnInit {
+
+  constructor(private moderator:ModeratorService) { }
+
+  ngOnInit() {
+    this.userReq=this.moderator.getUserRequests();
+    this.eventReq=this.moderator.getEventRequests();
+  }
+  userReq:userInfo[]=[];
+
+  userApprove:userInfo[]=[];
+
+  eventReq:eventDetails[]=[];
+  eventApprove:eventDetails[]=[];
+
+  drop(event: CdkDragDrop<string[]>) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(event.previousContainer.data,
+                        event.container.data,
+                        event.previousIndex,
+                        event.currentIndex);
+    }
+  }
+  approve(){
+    this.userApprove=[];
+    this.eventApprove=[];
+  }
+
+}

src/app/register/register.component.html

@@ -6,32 +6,50 @@
         </div>
         <div class="inputs">
             <form class="example-form">
-                <mat-form-field class="example-full-width">
-                    <input matInput>
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput required>
                     <mat-placeholder class="placeholder">Name</mat-placeholder>
                 </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <input matInput>
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput required>
                     <mat-placeholder class="placeholder">Reg. No.</mat-placeholder>
                 </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <input matInput type="password">
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput required type="password">
                     <mat-placeholder class="placeholder">Password</mat-placeholder>
                 </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <input matInput type="password">
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput required type="password">
                     <mat-placeholder class="placeholder">Confirm Password</mat-placeholder>
                 </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <input matInput>
+                <!-- <mat-form-field>
+                    <input type="password" matInput formControlName='password'>
+                    <mat-placeholder class="placeholder">Password</mat-placeholder>
+                </mat-form-field>
+                <mat-form-field>
+                    <input type="password" matInput formControlName='verifyPassword' [errorStateMatcher]="errorMatcher">
+                    <mat-placeholder class="placeholder">Verify Password</mat-placeholder>
+
+                    <mat-error *ngIf="userForm.hasError('passwordsDoNotMatch')">
+                        Passwords do not match!
+                    </mat-error>
+                </mat-form-field> -->
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput required>
                     <mat-placeholder class="placeholder">Program</mat-placeholder>
                 </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <input matInput type="email">
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher" required>
                     <mat-placeholder class="placeholder">Email</mat-placeholder>
+                    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+                        Please enter a valid email address
+                    </mat-error>
+                    <mat-error *ngIf="emailFormControl.hasError('required')">
+                        Email is <strong>required</strong>
+                    </mat-error>
                 </mat-form-field>
-                <mat-form-field class="example-full-width">
-                    <input matInput type="number">
+                <mat-form-field class="example-full-width" hideRequiredMarker>
+                    <input matInput type="number" required>
                     <mat-placeholder class="placeholder">Phone no.</mat-placeholder>
                 </mat-form-field>
             </form>
@@ -41,5 +59,3 @@
         </div>
     </div>
 </div>
\ No newline at end of file
-
-     
\ No newline at end of file

src/app/register/register.component.ts

 import { Component, OnInit } from '@angular/core';
 import { userInfo } from '../contracts/userInfo';
+import { FormControl, FormGroupDirective, NgForm, Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material';
+
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
+class CrossFieldErrorMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return control.dirty && form.invalid;
+  }
+}
+
 
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.scss']
 })
+
+
 export class RegisterComponent implements OnInit {
+  ngOnInit() {
+   
+  }
   harsha:userInfo;
+  password="";
   value="";
-  constructor() { }
+  userForm: FormGroup;
+  errorMatcher = new CrossFieldErrorMatcher();
 
-  ngOnInit(){
+  constructor(private fb: FormBuilder) {
+    this.initForm();
+  }
+
+  initForm() {
+    this.userForm = this.fb.group({
+      password: '',
+      verifyPassword: ''
+    }, {
+      validator: this.passwordValidator
+    })
+  }
+
+  passwordValidator(form: FormGroup) {
+    const condition = form.get('password').value !== form.get('verifyPassword').value;
+
+    return condition ? { passwordsDoNotMatch: true} : null;
   }
   
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.email,
+  ]);
+
+
+  matcher = new MyErrorStateMatcher();
+
 }

src/app/services/event-service.service.ts

@@ -11,56 +11,70 @@ export class EventServiceService {
         eventName:"Event 1",
         totalSeats:50,
         remainingSeats:30,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:true
       },
       {
         eventId:2,
         eventName:"Event 2",
         totalSeats:70,
         remainingSeats:10,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:false
+
       },
       {
         eventId:3,
         eventName:"Event 3",
         totalSeats:100,
         remainingSeats:70,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:true
+
       },
       {
         eventId:4,
         eventName:"Event 4",
         totalSeats:75,
         remainingSeats:10,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:true
+
       },
       {
         eventId:5,
         eventName:"Event 5",
         totalSeats:50,
         remainingSeats:45,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:false
       },
       {
         eventId:6,
         eventName:"Event 6",
         totalSeats:50,
         remainingSeats:5,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:true
+
       },
       {
         eventId:7,
         eventName:"Event 7",
         totalSeats:50,
         remainingSeats:40,
-        isRegistrationAllowed:true
+        isRegistrationAllowed:true,
+        isWorkshop:true
+
       },
       {
         eventId:8,
         eventName:"Event 8",
         totalSeats:500,
         remainingSeats:300,
-        isRegistrationAllowed:false
+        isRegistrationAllowed:false,
+        isWorkshop:false
+
       }
     ]
   constructor() { }
@@ -68,4 +82,8 @@ export class EventServiceService {
   public getEvents():eventDetails[]{
     return this.testData;
   }
+
+  public getPastEvents():eventDetails[]{
+    return this.testData;
+  }
 }

src/app/services/moderator.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ModeratorService } from './moderator.service';
+
+describe('ModeratorService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ModeratorService = TestBed.get(ModeratorService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/moderator.service.ts

+import { Injectable } from '@angular/core';
+import { userInfo } from '../contracts/userInfo';
+import { eventDetails } from '../contracts/eventDetails';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModeratorService {
+  pendingUsers:userInfo[]=[];
+  pendingEvents:eventDetails[]=[];
+  constructor() { 
+    this.pendingEvents.push(
+      {isRegistrationAllowed:true,eventName:"Dummy workshop 1",eventId:123,totalSeats:50,isWorkshop:true},
+      {isRegistrationAllowed:true,eventName:"Dummy workshop 2",eventId:123,totalSeats:60,isWorkshop:true},
+      {isRegistrationAllowed:true,eventName:"Dummy workshop 3",eventId:123,totalSeats:70,isWorkshop:true}
+    )
+    this.pendingUsers.push(
+      {email:"dummy@dummy.com",hashedPassword:"*",mobileNo:1234567890,name:"Dummy name 1",program:"B.Tech.",regNo:"CB.EN.U4CSE16207",type:"user",yearOfAdmission:123},
+      {email:"dummy@dummy.com",hashedPassword:"*",mobileNo:1234567890,name:"Dummy name 2",program:"B.Tech.",regNo:"CB.EN.U4CSE16208",type:"user",yearOfAdmission:456},
+      {email:"dummy@dummy.com",hashedPassword:"*",mobileNo:1234567890,name:"Dummy name 3",program:"B.Tech.",regNo:"CB.EN.U4CSE16209",type:"user",yearOfAdmission:789},
+ 
+    )
+  }
+  public addUserRequest(user:userInfo){
+    this.pendingUsers.push(user);
+  }
+  public addEventRequest(event:eventDetails){
+    this.pendingEvents.push(event);
+  }
+
+  public getUserRequests():userInfo[]{
+    return [...this.pendingUsers];
+  }
+
+  public getEventRequests():eventDetails[]{
+    return [...this.pendingEvents];
+  }
+
+  
+
+
+}