client/src/app/menu/menu.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core'
   2 import { UserRight } from '../../../../shared/models/users/user-right.enum'
   3 import { AuthService, AuthStatus, RedirectService, ServerService } from '../core'
   4 import { User } from '../shared/users/user.model'
   5 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
   6 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
   7
   8 @Component({
   9   selector: 'my-menu',
  10   templateUrl: './menu.component.html',
  11   styleUrls: [ './menu.component.scss' ]
  12 })
  13 export class MenuComponent implements OnInit {
  14   @ViewChild('languageChooserModal') languageChooserModal: LanguageChooserComponent
  15
  16   user: User
  17   isLoggedIn: boolean
  18   userHasAdminAccess = false
  19   hotkeys: Hotkey[]
  20
  21   private routesPerRight = {
  22     [UserRight.MANAGE_USERS]: '/admin/users',
  23     [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends',
  24     [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
  25     [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
  26   }
  27   private theme = document.querySelector('body')
  28   private previousTheme = { }
  29
  30   constructor (
  31     private authService: AuthService,
  32     private serverService: ServerService,
  33     private redirectService: RedirectService,
  34     private hotkeysService: HotkeysService
  35   ) {}
  36
  37   ngOnInit () {
  38     this.isLoggedIn = this.authService.isLoggedIn()
  39     if (this.isLoggedIn === true) this.user = this.authService.getUser()
  40     this.computeIsUserHasAdminAccess()
  41
  42     this.authService.loginChangedSource.subscribe(
  43       status => {
  44         if (status === AuthStatus.LoggedIn) {
  45           this.isLoggedIn = true
  46           this.user = this.authService.getUser()
  47           this.computeIsUserHasAdminAccess()
  48           console.log('Logged in.')
  49         } else if (status === AuthStatus.LoggedOut) {
  50           this.isLoggedIn = false
  51           this.user = undefined
  52           this.computeIsUserHasAdminAccess()
  53           console.log('Logged out.')
  54         } else {
  55           console.error('Unknown auth status: ' + status)
  56         }
  57       }
  58     )
  59
  60     // initialise the alternative theme with dark theme colors
  61     this.previousTheme['mainBackgroundColor'] = '#111111'
  62     this.previousTheme['mainForegroundColor'] = '#fff'
  63     this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
  64     this.previousTheme['inputColor'] = 'gray'
  65     this.previousTheme['inputPlaceholderColor'] = '#fff'
  66
  67     this.hotkeys = [
  68       new Hotkey('T', (event: KeyboardEvent): boolean => {
  69         this.toggleDarkTheme()
  70         return false
  71       }, undefined, 'Toggle Dark theme')
  72     ]
  73     this.hotkeysService.add(this.hotkeys)
  74   }
  75
  76   isRegistrationAllowed () {
  77     return this.serverService.getConfig().signup.allowed &&
  78            this.serverService.getConfig().signup.allowedForCurrentIP
  79   }
  80
  81   getFirstAdminRightAvailable () {
  82     const user = this.authService.getUser()
  83     if (!user) return undefined
  84
  85     const adminRights = [
  86       UserRight.MANAGE_USERS,
  87       UserRight.MANAGE_SERVER_FOLLOW,
  88       UserRight.MANAGE_VIDEO_ABUSES,
  89       UserRight.MANAGE_VIDEO_BLACKLIST
  90     ]
  91
  92     for (const adminRight of adminRights) {
  93       if (user.hasRight(adminRight)) {
  94         return adminRight
  95       }
  96     }
  97
  98     return undefined
  99   }
 100
 101   getFirstAdminRouteAvailable () {
 102     const right = this.getFirstAdminRightAvailable()
 103
 104     return this.routesPerRight[right]
 105   }
 106
 107   logout (event: Event) {
 108     event.preventDefault()
 109
 110     this.authService.logout()
 111     // Redirect to home page
 112     this.redirectService.redirectToHomepage()
 113   }
 114
 115   openLanguageChooser () {
 116     this.languageChooserModal.show()
 117   }
 118
 119   toggleDarkTheme () {
 120     // switch properties
 121     this.switchProperty('mainBackgroundColor')
 122     this.switchProperty('mainForegroundColor')
 123     this.switchProperty('submenuColor')
 124     this.switchProperty('inputColor')
 125     this.switchProperty('inputPlaceholderColor')
 126   }
 127
 128   private switchProperty (property, newValue?) {
 129     const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
 130     this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
 131     this.previousTheme[property] = propertyOldvalue
 132   }
 133
 134   private computeIsUserHasAdminAccess () {
 135     const right = this.getFirstAdminRightAvailable()
 136
 137     this.userHasAdminAccess = right !== undefined
 138   }
 139 }