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