Merged

frontend/sitcomm/src/app/app.module.ts

@@ -30,6 +30,7 @@ import { MatExpansionModule} from '@angular/material/expansion';
 //import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CreateTicketDialog } from './jira/jira.component';
+import { LogoutDialog } from './home/home.component';
 
 
 @NgModule({
@@ -43,7 +44,8 @@ import { CreateTicketDialog } from './jira/jira.component';
     JiraComponent,
     ConfluenceComponent,
     ProjectComponent,
-    CreateTicketDialog
+    CreateTicketDialog,
+    LogoutDialog
   ],
   imports: [
     BrowserModule,

frontend/sitcomm/src/app/github/github.component.css

@@ -5,3 +5,7 @@
     width: 100%;
     height: auto;
 }
+
+.flex-container{
+  padding: 2%;
+}
\ No newline at end of file

frontend/sitcomm/src/app/github/github.component.html

@@ -8,7 +8,10 @@
 </mat-list>
 -->
 <mat-accordion>
-    <div mat-subheader>Files</div>
+    <div class="flex-container">
+        <h1>
+            Files
+        </h1>
         <mat-list-item *ngFor="let file of files">
             <mat-expansion-panel hideToggle>
                 <mat-expansion-panel-header>
@@ -18,11 +21,12 @@
                 </mat-expansion-panel-header>
                 <div>
                 <mat-form-field class="form-field-css">
-                <textarea matInput class="file-text" type="text" readonly="True" [rows]="file.content.split('\n').length" [(ngModel)]="file.content"></textarea>
+                    <textarea matInput id="file-text" type="text" readonly="True" [rows]="file.content.split('\n').length" [(ngModel)]="file.content"></textarea>
                 </mat-form-field>
                 <button mat-raised-button color="primary" style="margin-right: 10px;" (click)="allowEditFile()">Edit</button>
                 <button mat-raised-button color="primary" (click)="submitFile(file.id,file.content)">Save</button>
                 </div>
             </mat-expansion-panel>
         </mat-list-item>
+    </div>
 </mat-accordion>

frontend/sitcomm/src/app/home/home.component.css

@@ -26,3 +26,11 @@
   height: 85%;
   background-color: snow;
 }
+
+#home-css{
+  width: 80px;
+  height: 40px;
+  font-size:x-large;
+  justify-content: center;
+  vertical-align:middle;
+}
\ No newline at end of file

frontend/sitcomm/src/app/home/home.component.html

-
 <mat-drawer-container class="example-container" autosize>
+  <!--
   <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
     <div class="flex-item nav-btns">
       <h1 style="justify-content: center;">Go To</h1>
@@ -25,21 +25,24 @@
     </button>
     </div>
   </mat-drawer>
+  -->
   <p>
     <mat-toolbar id='nav' color="primary" class="flex-container">
+      
       <div class="flex-item">
-        <button mat-icon-button class="example-icon" (click)="drawer.toggle()" aria-label="">
-          <mat-icon>menu</mat-icon>
+        <button mat-icon-button class="example-icon" aria-label="" [routerLink]="['/home']">
+          <mat-icon>home</mat-icon>
         </button>
         <span>Home</span>
         <span class="example-spacer"></span>      
       </div>
+
       <div class="flex-item">
         <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
           <mat-icon>person_pin</mat-icon>
         </button>
-        <button mat-icon-button class="" aria-label="">
-          <mat-icon>settings</mat-icon>
+        <button mat-icon-button class="" aria-label="" (click)="openLogoutDialog()">
+          <mat-icon>logout</mat-icon>
         </button>
       </div>
     </mat-toolbar>

frontend/sitcomm/src/app/home/home.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, inject, OnInit } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 //import { PROJECTS } from './projects';
 import { GET_REPOS_API } from '../urls';
@@ -6,6 +6,10 @@ import { getProjectDetailsResponse } from '../responses';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
+import { PROJECTS } from './projects';
+import { MatDialog, MatDialogRef} from '@angular/material/dialog';
+import { ResourceLoader } from '@angular/compiler';
+
 export interface Tile {
   color: string;
   cols: number;
@@ -21,7 +25,7 @@ export interface Tile {
 export class HomeComponent implements OnInit {
   project_stat$ = new Observable<getProjectDetailsResponse>;
   projects = new Array<{pid:string;pname:string;created_date:string;powner:string;confluence_id:string;git_id:string;jira_id:string;content:string;description:string}>();
-  constructor(private cookieService: CookieService, private router: Router, private http: HttpClient ) { }
+  constructor(public dialog:MatDialog, private cookieService: CookieService, private router: Router, private http: HttpClient ) { }
   setCookie(kname: string,value: string){
     this.cookieService.set(kname,value);
   }
@@ -41,6 +45,13 @@ export class HomeComponent implements OnInit {
       return 1;
     }
   }
+
+  openLogoutDialog(){
+    const dialogRef = this.dialog.open(LogoutDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('Logout Result:', result)
+    })
+  }
   ngOnInit(): void {
     console.log(this.getCookie('uid'));
     this.project_stat$ = this.http.get<getProjectDetailsResponse>(GET_REPOS_API+'?uid='+ this.getCookie('uid'));
@@ -63,3 +74,27 @@ export class HomeComponent implements OnInit {
     {text: 'One', cols: 1, rows: 1, color: 'white'},
   ];
 }
+
+@Component({
+  selector: 'logout-dialog',
+  templateUrl: '/logout-dialog.html',
+  styleUrls: ['./home.component.css']
+})
+export class LogoutDialog{
+  constructor(
+    public dialogRef: MatDialogRef<LogoutDialog>,
+    private cookieService: CookieService,
+    private router: Router
+  ){
+
+  }
+
+  onCancelClick(){
+    this.dialogRef.close();
+  }
+  onLogoutClick(){
+    this.cookieService.deleteAll();
+    this.router.navigate(['/login']);
+    this.dialogRef.close();
+  }
+}
\ No newline at end of file

frontend/sitcomm/src/app/home/logout-dialog.html

+<div class="dialog-box-css">
+    <h1 mat-dialog-title>Do you wish to logout?</h1>
+    <div mat-dialog-actions>
+      <button mat-raised-button (click)="onCancelClick()" cdkFocusInitial>Cancel</button>
+      <button mat-raised-button (click)="onLogoutClick()" color="primary">Yes</button>
+    </div>
+</div>
\ No newline at end of file

frontend/sitcomm/src/app/jira/create-ticket-dialog.html

-<!--
-<h1 mat-dialog-title>Delete file</h1>
-<div mat-dialog-content>
-  Would you like to delete cat.jpeg?
-</div>
-<div mat-dialog-actions>
-  <button mat-button mat-dialog-close>No</button>
-  <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
-</div>
--->
-<div class="dialog-box-css">
-  <h1 mat-dialog-title>Create ticket on {{data.pname}}</h1>
+<div id="dialog-box-css" class="flex-container column">
+  <h1 mat-dialog-title>Create ticket for {{data.pname}}</h1>
   <div mat-dialog-content>
     <p>Enter ticket details</p>
-    <mat-form-field appearance="fill">
+    <mat-form-field class="form-field-css">
       <mat-label>Ticket Name</mat-label>
       <input matInput [(ngModel)]="data.tname">
     </mat-form-field>
 
-    <mat-form-field appearance="fill">
+    <mat-form-field class="form-field-css">
       <mat-label>Ticket Content</mat-label>
-      <input matInput [(ngModel)]="data.tcontent">
+      <textarea matInput id="tcontent-text" type="text" wrap="on" [rows]="data.tcontent.split('\n').length+data.tcontent.length/50" [(ngModel)]="data.tcontent">
+      </textarea>
     </mat-form-field>
 
   </div>
   <div mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">Cancel</button>
-    <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
+    <button mat-raised-button (click)="onNoClick()">Cancel</button>
+    <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>Create</button>
   </div>
 </div>
\ No newline at end of file

frontend/sitcomm/src/app/jira/jira.component.css

 .mat-colname-css{
     width: 80%;
     height: 95%;
-    background-color: ghostwhite;
+    background-color: #f0f8ff;
 }
 .mat-issuename-css{
     width: 90%;
@@ -27,7 +27,18 @@
     bottom: 20px;
 }
 
-.dialog-box-css {
-    width: 450px;
-    height: 300px;
+#dialog-box-css {
+    width: 300px;
+    margin: 0 auto;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+#tcontent-text{
+    overflow: hidden;
+}
+
+.mat-form-field{
+    width: 100% !important;
 }
\ No newline at end of file

frontend/sitcomm/src/app/jira/jira.component.html

@@ -16,13 +16,12 @@
                             <mat-card-title>
                                 <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
                                 <mat-menu #menu="matMenu">
-                                  <button mat-menu-item (click)="moveToInProgress(tile.tid)">Move to in progress</button>
-                                  <button mat-menu-item (click)="moveToDone(tile.tid)">Mark as done</button>
+                                  <button mat-menu-item (click)="moveToInProgress(tile.tid, 'to_do')">Move to in progress</button>
+                                  <button mat-menu-item (click)="moveToDone(tile.tid, 'to_do')">Mark as done</button>
                                 </mat-menu>                                                                            
                             </mat-card-title>
                             <mat-card-content>
-                                <p>{{tile.tid}}
-                                <br>{{tile.content}}</p>
+                                <p>{{tile.content}}</p>
                             </mat-card-content>
                         </mat-card>
                     </mat-grid-tile>
@@ -46,13 +45,12 @@
                             <mat-card-title>
                                 <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
                                 <mat-menu #menu="matMenu">
-                                  <button mat-menu-item (click)="moveToToDo(tile.tid)">Move to To Do</button>
-                                  <button mat-menu-item (click)="moveToDone(tile.tid)">Mark as done</button>
+                                  <button mat-menu-item (click)="moveToToDo(tile.tid, 'in_prog')">Move to To Do</button>
+                                  <button mat-menu-item (click)="moveToDone(tile.tid, 'in_prog')">Mark as done</button>
                                 </mat-menu>                                                                            
                             </mat-card-title>
                             <mat-card-content>
-                                <p>{{tile.tid}}
-                                <br>{{tile.content}}</p>
+                                <p>{{tile.content}}</p>
                             </mat-card-content>
                         </mat-card>
                     </mat-grid-tile>
@@ -76,13 +74,12 @@
                             <mat-card-title>
                                 <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
                                 <mat-menu #menu="matMenu">
-                                  <button mat-menu-item (click)="moveToToDo(tile.tid)">Move to To Do</button>
-                                  <button mat-menu-item (click)="moveToInProgress(tile.tid)">Move to In Progress</button>
+                                  <button mat-menu-item (click)="moveToToDo(tile.tid, 'done')">Move to To Do</button>
+                                  <button mat-menu-item (click)="moveToInProgress(tile.tid, 'done')">Move to In Progress</button>
                                 </mat-menu>                                                                            
                             </mat-card-title>
                             <mat-card-content>
-                                <p>{{tile.tid}}
-                                <br>{{tile.content}}</p>
+                                <p>{{tile.content}}</p>
                             </mat-card-content>
                         </mat-card>
                     </mat-grid-tile>
@@ -106,14 +103,13 @@
                             <mat-card-title>
                                 <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css">{{tile.name}}</button>
                                 <mat-menu #menu="matMenu">
-                                  <button mat-menu-item (click)="moveToToDo(tile.tid)">Move to To Do</button>
-                                  <button mat-menu-item (click)="moveToInProgress(tile.tid)">Move to In Progress</button>
-                                  <button mat-menu-item (click)="moveToDone(tile.tid)">Mark as Done</button>
+                                  <button mat-menu-item (click)="moveToToDo(tile.tid, 'backlog')">Move to To Do</button>
+                                  <button mat-menu-item (click)="moveToInProgress(tile.tid, 'backlog')">Move to In Progress</button>
+                                  <button mat-menu-item (click)="moveToDone(tile.tid, 'backlog')">Mark as Done</button>
                                 </mat-menu>                                                                            
                             </mat-card-title>
                             <mat-card-content>
-                                <p>{{tile.tid}}
-                                <br>{{tile.content}}</p>
+                                <p>{{tile.content}}</p>
                             </mat-card-content>
                         </mat-card>
                     </mat-grid-tile>

frontend/sitcomm/src/app/jira/jira.component.ts

@@ -11,6 +11,12 @@ export interface TicketData {
   tcontent: string;
 }
 
+export interface ListData{
+  tid: string;
+  name : string;
+  content: string;
+}
+
 @Component({
   selector: 'app-jira',
   templateUrl: './jira.component.html',
@@ -46,6 +52,8 @@ export class JiraComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe(result => {
       console.log('Dialog result:', result.tname, result.tcontent);
+      this.to_do.push({tid: '10', name: result.tname, content: result.tcontent});
+
     });
   }
 
@@ -72,17 +80,102 @@ export class JiraComponent implements OnInit {
     } 
 
   }
-  moveToInProgress(tid: number){
+  moveToInProgress(tid: string, list_name: string ){
+    if (list_name == 'to_do') {
+      for (let i = 0; i< this.to_do.length; i++){
+        if( this.to_do[i].tid == tid){
+          this.in_prog.push(this.to_do[i]);
+          this.to_do.splice(i,1);
+          console.log(this.to_do);
+          break;
+        }
+      }
+    } else if (list_name == 'done') {
+      for (let i = 0; i< this.done.length; i++){
+        if( this.done[i].tid == tid){
+          this.in_prog.push(this.done[i]);
+          this.done.splice(i,1);
+          console.log(this.done);
+          break;
+        }
+      }
+    } else if (list_name == 'backlog') {
+      for (let i = 0; i< this.backlog.length; i++){
+        if( this.backlog[i].tid == tid){
+          this.in_prog.push(this.backlog[i]);
+          this.backlog.splice(i,1);
+          console.log(this.backlog);
+          break;
+        }
+      }
+    }
+
+    console.log(list_name);
     console.log(tid);
     console.log('Move to In Progress');
   }
   
-  moveToDone(tid: number){
-    console.log(tid);
-    console.log('Move to Done');
+  moveToDone(tid: string, list_name: string ){
+    if (list_name == 'to_do') {
+      for (let i = 0; i< this.to_do.length; i++){
+        if( this.to_do[i].tid == tid){
+          this.done.push(this.to_do[i]);
+          this.to_do.splice(i,1);
+          console.log(this.to_do);
+          break;
+        }
+      }
+    } else if (list_name == 'in_prog') {
+      for (let i = 0; i< this.in_prog.length; i++){
+        if( this.in_prog[i].tid == tid){
+          this.done.push(this.in_prog[i]);
+          this.in_prog.splice(i,1);
+          console.log(this.in_prog);
+          break;
+        }
+      }
+    } else if (list_name == 'backlog') {
+      for (let i = 0; i< this.backlog.length; i++){
+        if( this.backlog[i].tid == tid){
+          this.done.push(this.backlog[i]);
+          this.backlog.splice(i,1);
+          console.log(this.backlog);
+          break;
+        }
+      }
+    }
   }
 
-  moveToToDo(tid: number){
+  moveToToDo(tid: string, list_name: string ){
+    if (list_name == 'in_prog') {
+      for (let i = 0; i< this.in_prog.length; i++){
+        if( this.in_prog[i].tid == tid){
+          this.to_do.push(this.in_prog[i]);
+          this.in_prog.splice(i,1);
+          console.log(this.in_prog);
+          break;
+        }
+      }
+    } else if (list_name == 'done') {
+      for (let i = 0; i< this.done.length; i++){
+        if( this.done[i].tid == tid){
+          this.to_do.push(this.done[i]);
+          this.done.splice(i,1);
+          console.log(this.done);
+          break;
+        }
+      }
+    } else if (list_name == 'backlog') {
+      for (let i = 0; i< this.backlog.length; i++){
+        if( this.backlog[i].tid == tid){
+          this.to_do.push(this.backlog[i]);
+          this.backlog.splice(i,1);
+          console.log(this.backlog);
+          break;
+        }
+      }
+    }
+    console.log(list_name);
     console.log(tid);
     console.log('Move to ToDo');
   }
@@ -121,27 +214,27 @@ export const GRID_NAME = [
   {name: 'BACKLOG', content: 'BLAH BLAH BLAH'},
 ]
 
-export const TO_DO = [
-  {tid: 1, name: 'A', content: 'BLAH BLAH BLAH'},
-  {tid: 2, name: 'B', content: 'BLAH BLAH BLAH'},
-  {tid: 3, name: 'C', content: 'BLAH BLAH BLAH'},
-  {tid: 4, name: 'D', content: 'BLAH BLAH BLAH'},
+export var TO_DO = [
+  {tid: '1', name: 'A', content: 'BLAH BLAH BLAH'},
+  {tid: '2', name: 'B', content: 'BLAH BLAH BLAH'},
+  {tid: '3', name: 'C', content: 'BLAH BLAH BLAH'},
+  {tid: '4', name: 'D', content: 'BLAH BLAH BLAH'},
 ]
-export const IN_PROGRESS = [
-  {tid: 5, name: 'E', content: 'BLAH BLAH BLAH'},
-  {tid: 6, name: 'F', content: 'BLAH BLAH BLAH'},
-  {tid: 7, name: 'G', content: 'BLAH BLAH BLAH'},
-  {tid: 8, name: 'H', content: 'BLAH BLAH BLAH'},
-  {tid: 9, name: 'I', content: 'BLAH BLAH BLAH'},
-  {tid: 10, name: 'J', content: 'BLAH BLAH BLAH'},
+export var IN_PROGRESS = [
+  {tid: '5', name: 'E', content: 'BLAH BLAH BLAH'},
+  {tid: '6', name: 'F', content: 'BLAH BLAH BLAH'},
+  {tid: '7', name: 'G', content: 'BLAH BLAH BLAH'},
+  {tid: '8', name: 'H', content: 'BLAH BLAH BLAH'},
+  {tid: '9', name: 'I', content: 'BLAH BLAH BLAH'},
+  {tid: '10', name: 'J', content: 'BLAH BLAH BLAH'},
 ]
-export const DONE = [
-  {tid: 11, name: 'K', content: 'BLAH BLAH BLAH'},
-  {tid: 12, name: 'L', content: 'BLAH BLAH BLAH'},
-  {tid: 13, name: 'M', content: 'BLAH BLAH BLAH'},
+export var DONE = [
+  {tid: '11', name: 'K', content: 'BLAH BLAH BLAH'},
+  {tid: '12', name: 'L', content: 'BLAH BLAH BLAH'},
+  {tid: '13', name: 'M', content: 'BLAH BLAH BLAH'},
 ]
-export const BACKLOG = [
-  {tid: 14, name: 'N', content: 'BLAH BLAH BLAH'},
-  {tid: 15, name: 'O', content: 'BLAH BLAH BLAH'},
-  {tid: 16, name: 'P', content: 'BLAH BLAH BLAH'},
+export var BACKLOG = [
+  {tid: '14', name: 'N', content: 'BLAH BLAH BLAH'},
+  {tid: '15', name: 'O', content: 'BLAH BLAH BLAH'},
+  {tid: '16', name: 'P', content: 'BLAH BLAH BLAH'},
 ]
\ No newline at end of file

frontend/sitcomm/src/app/login/login.component.ts

@@ -37,6 +37,7 @@ export class LoginComponent implements OnInit {
         console.log(response);
         if (response.status == true) {
           this.cookieService.set('email', response.email);
+          this.cookieService.set('uid',response.uid);
           //window.location.href = '/home';
           this.router.navigate(['/home']);
         } 

frontend/sitcomm/src/app/profile/profile.component.html

 <mat-drawer-container class="example-container" autosize>
+  <!--
   <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
     <div class="flex-item nav-btns">
       <h1 style="justify-content: center;">Go To</h1>
@@ -24,21 +25,22 @@
     </button>
     </div>
   </mat-drawer>
+  -->
   <p>
     <mat-toolbar id='nav' color="primary" class="flex-container">
       <div class="flex-item">
-        <button mat-icon-button class="example-icon" (click)="drawer.toggle()" aria-label="">
-          <mat-icon>menu</mat-icon>
+        <button mat-icon-button class="example-icon" [routerLink]="['/home']" aria-label="">
+          <mat-icon>keyboard_backspace</mat-icon>
         </button>
         <span>Profile</span>
         <span class="example-spacer"></span>
       </div>
       <div class="flex-item">
-        <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
-          <mat-icon>person_pin</mat-icon>
+        <button mat-icon-button class="" aria-label="" [routerLink]="['/project']">
+          <mat-icon>work</mat-icon>
         </button>
-        <button mat-icon-button class="" aria-label="">
-          <mat-icon>settings</mat-icon>
+        <button mat-icon-button class="" aria-label="" (click)="openLogoutDialog()">
+          <mat-icon>logout</mat-icon>
         </button>
       </div>
     </mat-toolbar>

frontend/sitcomm/src/app/profile/profile.component.ts

@@ -7,6 +7,8 @@ import { getUserDetailsResponse, postUserDetailsResponse } from '../responses';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
+import { MatDialog, MatDialogRef} from '@angular/material/dialog';
+import { LogoutDialog } from '../home/home.component';
 
 @Component({
   selector: 'app-profile',
@@ -33,7 +35,7 @@ export class ProfileComponent implements OnInit {
   //edit_first_name = new FormControl('', [Validators.required]);
   //edit_last_name = new FormControl('', [Validators.required]);
   //edit_bio = new FormControl('', [Validators.required]);
-  constructor(private cookieService: CookieService,private _formBuilder: FormBuilder, private http:HttpClient, private router: Router) { 
+  constructor(private dialog: MatDialog, private cookieService: CookieService,private _formBuilder: FormBuilder, private http:HttpClient, private router: Router) { 
     this.firstFormGroup = this._formBuilder.group({firstCtrl: ['']});
     this.secondFormGroup = this._formBuilder.group({secondCtrl: ['']});
     this.thirdFormGroup = this._formBuilder.group({thirdCtrl: ['']});
@@ -71,6 +73,12 @@ export class ProfileComponent implements OnInit {
       }
     );
   }
+  openLogoutDialog(){
+    const dialogRef = this.dialog.open(LogoutDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('Logout Result:', result)
+    })
+  }
 
   ngOnInit(): void {
     this.getUser$ = this.http.get<getUserDetailsResponse>(GET_USER_DETAILS_API + "?uid=" + this.uid);

frontend/sitcomm/src/app/project/project.component.html

 <mat-drawer-container class="example-container" autosize>
+  <!--
   <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
     <div class="flex-item nav-btns">
       <h1 style="justify-content: center;">Go To</h1>
@@ -24,11 +25,12 @@
     </button>
     </div>
   </mat-drawer>
+  -->
   <p>
     <mat-toolbar id='nav' color="primary" class="flex-container">
       <div class="flex-item">
-        <button mat-icon-button class="example-icon" (click)="drawer.toggle()" aria-label="">
-          <mat-icon>menu</mat-icon>
+        <button mat-icon-button class="example-icon" [routerLink]="['/home']" aria-label="">
+          <mat-icon>keyboard_backspace</mat-icon>
         </button>
         <span>Projects</span>
         <span class="example-spacer"></span>
@@ -37,8 +39,8 @@
         <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
           <mat-icon>person_pin</mat-icon>
         </button>
-        <button mat-icon-button class="" aria-label="">
-          <mat-icon>settings</mat-icon>
+        <button mat-icon-button class="" aria-label="" (click)="openLogoutDialog()">
+          <mat-icon>logout</mat-icon>
         </button>
       </div>
     </mat-toolbar>
@@ -52,7 +54,7 @@
         <app-github *ngIf="tabInd===1" routerLink="['']" [state]="{id:id,name:name}"></app-github>
         <app-jira *ngIf="tabInd===3"></app-jira>
         <app-confluence *ngIf="tabInd===2"></app-confluence>
-        <app-slack *ngIf="tabInd===4"></app-slack>
+        <!--<app-slack *ngIf="tabInd===4"></app-slack>-->
     </mat-tab>
     </mat-tab-group>
   </p>

frontend/sitcomm/src/app/project/project.component.ts

@@ -7,6 +7,9 @@ import { SlackComponent } from '../slack/slack.component';
 import { ConfluenceComponent } from '../confluence/confluence.component';
 import { FetcherService } from '../fetcher.service';
 import { CookieService } from 'ngx-cookie-service';
+import { MatDialog, MatDialogRef} from '@angular/material/dialog';
+import { LogoutDialog } from '../home/home.component';
+
 export interface ExampleTab {
   label: string;
   content: string;
@@ -23,7 +26,7 @@ export class ProjectComponent implements OnInit {
   tabInd = 1;
   asyncTabs: Observable<ExampleTab[]>;
   pid = '';
-  constructor(private fetcherService: FetcherService, private cookieService: CookieService) {
+  constructor(private dialog:MatDialog, private fetcherService: FetcherService, private cookieService: CookieService) {
     console.log(window.history.state);
     this.id = window.history.state.id;
     this.name = window.history.state.name;
@@ -33,7 +36,7 @@ export class ProjectComponent implements OnInit {
           {label: 'Github', content: 'Content 1'},
           {label: 'Confluence', content: 'Content 2'},
           {label: 'JIRA', content: 'Content 3'},
-          {label: 'Slack', content: 'Content 4'}
+          //{label: 'Slack', content: 'Content 4'}
         ]);
       }, 1000);
     });
@@ -41,6 +44,14 @@ export class ProjectComponent implements OnInit {
   changeTab(event: any) {
     this.tabInd = event.index+1;
   }
+
+  openLogoutDialog(){
+    const dialogRef = this.dialog.open(LogoutDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('Logout Result:', result)
+    })
+  }
+
   ngOnInit(): void {
     this.pid = this.cookieService.get('pid');
     if (this.id != undefined && this.pid != this.id.toString()) {

frontend/sitcomm/src/app/responses.ts

 export interface LoginResponse {
     email: string;
+    uid: string;
     status: boolean;
 }
 export interface RegisterResponse {

sitcomm/api/views.py

@@ -46,11 +46,12 @@ class authenticateViewSet(views.APIView):
             user = Users.objects.filter(email=email)
             #print(user)
             user = user.filter(password=password)
+            uid = user[0].uid
             #print(user, len(user), user is None)
             if len(user) == 0:
                 return Response({'status':False})
             status = user.update(active=True)
-            return Response({'email':email,'status':bool(status)})
+            return Response({'email':email, 'uid':uid,'status':bool(status)})
         except:
             return Response({'status':False})