Stop participation in the challenge

src/app/app.module.ts

@@ -79,7 +79,7 @@ import {
   ChallengeviewallsubmissionsComponent
 } from './components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component';
 import { SideBarComponent } from './components/utility/side-bar/side-bar.component';
-
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { DashboardContentComponent } from './components/dashboard/dashboard-content/dashboard-content.component';
 import {PasswordMismatchValidatorDirective} from './Directives/password.validator';
 import { ResetPasswordComponent } from './components/auth/reset-password/reset-password.component';
@@ -157,6 +157,8 @@ import { ResetPasswordConfirmComponent } from './components/auth/reset-password-
     TextareaAutosizeModule,
     OwlDateTimeModule,
     OwlNativeDateTimeModule,
+    MatCheckboxModule,
+    MatIconModule,
     MatSelectModule,
     MatChipsModule,
     MatMenuModule,

src/app/components/challenge/challenge.component.html

@@ -64,6 +64,8 @@
                                         </a>
                                     </span>
                                 </span>
+                                <br>
+                                <mat-checkbox color="primary" *ngIf="isChallengeHost" [checked]="!challenge['is_registration_open']" (click)="stopParticipation()" >Stop Participation</mat-checkbox>
                             </p>
                         </div>
                     </div>

src/app/components/challenge/challenge.component.ts

@@ -286,4 +286,22 @@ export class ChallengeComponent implements OnInit {
     };
     SELF.globalService.showModal(PARAMS);
   }
+  stopParticipation() {
+    if (this.isChallengeHost && this.challenge['id'] !== null) {
+      const BODY = JSON.stringify({
+        'is_registration_open': !this.challenge['is_registration_open']
+      });
+      this.apiService.patchUrl(
+        this.endpointsService.editChallengeDetailsURL(this.challenge.creator.id, this.challenge.id),
+        BODY
+      ).subscribe(
+        data => {
+          this.challenge['is_registration_open'] = !this.challenge['is_registration_open'];
+        },
+        err => {},
+        () => {}
+        );
+    }
+  }
+
 }

src/styles/base.scss

@@ -5,6 +5,7 @@
 @import './grid.scss';
 @import './font.scss';
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
+@import './theming.scss';
 
 body {
   font-family: 'Roboto', sans-serif;

src/styles/theming.scss

@@ -0,0 +1,24 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$app-primary: mat-palette($mat-gray, 900);
+$app-accent:  mat-palette($mat-blue-gray, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$app-warn:    mat-palette($mat-yellow, A400);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$candy-app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($candy-app-theme);