Reorganize client shared modules

35 files changed, 1433 insertions, 91 deletions

diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts
index 4ad904beb..4e7801550 100644
--- a/client/src/app/core/auth/auth-user.model.ts
+++ b/client/src/app/core/auth/auth-user.model.ts
@@ -1,10 +1,14 @@
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { UserRight } from '../../../../../shared/models/users/user-right.enum'
-import { MyUser as ServerMyUserModel, User as ServerUserModel, MyUserSpecialPlaylist } from '../../../../../shared/models/users/user.model'
-// Do not use the barrel (dependency loop)
-import { hasUserRight, UserRole } from '../../../../../shared/models/users/user-role'
-import { User } from '../../shared/users/user.model'
-import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
+import { User } from '@app/core/users/user.model'
+import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
+import {
+  hasUserRight,
+  MyUser as ServerMyUserModel,
+  MyUserSpecialPlaylist,
+  NSFWPolicyType,
+  User as ServerUserModel,
+  UserRight,
+  UserRole
+} from '@shared/models'
 
 export type TokenOptions = {
   accessToken: string
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index de8c509d1..94262b9aa 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,20 +1,17 @@
+import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { Observable, ReplaySubject, Subject, throwError as observableThrowError } from 'rxjs'
 import { catchError, map, mergeMap, share, tap } from 'rxjs/operators'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier } from '@app/core/notification/notifier.service'
-import { OAuthClientLocal, MyUser as UserServerModel, UserRefreshToken } from '../../../../../shared'
-import { User } from '../../../../../shared/models/users'
-import { UserLogin } from '../../../../../shared/models/users/user-login.model'
+import { objectToUrlEncoded, peertubeLocalStorage } from '@app/helpers'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { MyUser as UserServerModel, OAuthClientLocal, User, UserLogin, UserRefreshToken } from '@shared/models'
 import { environment } from '../../../environments/environment'
-import { RestExtractor } from '../../shared/rest/rest-extractor.service'
+import { RestExtractor } from '../rest/rest-extractor.service'
 import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
-import { objectToUrlEncoded } from '@app/shared/misc/utils'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 
 interface UserLoginWithUsername extends UserLogin {
   access_token: string
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index a1734ad80..22896e2e9 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -1,35 +1,35 @@
+import { HotkeyModule } from 'angular2-hotkeys'
+import { MessageService } from 'primeng/api'
+import { ToastModule } from 'primeng/toast'
 import { CommonModule } from '@angular/common'
 import { NgModule, Optional, SkipSelf } from '@angular/core'
-import { FormsModule } from '@angular/forms'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { RouterModule } from '@angular/router'
+import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
+import { HooksService } from '@app/core/plugins/hooks.service'
+import { PluginService } from '@app/core/plugins/plugin.service'
+import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
 import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
-
 import { AuthService } from './auth'
 import { ConfirmService } from './confirm'
+import { CheatSheetComponent } from './hotkeys'
+import { MenuService } from './menu'
 import { throwIfAlreadyLoaded } from './module-import-guard'
+import { Notifier } from './notification'
+import { HtmlRendererService, LinkifierService, MarkdownService } from './renderer'
+import { RestExtractor, RestService } from './rest'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
+import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
+import { ServerConfigResolver } from './routing/server-config-resolver.service'
 import { ServerService } from './server'
 import { ThemeService } from './theme'
-import { MenuService } from './menu'
-import { HotkeyModule } from 'angular2-hotkeys'
-import { CheatSheetComponent } from './hotkeys'
-import { ToastModule } from 'primeng/toast'
-import { Notifier } from './notification'
-import { MessageService } from 'primeng/api'
-import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
-import { ServerConfigResolver } from './routing/server-config-resolver.service'
-import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
-import { PluginService } from '@app/core/plugins/plugin.service'
-import { HooksService } from '@app/core/plugins/hooks.service'
+import { UserService } from './users'
+import { LocalStorageService, ScreenService, SessionStorageService } from './wrappers'
 
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule,
-    FormsModule,
     BrowserAnimationsModule,
 
     LoadingBarHttpClientModule,
@@ -68,11 +68,25 @@ import { HooksService } from '@app/core/plugins/hooks.service'
     PluginService,
     HooksService,
 
+    HtmlRendererService,
+    LinkifierService,
+    MarkdownService,
+
+    RestExtractor,
+    RestService,
+
+    UserService,
+
+    ScreenService,
+    LocalStorageService,
+    SessionStorageService,
+
     RedirectService,
     Notifier,
     MessageService,
     UserNotificationSocket,
-    ServerConfigResolver
+    ServerConfigResolver,
+    CanDeactivateGuard
   ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index f664aff41..a0c34543d 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,8 +1,15 @@
 export * from './auth'
 export * from './confirm'
+export * from './hotkeys'
+export * from './menu'
+export * from './notification'
+export * from './plugins'
+export * from './renderer'
+export * from './rest'
 export * from './routing'
 export * from './server'
-export * from './notification'
 export * from './theme'
+export * from './users'
+export * from './wrappers'
 
 export * from './core.module'
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 81093c666..ef5271f97 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core'
-import { ScreenService } from '@app/shared/misc/screen.service'
 import { fromEvent } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
+import { Injectable } from '@angular/core'
+import { ScreenService } from '../wrappers'
 
 @Injectable()
 export class MenuService {
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
index 3f22da476..37f0bc32c 100644
--- a/client/src/app/core/notification/user-notification-socket.service.ts
+++ b/client/src/app/core/notification/user-notification-socket.service.ts
@@ -1,7 +1,7 @@
+import { Subject } from 'rxjs'
 import { Injectable, NgZone } from '@angular/core'
+import { UserNotification as UserNotificationServer } from '@shared/models'
 import { environment } from '../../../environments/environment'
-import { UserNotification as UserNotificationServer } from '../../../../../shared'
-import { Subject } from 'rxjs'
 import { AuthService } from '../auth'
 
 export type NotificationEvent = 'new' | 'read' | 'read-all'
diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index 2fbf406d1..ec47aa48c 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -2,8 +2,7 @@ import { from, Observable } from 'rxjs'
 import { mergeMap, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
-import { ClientActionHookName, ClientFilterHookName } from '@shared/models/plugins/client-hook.model'
-import { PluginClientScope } from '@shared/models/plugins/plugin-client-scope.type'
+import { ClientActionHookName, ClientFilterHookName, PluginClientScope } from '@shared/models'
 
 type RawFunction<U, T> = (params: U) => T
 type ObservableFunction<U, T> = RawFunction<U, Observable<T>>
diff --git a/client/src/app/core/plugins/index.ts b/client/src/app/core/plugins/index.ts
new file mode 100644
index 000000000..b3239f1f3
--- /dev/null
+++ b/client/src/app/core/plugins/index.ts
@@ -0,0 +1,2 @@
+export * from './hooks.service'
+export * from './plugin.service'
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index c6efcac6d..3cab64142 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -1,28 +1,33 @@
-import { Inject, Injectable, LOCALE_ID, NgZone } from '@angular/core'
-import { Router } from '@angular/router'
-import { getCompleteLocale, isDefaultLocale, peertubeTranslate, ServerConfigPlugin } from '@shared/models'
-import { ServerService } from '@app/core/server/server.service'
-import { ClientScript } from '@shared/models/plugins/plugin-package-json.model'
-import { ClientScript as ClientScriptModule } from '../../../types/client-script.model'
-import { environment } from '../../../environments/environment'
 import { Observable, of, ReplaySubject } from 'rxjs'
 import { catchError, first, map, shareReplay } from 'rxjs/operators'
-import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
-import { ClientHook, ClientHookName, clientHookObject } from '@shared/models/plugins/client-hook.model'
-import { PluginClientScope } from '@shared/models/plugins/plugin-client-scope.type'
-import { RegisterClientHookOptions } from '@shared/models/plugins/register-client-hook.model'
 import { HttpClient } from '@angular/common/http'
+import { Inject, Injectable, LOCALE_ID, NgZone } from '@angular/core'
 import { AuthService } from '@app/core/auth'
 import { Notifier } from '@app/core/notification'
-import { RestExtractor } from '@app/shared/rest'
-import { MarkdownService } from '@app/shared/renderer'
-import { PluginType } from '@shared/models/plugins/plugin.type'
-import { PublicServerSetting } from '@shared/models/plugins/public-server.setting'
-import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
-import { RegisterClientHelpers } from '../../../types/register-client-option.model'
-import { PluginTranslation } from '@shared/models/plugins/plugin-translation.model'
-import { importModule } from '@app/shared/misc/utils'
+import { MarkdownService } from '@app/core/renderer'
+import { RestExtractor } from '@app/core/rest'
+import { ServerService } from '@app/core/server/server.service'
+import { getDevLocale, importModule, isOnDevLocale } from '@app/helpers'
 import { CustomModalComponent } from '@app/modal/custom-modal.component'
+import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
+import {
+  ClientHook,
+  ClientHookName,
+  clientHookObject,
+  ClientScript,
+  getCompleteLocale,
+  isDefaultLocale,
+  peertubeTranslate,
+  PluginClientScope,
+  PluginTranslation,
+  PluginType,
+  PublicServerSetting,
+  RegisterClientHookOptions,
+  ServerConfigPlugin
+} from '@shared/models'
+import { environment } from '../../../environments/environment'
+import { ClientScript as ClientScriptModule } from '../../../types/client-script.model'
+import { RegisterClientHelpers } from '../../../types/register-client-option.model'
 
 interface HookStructValue extends RegisterClientHookOptions {
   plugin: ServerConfigPlugin
@@ -64,7 +69,6 @@ export class PluginService implements ClientHook {
   private hooks: { [ name: string ]: HookStructValue[] } = {}
 
   constructor (
-    private router: Router,
     private authService: AuthService,
     private notifier: Notifier,
     private markdownRenderer: MarkdownService,
diff --git a/client/src/app/core/renderer/html-renderer.service.ts b/client/src/app/core/renderer/html-renderer.service.ts
new file mode 100644
index 000000000..f0527c759
--- /dev/null
+++ b/client/src/app/core/renderer/html-renderer.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { LinkifierService } from './linkifier.service'
+
+@Injectable()
+export class HtmlRendererService {
+
+  constructor (private linkifier: LinkifierService) {
+
+  }
+
+  async toSafeHtml (text: string) {
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const sanitizeHtml: typeof import ('sanitize-html') = (await import('sanitize-html') as any).default
+
+    // Convert possible markdown to html
+    const html = this.linkifier.linkify(text)
+
+    return sanitizeHtml(html, {
+      allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
+      allowedSchemes: [ 'http', 'https' ],
+      allowedAttributes: {
+        'a': [ 'href', 'class', 'target', 'rel' ]
+      },
+      transformTags: {
+        a: (tagName, attribs) => {
+          let rel = 'noopener noreferrer'
+          if (attribs.rel === 'me') rel += ' me'
+
+          return {
+            tagName,
+            attribs: Object.assign(attribs, {
+              target: '_blank',
+              rel
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/client/src/app/core/renderer/index.ts b/client/src/app/core/renderer/index.ts
new file mode 100644
index 000000000..39202b385
--- /dev/null
+++ b/client/src/app/core/renderer/index.ts
@@ -0,0 +1,3 @@
+export * from './html-renderer.service'
+export * from './linkifier.service'
+export * from './markdown.service'
diff --git a/client/src/app/core/renderer/linkifier.service.ts b/client/src/app/core/renderer/linkifier.service.ts
new file mode 100644
index 000000000..46d5b0089
--- /dev/null
+++ b/client/src/app/core/renderer/linkifier.service.ts
@@ -0,0 +1,114 @@
+import { Injectable } from '@angular/core'
+import { getAbsoluteAPIUrl } from '@app/helpers/utils'
+import * as linkify from 'linkifyjs'
+import linkifyHtml from 'linkifyjs/html'
+
+@Injectable()
+export class LinkifierService {
+
+  static CLASSNAME = 'linkified'
+
+  private linkifyOptions = {
+    className: {
+      mention: LinkifierService.CLASSNAME + '-mention',
+      url: LinkifierService.CLASSNAME + '-url'
+    }
+  }
+
+  constructor () {
+    // Apply plugin
+    this.mentionWithDomainPlugin(linkify)
+  }
+
+  linkify (text: string) {
+    return linkifyHtml(text, this.linkifyOptions)
+  }
+
+  private mentionWithDomainPlugin (linkify: any) {
+    const TT = linkify.scanner.TOKENS // Text tokens
+    const { TOKENS: MT, State } = linkify.parser // Multi tokens, state
+    const MultiToken = MT.Base
+    const S_START = linkify.parser.start
+
+    const TT_AT = TT.AT
+    const TT_DOMAIN = TT.DOMAIN
+    const TT_LOCALHOST = TT.LOCALHOST
+    const TT_NUM = TT.NUM
+    const TT_COLON = TT.COLON
+    const TT_SLASH = TT.SLASH
+    const TT_TLD = TT.TLD
+    const TT_UNDERSCORE = TT.UNDERSCORE
+    const TT_DOT = TT.DOT
+
+    function MENTION (this: any, value: any) {
+      this.v = value
+    }
+
+    linkify.inherits(MultiToken, MENTION, {
+      type: 'mentionWithDomain',
+      isLink: true,
+      toHref () {
+        return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
+      }
+    })
+
+    const S_AT = S_START.jump(TT_AT) // @
+    const S_AT_SYMS = new State()
+    const S_MENTION = new State(MENTION)
+    const S_MENTION_DIVIDER = new State()
+    const S_MENTION_DIVIDER_SYMS = new State()
+
+    // @_,
+    S_AT.on(TT_UNDERSCORE, S_AT_SYMS)
+
+    //  @_*
+    S_AT_SYMS
+      .on(TT_UNDERSCORE, S_AT_SYMS)
+      .on(TT_DOT, S_AT_SYMS)
+
+    // Valid mention (not made up entirely of symbols)
+    S_AT
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    S_AT_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    // More valid mentions
+    S_MENTION
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_COLON, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+      .on(TT_UNDERSCORE, S_MENTION)
+
+    // Mention with a divider
+    S_MENTION
+      .on(TT_AT, S_MENTION_DIVIDER)
+      .on(TT_SLASH, S_MENTION_DIVIDER)
+      .on(TT_DOT, S_MENTION_DIVIDER)
+
+    // Mention _ trailing stash plus syms
+    S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+    S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+
+    // Once we get a word token, mentions can start up again
+    S_MENTION_DIVIDER
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    S_MENTION_DIVIDER_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+  }
+}
diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts
new file mode 100644
index 000000000..0c43bebab
--- /dev/null
+++ b/client/src/app/core/renderer/markdown.service.ts
@@ -0,0 +1,145 @@
+import * as MarkdownIt from 'markdown-it'
+import { buildVideoLink } from 'src/assets/player/utils'
+import { Injectable } from '@angular/core'
+import { HtmlRendererService } from './html-renderer.service'
+
+type MarkdownParsers = {
+  textMarkdownIt: MarkdownIt
+  textWithHTMLMarkdownIt: MarkdownIt
+
+  enhancedMarkdownIt: MarkdownIt
+  enhancedWithHTMLMarkdownIt: MarkdownIt
+
+  completeMarkdownIt: MarkdownIt
+}
+
+type MarkdownConfig = {
+  rules: string[]
+  html: boolean
+  escape?: boolean
+}
+
+type MarkdownParserConfigs = {
+  [id in keyof MarkdownParsers]: MarkdownConfig
+}
+
+@Injectable()
+export class MarkdownService {
+  static TEXT_RULES = [
+    'linkify',
+    'autolink',
+    'emphasis',
+    'link',
+    'newline',
+    'list'
+  ]
+  static TEXT_WITH_HTML_RULES = MarkdownService.TEXT_RULES.concat([ 'html_inline', 'html_block' ])
+
+  static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
+  static ENHANCED_WITH_HTML_RULES = MarkdownService.TEXT_WITH_HTML_RULES.concat([ 'image' ])
+
+  static COMPLETE_RULES = MarkdownService.ENHANCED_WITH_HTML_RULES.concat([ 'block', 'inline', 'heading', 'paragraph' ])
+
+  private markdownParsers: MarkdownParsers = {
+    textMarkdownIt: null,
+    textWithHTMLMarkdownIt: null,
+    enhancedMarkdownIt: null,
+    enhancedWithHTMLMarkdownIt: null,
+    completeMarkdownIt: null
+  }
+  private parsersConfig: MarkdownParserConfigs = {
+    textMarkdownIt: { rules: MarkdownService.TEXT_RULES, html: false },
+    textWithHTMLMarkdownIt: { rules: MarkdownService.TEXT_WITH_HTML_RULES, html: true, escape: true },
+
+    enhancedMarkdownIt: { rules: MarkdownService.ENHANCED_RULES, html: false },
+    enhancedWithHTMLMarkdownIt: { rules: MarkdownService.ENHANCED_WITH_HTML_RULES, html: true, escape: true },
+
+    completeMarkdownIt: { rules: MarkdownService.COMPLETE_RULES, html: true }
+  }
+
+  constructor (private htmlRenderer: HtmlRendererService) {}
+
+  textMarkdownToHTML (markdown: string, withHtml = false) {
+    if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown)
+
+    return this.render('textMarkdownIt', markdown)
+  }
+
+  enhancedMarkdownToHTML (markdown: string, withHtml = false) {
+    if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown)
+
+    return this.render('enhancedMarkdownIt', markdown)
+  }
+
+  completeMarkdownToHTML (markdown: string) {
+    return this.render('completeMarkdownIt', markdown)
+  }
+
+  async processVideoTimestamps (html: string) {
+    return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
+      const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
+      const url = buildVideoLink({ startTime: t })
+      return `<a class="video-timestamp" href="${url}">${str}</a>`
+    })
+  }
+
+  private async render (name: keyof MarkdownParsers, markdown: string) {
+    if (!markdown) return ''
+
+    const config = this.parsersConfig[ name ]
+    if (!this.markdownParsers[ name ]) {
+      this.markdownParsers[ name ] = await this.createMarkdownIt(config)
+    }
+
+    let html = this.markdownParsers[ name ].render(markdown)
+    html = this.avoidTruncatedTags(html)
+
+    if (config.escape) return this.htmlRenderer.toSafeHtml(html)
+
+    return html
+  }
+
+  private async createMarkdownIt (config: MarkdownConfig) {
+    // FIXME: import('...') returns a struct module, containing a "default" field
+    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
+
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
+
+    for (const rule of config.rules) {
+      markdownIt.enable(rule)
+    }
+
+    this.setTargetToLinks(markdownIt)
+
+    return markdownIt
+  }
+
+  private setTargetToLinks (markdownIt: MarkdownIt) {
+    // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+    const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+
+    markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
+      const token = tokens[index]
+
+      const targetIndex = token.attrIndex('target')
+      if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
+      else token.attrs[targetIndex][1] = '_blank'
+
+      const relIndex = token.attrIndex('rel')
+      if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
+      else token.attrs[relIndex][1] = 'noopener noreferrer'
+
+      // pass token to default renderer.
+      return defaultRender(tokens, index, options, env, self)
+    }
+  }
+
+  private avoidTruncatedTags (html: string) {
+    return html.replace(/\*\*?([^*]+)$/, '$1')
+      .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
+      .replace(/\[[^\]]+\]\(([^\)]+)$/m, '$1')
+      .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...</p>')
+  }
+}
diff --git a/client/src/app/core/rest/component-pagination.model.ts b/client/src/app/core/rest/component-pagination.model.ts
new file mode 100644
index 000000000..bcb73ed0f
--- /dev/null
+++ b/client/src/app/core/rest/component-pagination.model.ts
@@ -0,0 +1,18 @@
+export interface ComponentPagination {
+  currentPage: number
+  itemsPerPage: number
+  totalItems: number
+}
+
+export type ComponentPaginationLight = Omit<ComponentPagination, 'totalItems'>
+
+export function hasMoreItems (componentPagination: ComponentPagination) {
+  // No results
+  if (componentPagination.totalItems === 0) return false
+
+  // Not loaded yet
+  if (!componentPagination.totalItems) return true
+
+  const maxPage = componentPagination.totalItems / componentPagination.itemsPerPage
+  return maxPage > componentPagination.currentPage
+}
diff --git a/client/src/app/core/rest/index.ts b/client/src/app/core/rest/index.ts
new file mode 100644
index 000000000..93899beaf
--- /dev/null
+++ b/client/src/app/core/rest/index.ts
@@ -0,0 +1,5 @@
+export * from './component-pagination.model'
+export * from './rest-extractor.service'
+export * from './rest-pagination'
+export * from './rest-table'
+export * from './rest.service'
diff --git a/client/src/app/core/rest/rest-extractor.service.ts b/client/src/app/core/rest/rest-extractor.service.ts
new file mode 100644
index 000000000..9de964f79
--- /dev/null
+++ b/client/src/app/core/rest/rest-extractor.service.ts
@@ -0,0 +1,109 @@
+import { throwError as observableThrowError } from 'rxjs'
+import { Injectable } from '@angular/core'
+import { Router } from '@angular/router'
+import { dateToHuman } from '@app/helpers'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ResultList } from '@shared/models'
+
+@Injectable()
+export class RestExtractor {
+
+  constructor (
+    private router: Router,
+    private i18n: I18n
+  ) { }
+
+  extractDataBool () {
+    return true
+  }
+
+  applyToResultListData <T> (result: ResultList<T>, fun: Function, additionalArgs?: any[]): ResultList<T> {
+    const data: T[] = result.data
+    const newData: T[] = []
+
+    data.forEach(d => newData.push(fun.apply(this, [ d ].concat(additionalArgs))))
+
+    return {
+      total: result.total,
+      data: newData
+    }
+  }
+
+  convertResultListDateToHuman <T> (result: ResultList<T>, fieldsToConvert: string[] = [ 'createdAt' ]): ResultList<T> {
+    return this.applyToResultListData(result, this.convertDateToHuman, [ fieldsToConvert ])
+  }
+
+  convertDateToHuman (target: { [ id: string ]: string }, fieldsToConvert: string[]) {
+    fieldsToConvert.forEach(field => target[field] = dateToHuman(target[field]))
+
+    return target
+  }
+
+  handleError (err: any) {
+    let errorMessage
+
+    if (err.error instanceof Error) {
+      // A client-side or network error occurred. Handle it accordingly.
+      errorMessage = err.error.message
+      console.error('An error occurred:', errorMessage)
+    } else if (typeof err.error === 'string') {
+      errorMessage = err.error
+    } else if (err.status !== undefined) {
+      // A server-side error occurred.
+      if (err.error && err.error.errors) {
+        const errors = err.error.errors
+        const errorsArray: string[] = []
+
+        Object.keys(errors).forEach(key => {
+          errorsArray.push(errors[key].msg)
+        })
+
+        errorMessage = errorsArray.join('. ')
+      } else if (err.error && err.error.error) {
+        errorMessage = err.error.error
+      } else if (err.status === 413) {
+        errorMessage = this.i18n(
+          'Request is too large for the server. Please contact you administrator if you want to increase the limit size.'
+        )
+      } else if (err.status === 429) {
+        const secondsLeft = err.headers.get('retry-after')
+        if (secondsLeft) {
+          const minutesLeft = Math.floor(parseInt(secondsLeft, 10) / 60)
+          errorMessage = this.i18n('Too many attempts, please try again after {{minutesLeft}} minutes.', { minutesLeft })
+        } else {
+          errorMessage = this.i18n('Too many attempts, please try again later.')
+        }
+      } else if (err.status === 500) {
+        errorMessage = this.i18n('Server error. Please retry later.')
+      }
+
+      errorMessage = errorMessage ? errorMessage : 'Unknown error.'
+      console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
+    } else {
+      console.error(err)
+      errorMessage = err
+    }
+
+    const errorObj: { message: string, status: string, body: string } = {
+      message: errorMessage,
+      status: undefined,
+      body: undefined
+    }
+
+    if (err.status) {
+      errorObj.status = err.status
+      errorObj.body = err.error
+    }
+
+    return observableThrowError(errorObj)
+  }
+
+  redirectTo404IfNotFound (obj: { status: number }, status = [ 404 ]) {
+    if (obj && obj.status && status.indexOf(obj.status) !== -1) {
+      // Do not use redirectService to avoid circular dependencies
+      this.router.navigate([ '/404' ], { skipLocationChange: true })
+    }
+
+    return observableThrowError(obj)
+  }
+}
diff --git a/client/src/app/core/rest/rest-pagination.ts b/client/src/app/core/rest/rest-pagination.ts
new file mode 100644
index 000000000..0faa59303
--- /dev/null
+++ b/client/src/app/core/rest/rest-pagination.ts
@@ -0,0 +1,4 @@
+export interface RestPagination {
+  start: number
+  count: number
+}
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts
new file mode 100644
index 000000000..1b35ad47d
--- /dev/null
+++ b/client/src/app/core/rest/rest-table.ts
@@ -0,0 +1,105 @@
+import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
+import { LazyLoadEvent, SortMeta } from 'primeng/api'
+import { RestPagination } from './rest-pagination'
+import { Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+
+export abstract class RestTable {
+
+  abstract totalRecords: number
+  abstract sort: SortMeta
+  abstract pagination: RestPagination
+
+  search: string
+  rowsPerPageOptions = [ 10, 20, 50, 100 ]
+  rowsPerPage = this.rowsPerPageOptions[0]
+  expandedRows = {}
+
+  private searchStream: Subject<string>
+
+  abstract getIdentifier (): string
+
+  initialize () {
+    this.loadSort()
+    this.initSearch()
+  }
+
+  loadSort () {
+    const result = peertubeLocalStorage.getItem(this.getSortLocalStorageKey())
+
+    if (result) {
+      try {
+        this.sort = JSON.parse(result)
+      } catch (err) {
+        console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err)
+      }
+    }
+  }
+
+  loadLazy (event: LazyLoadEvent) {
+    this.sort = {
+      order: event.sortOrder,
+      field: event.sortField
+    }
+
+    this.pagination = {
+      start: event.first,
+      count: this.rowsPerPage
+    }
+
+    this.loadData()
+    this.saveSort()
+  }
+
+  saveSort () {
+    peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort))
+  }
+
+  initSearch () {
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(400),
+        distinctUntilChanged()
+      )
+      .subscribe(search => {
+        this.search = search
+        this.loadData()
+      })
+  }
+
+  onSearch (event: Event) {
+    const target = event.target as HTMLInputElement
+    this.searchStream.next(target.value)
+  }
+
+  onPage (event: { first: number, rows: number }) {
+    if (this.rowsPerPage !== event.rows) {
+      this.rowsPerPage = event.rows
+      this.pagination = {
+        start: event.first,
+        count: this.rowsPerPage
+      }
+      this.loadData()
+    }
+    this.expandedRows = {}
+  }
+
+  setTableFilter (filter: string) {
+    // FIXME: cannot use ViewChild, so create a component for the filter input
+    const filterInput = document.getElementById('table-filter') as HTMLInputElement
+    if (filterInput) filterInput.value = filter
+  }
+
+  resetSearch () {
+    this.searchStream.next('')
+    this.setTableFilter('')
+  }
+
+  protected abstract loadData (): void
+
+  private getSortLocalStorageKey () {
+    return 'rest-table-sort-' + this.getIdentifier()
+  }
+}
diff --git a/client/src/app/core/rest/rest.service.ts b/client/src/app/core/rest/rest.service.ts
new file mode 100644
index 000000000..78558851a
--- /dev/null
+++ b/client/src/app/core/rest/rest.service.ts
@@ -0,0 +1,111 @@
+import { SortMeta } from 'primeng/api'
+import { HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { ComponentPaginationLight } from './component-pagination.model'
+import { RestPagination } from './rest-pagination'
+
+interface QueryStringFilterPrefixes {
+  [key: string]: {
+    prefix: string
+    handler?: (v: string) => string | number
+    multiple?: boolean
+  }
+}
+
+type ParseQueryStringFilterResult = {
+  [key: string]: string | number | (string | number)[]
+}
+
+@Injectable()
+export class RestService {
+
+  addRestGetParams (params: HttpParams, pagination?: RestPagination, sort?: SortMeta | string) {
+    let newParams = params
+
+    if (pagination !== undefined) {
+      newParams = newParams.set('start', pagination.start.toString())
+                           .set('count', pagination.count.toString())
+    }
+
+    if (sort !== undefined) {
+      let sortString = ''
+
+      if (typeof sort === 'string') {
+        sortString = sort
+      } else {
+        const sortPrefix = sort.order === 1 ? '' : '-'
+        sortString = sortPrefix + sort.field
+      }
+
+      newParams = newParams.set('sort', sortString)
+    }
+
+    return newParams
+  }
+
+  addObjectParams (params: HttpParams, object: { [ name: string ]: any }) {
+    for (const name of Object.keys(object)) {
+      const value = object[name]
+      if (value === undefined || value === null) continue
+
+      if (Array.isArray(value) && value.length !== 0) {
+        for (const v of value) params = params.append(name, v)
+      } else {
+        params = params.append(name, value)
+      }
+    }
+
+    return params
+  }
+
+  componentPaginationToRestPagination (componentPagination: ComponentPaginationLight): RestPagination {
+    const start: number = (componentPagination.currentPage - 1) * componentPagination.itemsPerPage
+    const count: number = componentPagination.itemsPerPage
+
+    return { start, count }
+  }
+
+  parseQueryStringFilter (q: string, prefixes: QueryStringFilterPrefixes): ParseQueryStringFilterResult {
+    if (!q) return {}
+
+    // Tokenize the strings using spaces
+    const tokens = q.split(' ').filter(token => !!token)
+
+    // Build prefix array
+    const prefixeStrings = Object.values(prefixes)
+                           .map(p => p.prefix)
+
+    // Search is the querystring minus defined filters
+    const searchTokens = tokens.filter(t => {
+      return prefixeStrings.every(prefixString => t.startsWith(prefixString) === false)
+    })
+
+    const additionalFilters: ParseQueryStringFilterResult = {}
+
+    for (const prefixKey of Object.keys(prefixes)) {
+      const prefixObj = prefixes[prefixKey]
+      const prefix = prefixObj.prefix
+
+      const matchedTokens = tokens.filter(t => t.startsWith(prefix))
+                                  .map(t => t.slice(prefix.length)) // Keep the value filter
+                                  .map(t => {
+                                    if (prefixObj.handler) return prefixObj.handler(t)
+
+                                    return t
+                                  })
+                                  .filter(t => !!t || t === 0)
+
+      if (matchedTokens.length === 0) continue
+
+      additionalFilters[prefixKey] = prefixObj.multiple === true
+        ? matchedTokens
+        : matchedTokens[0]
+    }
+
+    return {
+      search: searchTokens.join(' ') || undefined,
+
+      ...additionalFilters
+    }
+  }
+}
diff --git a/client/src/app/core/routing/can-deactivate-guard.service.ts b/client/src/app/core/routing/can-deactivate-guard.service.ts
new file mode 100644
index 000000000..e0405293a
--- /dev/null
+++ b/client/src/app/core/routing/can-deactivate-guard.service.ts
@@ -0,0 +1,30 @@
+import { Observable } from 'rxjs'
+import { Injectable } from '@angular/core'
+import { CanDeactivate } from '@angular/router'
+import { ConfirmService } from '@app/core/confirm'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+export type CanComponentDeactivateResult = { text?: string, canDeactivate: Observable<boolean> | boolean }
+
+export interface CanComponentDeactivate {
+  canDeactivate: () => CanComponentDeactivateResult
+}
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
+  constructor (
+    private confirmService: ConfirmService,
+    private i18n: I18n
+  ) { }
+
+  canDeactivate (component: CanComponentDeactivate) {
+    const result = component.canDeactivate()
+    const text = result.text || this.i18n('All unsaved data will be lost, are you sure you want to leave this page?')
+
+    return result.canDeactivate || this.confirmService.confirm(
+      text,
+      this.i18n('Warning')
+    )
+  }
+
+}
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
index 58b83bb2a..239c27caf 100644
--- a/client/src/app/core/routing/index.ts
+++ b/client/src/app/core/routing/index.ts
@@ -1,5 +1,10 @@
+export * from './can-deactivate-guard.service'
+export * from './custom-reuse-strategy'
+export * from './disable-for-reuse-hook'
 export * from './login-guard.service'
-export * from './user-right-guard.service'
+export * from './menu-guard.service'
 export * from './preload-selected-modules-list'
 export * from './redirect.service'
-export * from './menu-guard.service'
+export * from './server-config-resolver.service'
+export * from './unlogged-guard.service'
+export * from './user-right-guard.service'
diff --git a/client/src/app/core/routing/login-guard.service.ts b/client/src/app/core/routing/login-guard.service.ts
index 7b1c37ee8..a949be14c 100644
--- a/client/src/app/core/routing/login-guard.service.ts
+++ b/client/src/app/core/routing/login-guard.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router'
-
 import { AuthService } from '../auth/auth.service'
 
 @Injectable()
diff --git a/client/src/app/core/routing/menu-guard.service.ts b/client/src/app/core/routing/menu-guard.service.ts
index 907d145fd..9df285635 100644
--- a/client/src/app/core/routing/menu-guard.service.ts
+++ b/client/src/app/core/routing/menu-guard.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { CanActivate, CanDeactivate } from '@angular/router'
-import { MenuService } from '@app/core/menu'
-import { ScreenService } from '@app/shared/misc/screen.service'
+import { MenuService } from '../menu'
+import { ScreenService } from '../wrappers'
 
 abstract class MenuGuard implements CanActivate, CanDeactivate<any> {
   display = true
diff --git a/client/src/app/core/routing/preload-selected-modules-list.ts b/client/src/app/core/routing/preload-selected-modules-list.ts
index 64af68225..b494a40bc 100644
--- a/client/src/app/core/routing/preload-selected-modules-list.ts
+++ b/client/src/app/core/routing/preload-selected-modules-list.ts
@@ -5,6 +5,7 @@ import { Injectable } from '@angular/core'
 
 @Injectable()
 export class PreloadSelectedModulesList implements PreloadingStrategy {
+
   preload (route: Route, load: Function): Observable<any> {
     if (!route.data || !route.data.preload) return ofObservable(null)
 
diff --git a/client/src/app/core/routing/server-config-resolver.service.ts b/client/src/app/core/routing/server-config-resolver.service.ts
index 3b7ed99bf..0ce2023a0 100644
--- a/client/src/app/core/routing/server-config-resolver.service.ts
+++ b/client/src/app/core/routing/server-config-resolver.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 import { Resolve } from '@angular/router'
-import { ServerService } from '@app/core/server'
+import { ServerService } from '../server'
 import { ServerConfig } from '@shared/models'
 
 @Injectable()
diff --git a/client/src/app/core/routing/unlogged-guard.service.ts b/client/src/app/core/routing/unlogged-guard.service.ts
index 3132a1a77..0be7911a0 100644
--- a/client/src/app/core/routing/unlogged-guard.service.ts
+++ b/client/src/app/core/routing/unlogged-guard.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router'
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot } from '@angular/router'
 import { AuthService } from '../auth/auth.service'
 import { RedirectService } from './redirect.service'
 
@@ -7,7 +7,6 @@ import { RedirectService } from './redirect.service'
 export class UnloggedGuard implements CanActivate, CanActivateChild {
 
   constructor (
-    private router: Router,
     private auth: AuthService,
     private redirectService: RedirectService
   ) {}
diff --git a/client/src/app/core/routing/user-right-guard.service.ts b/client/src/app/core/routing/user-right-guard.service.ts
index 50c3d8c19..a2ce772db 100644
--- a/client/src/app/core/routing/user-right-guard.service.ts
+++ b/client/src/app/core/routing/user-right-guard.service.ts
@@ -1,12 +1,5 @@
 import { Injectable } from '@angular/core'
-import {
-  ActivatedRouteSnapshot,
-  CanActivateChild,
-  RouterStateSnapshot,
-  CanActivate,
-  Router
-} from '@angular/router'
-
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router'
 import { AuthService } from '../auth/auth.service'
 
 @Injectable()
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index a804efd28..32a135203 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -2,14 +2,16 @@ import { Observable, of, Subject } from 'rxjs'
 import { first, map, share, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
-import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { sortBy } from '@app/shared/misc/utils'
-import { SearchTargetType } from '@shared/models/search/search-target-query.model'
-import { ServerStats } from '@shared/models/server'
-import { getCompleteLocale, ServerConfig } from '../../../../../shared'
-import { isDefaultLocale, peertubeTranslate } from '../../../../../shared/models/i18n'
-import { VideoConstant } from '../../../../../shared/models/videos'
+import { getDevLocale, isOnDevLocale, peertubeLocalStorage, sortBy } from '@app/helpers'
+import {
+  getCompleteLocale,
+  isDefaultLocale,
+  peertubeTranslate,
+  SearchTargetType,
+  ServerConfig,
+  ServerStats,
+  VideoConstant
+} from '@shared/models'
 import { environment } from '../../../environments/environment'
 
 @Injectable()
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index c0189ad32..9dbf22e20 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -1,13 +1,13 @@
+import { first } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
-import { AuthService } from '@app/core/auth'
-import { ServerService } from '@app/core/server'
-import { environment } from '../../../environments/environment'
-import { PluginService } from '@app/core/plugins/plugin.service'
+import { AuthService } from '../auth'
+import { PluginService } from '../plugins/plugin.service'
+import { ServerService } from '../server'
+import { LocalStorageService } from '../wrappers/storage.service'
+import { User } from '../users/user.model'
+import { UserService } from '../users/user.service'
 import { ServerConfig, ServerConfigTheme } from '@shared/models'
-import { first } from 'rxjs/operators'
-import { User } from '@app/shared/users/user.model'
-import { UserService } from '@app/shared/users/user.service'
-import { LocalStorageService } from '@app/shared/misc/storage.service'
+import { environment } from '../../../environments/environment'
 
 @Injectable()
 export class ThemeService {
diff --git a/client/src/app/core/users/index.ts b/client/src/app/core/users/index.ts
new file mode 100644
index 000000000..7b5a67bc7
--- /dev/null
+++ b/client/src/app/core/users/index.ts
@@ -0,0 +1,2 @@
+export * from './user.model'
+export * from './user.service'
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
new file mode 100644
index 000000000..8ecdf9fcd
--- /dev/null
+++ b/client/src/app/core/users/user.model.ts
@@ -0,0 +1,150 @@
+import { Account } from '@app/shared/shared-main/account/account.model'
+import {
+  Avatar,
+  hasUserRight,
+  NSFWPolicyType,
+  User as UserServerModel,
+  UserAdminFlag,
+  UserNotificationSetting,
+  UserRight,
+  UserRole,
+  VideoChannel
+} from '@shared/models'
+
+export class User implements UserServerModel {
+  static KEYS = {
+    ID: 'id',
+    ROLE: 'role',
+    EMAIL: 'email',
+    VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
+    USERNAME: 'username',
+    NSFW_POLICY: 'nsfw_policy',
+    WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
+    AUTO_PLAY_VIDEO: 'auto_play_video',
+    SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO: 'auto_play_next_video',
+    AUTO_PLAY_VIDEO_PLAYLIST: 'auto_play_video_playlist',
+    THEME: 'last_active_theme',
+    VIDEO_LANGUAGES: 'video_languages'
+  }
+
+  id: number
+  username: string
+  email: string
+  pendingEmail: string | null
+
+  emailVerified: boolean
+  nsfwPolicy: NSFWPolicyType
+
+  adminFlags?: UserAdminFlag
+
+  autoPlayVideo: boolean
+  autoPlayNextVideo: boolean
+  autoPlayNextVideoPlaylist: boolean
+  webTorrentEnabled: boolean
+  videosHistoryEnabled: boolean
+  videoLanguages: string[]
+
+  role: UserRole
+  roleLabel: string
+
+  videoQuota: number
+  videoQuotaDaily: number
+  videoQuotaUsed?: number
+  videoQuotaUsedDaily?: number
+  videosCount?: number
+  videoAbusesCount?: number
+  videoAbusesAcceptedCount?: number
+  videoAbusesCreatedCount?: number
+  videoCommentsCount?: number
+
+  theme: string
+
+  account: Account
+  notificationSettings?: UserNotificationSetting
+  videoChannels?: VideoChannel[]
+
+  blocked: boolean
+  blockedReason?: string
+
+  noInstanceConfigWarningModal: boolean
+  noWelcomeModal: boolean
+
+  pluginAuth: string | null
+
+  lastLoginDate: Date | null
+
+  createdAt: Date
+
+  constructor (hash: Partial<UserServerModel>) {
+    this.id = hash.id
+    this.username = hash.username
+    this.email = hash.email
+
+    this.role = hash.role
+
+    this.videoChannels = hash.videoChannels
+
+    this.videoQuota = hash.videoQuota
+    this.videoQuotaDaily = hash.videoQuotaDaily
+    this.videoQuotaUsed = hash.videoQuotaUsed
+    this.videoQuotaUsedDaily = hash.videoQuotaUsedDaily
+    this.videosCount = hash.videosCount
+    this.videoAbusesCount = hash.videoAbusesCount
+    this.videoAbusesAcceptedCount = hash.videoAbusesAcceptedCount
+    this.videoAbusesCreatedCount = hash.videoAbusesCreatedCount
+    this.videoCommentsCount = hash.videoCommentsCount
+
+    this.nsfwPolicy = hash.nsfwPolicy
+    this.webTorrentEnabled = hash.webTorrentEnabled
+    this.autoPlayVideo = hash.autoPlayVideo
+    this.autoPlayNextVideo = hash.autoPlayNextVideo
+    this.autoPlayNextVideoPlaylist = hash.autoPlayNextVideoPlaylist
+    this.videosHistoryEnabled = hash.videosHistoryEnabled
+    this.videoLanguages = hash.videoLanguages
+
+    this.theme = hash.theme
+
+    this.adminFlags = hash.adminFlags
+
+    this.blocked = hash.blocked
+    this.blockedReason = hash.blockedReason
+
+    this.noInstanceConfigWarningModal = hash.noInstanceConfigWarningModal
+    this.noWelcomeModal = hash.noWelcomeModal
+
+    this.notificationSettings = hash.notificationSettings
+
+    this.createdAt = hash.createdAt
+
+    this.pluginAuth = hash.pluginAuth
+    this.lastLoginDate = hash.lastLoginDate
+
+    if (hash.account !== undefined) {
+      this.account = new Account(hash.account)
+    }
+  }
+
+  get accountAvatarUrl () {
+    if (!this.account) return ''
+
+    return this.account.avatarUrl
+  }
+
+  hasRight (right: UserRight) {
+    return hasUserRight(this.role, right)
+  }
+
+  patch (obj: UserServerModel) {
+    for (const key of Object.keys(obj)) {
+      this[key] = obj[key]
+    }
+
+    if (obj.account !== undefined) {
+      this.account = new Account(obj.account)
+    }
+  }
+
+  updateAccountAvatar (newAccountAvatar: Avatar) {
+    this.account.updateAvatar(newAccountAvatar)
+  }
+}
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
new file mode 100644
index 000000000..ab395b1f9
--- /dev/null
+++ b/client/src/app/core/users/user.service.ts
@@ -0,0 +1,375 @@
+import { has } from 'lodash-es'
+import { BytesPipe } from 'ngx-pipes'
+import { SortMeta } from 'primeng/api'
+import { from, Observable, of } from 'rxjs'
+import { catchError, concatMap, filter, first, map, shareReplay, throttleTime, toArray } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { AuthService } from '@app/core/auth'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import {
+  Avatar,
+  NSFWPolicyType,
+  ResultList,
+  User as UserServerModel,
+  UserCreate,
+  UserRegister,
+  UserRole,
+  UserUpdate,
+  UserUpdateMe,
+  UserVideoQuota
+} from '@shared/models'
+import { environment } from '../../../environments/environment'
+import { RestExtractor, RestPagination, RestService } from '../rest'
+import { LocalStorageService, SessionStorageService } from '../wrappers/storage.service'
+import { User } from './user.model'
+
+@Injectable()
+export class UserService {
+  static BASE_USERS_URL = environment.apiUrl + '/api/v1/users/'
+
+  private bytesPipe = new BytesPipe()
+
+  private userCache: { [ id: number ]: Observable<UserServerModel> } = {}
+
+  constructor (
+    private authHttp: HttpClient,
+    private authService: AuthService,
+    private restExtractor: RestExtractor,
+    private restService: RestService,
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
+    private i18n: I18n
+  ) { }
+
+  changePassword (currentPassword: string, newPassword: string) {
+    const url = UserService.BASE_USERS_URL + 'me'
+    const body: UserUpdateMe = {
+      currentPassword,
+      password: newPassword
+    }
+
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  changeEmail (password: string, newEmail: string) {
+    const url = UserService.BASE_USERS_URL + 'me'
+    const body: UserUpdateMe = {
+      currentPassword: password,
+      email: newEmail
+    }
+
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateMyProfile (profile: UserUpdateMe) {
+    const url = UserService.BASE_USERS_URL + 'me'
+
+    return this.authHttp.put(url, profile)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateMyAnonymousProfile (profile: UserUpdateMe) {
+    const supportedKeys = {
+      // local storage keys
+      nsfwPolicy: (val: NSFWPolicyType) => this.localStorageService.setItem(User.KEYS.NSFW_POLICY, val),
+      webTorrentEnabled: (val: boolean) => this.localStorageService.setItem(User.KEYS.WEBTORRENT_ENABLED, String(val)),
+      autoPlayVideo: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO, String(val)),
+      autoPlayNextVideoPlaylist: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST, String(val)),
+      theme: (val: string) => this.localStorageService.setItem(User.KEYS.THEME, val),
+      videoLanguages: (val: string[]) => this.localStorageService.setItem(User.KEYS.VIDEO_LANGUAGES, JSON.stringify(val)),
+
+      // session storage keys
+      autoPlayNextVideo: (val: boolean) =>
+        this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, String(val))
+    }
+
+    for (const key of Object.keys(profile)) {
+      try {
+        if (has(supportedKeys, key)) supportedKeys[key](profile[key])
+      } catch (err) {
+        console.error(`Cannot set item ${key} in localStorage. Likely due to a value impossible to stringify.`, err)
+      }
+    }
+  }
+
+  listenAnonymousUpdate () {
+    return this.localStorageService.watch([
+      User.KEYS.NSFW_POLICY,
+      User.KEYS.WEBTORRENT_ENABLED,
+      User.KEYS.AUTO_PLAY_VIDEO,
+      User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST,
+      User.KEYS.THEME,
+      User.KEYS.VIDEO_LANGUAGES
+    ]).pipe(
+      throttleTime(200),
+      filter(() => this.authService.isLoggedIn() !== true),
+      map(() => this.getAnonymousUser())
+    )
+  }
+
+  deleteMe () {
+    const url = UserService.BASE_USERS_URL + 'me'
+
+    return this.authHttp.delete(url)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  changeAvatar (avatarForm: FormData) {
+    const url = UserService.BASE_USERS_URL + 'me/avatar/pick'
+
+    return this.authHttp.post<{ avatar: Avatar }>(url, avatarForm)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  signup (userCreate: UserRegister) {
+    return this.authHttp.post(UserService.BASE_USERS_URL + 'register', userCreate)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  getMyVideoQuotaUsed () {
+    const url = UserService.BASE_USERS_URL + 'me/video-quota-used'
+
+    return this.authHttp.get<UserVideoQuota>(url)
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  askResetPassword (email: string) {
+    const url = UserService.BASE_USERS_URL + '/ask-reset-password'
+
+    return this.authHttp.post(url, { email })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  resetPassword (userId: number, verificationString: string, password: string) {
+    const url = `${UserService.BASE_USERS_URL}/${userId}/reset-password`
+    const body = {
+      verificationString,
+      password
+    }
+
+    return this.authHttp.post(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  verifyEmail (userId: number, verificationString: string, isPendingEmail: boolean) {
+    const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email`
+    const body = {
+      verificationString,
+      isPendingEmail
+    }
+
+    return this.authHttp.post(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  askSendVerifyEmail (email: string) {
+    const url = UserService.BASE_USERS_URL + '/ask-send-verify-email'
+
+    return this.authHttp.post(url, { email })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  autocomplete (search: string): Observable<string[]> {
+    const url = UserService.BASE_USERS_URL + 'autocomplete'
+    const params = new HttpParams().append('search', search)
+
+    return this.authHttp
+      .get<string[]>(url, { params })
+      .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  getNewUsername (oldDisplayName: string, newDisplayName: string, currentUsername: string) {
+    // Don't update display name, the user seems to have changed it
+    if (this.displayNameToUsername(oldDisplayName) !== currentUsername) return currentUsername
+
+    return this.displayNameToUsername(newDisplayName)
+  }
+
+  displayNameToUsername (displayName: string) {
+    if (!displayName) return ''
+
+    return displayName
+      .toLowerCase()
+      .replace(/\s/g, '_')
+      .replace(/[^a-z0-9_.]/g, '')
+  }
+
+  /* ###### Admin methods ###### */
+
+  addUser (userCreate: UserCreate) {
+    return this.authHttp.post(UserService.BASE_USERS_URL, userCreate)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateUser (userId: number, userUpdate: UserUpdate) {
+    return this.authHttp.put(UserService.BASE_USERS_URL + userId, userUpdate)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  updateUsers (users: UserServerModel[], userUpdate: UserUpdate) {
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.put(UserService.BASE_USERS_URL + u.id, userUpdate)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
+  getUserWithCache (userId: number) {
+    if (!this.userCache[userId]) {
+      this.userCache[ userId ] = this.getUser(userId).pipe(shareReplay())
+    }
+
+    return this.userCache[userId]
+  }
+
+  getUser (userId: number, withStats = false) {
+    const params = new HttpParams().append('withStats', withStats + '')
+    return this.authHttp.get<UserServerModel>(UserService.BASE_USERS_URL + userId, { params })
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  getAnonymousUser () {
+    let videoLanguages: string[]
+
+    try {
+      videoLanguages = JSON.parse(this.localStorageService.getItem(User.KEYS.VIDEO_LANGUAGES))
+    } catch (err) {
+      videoLanguages = null
+      console.error('Cannot parse desired video languages from localStorage.', err)
+    }
+
+    return new User({
+      // local storage keys
+      nsfwPolicy: this.localStorageService.getItem(User.KEYS.NSFW_POLICY) as NSFWPolicyType,
+      webTorrentEnabled: this.localStorageService.getItem(User.KEYS.WEBTORRENT_ENABLED) !== 'false',
+      theme: this.localStorageService.getItem(User.KEYS.THEME) || 'instance-default',
+      videoLanguages,
+
+      autoPlayNextVideoPlaylist: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST) !== 'false',
+      autoPlayVideo: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO) === 'true',
+
+      // session storage keys
+      autoPlayNextVideo: this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+    })
+  }
+
+  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<UserServerModel>> {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (search) params = params.append('search', search)
+
+    return this.authHttp.get<ResultList<UserServerModel>>(UserService.BASE_USERS_URL, { params })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  removeUser (usersArg: UserServerModel | UserServerModel[]) {
+    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
+
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.delete(UserService.BASE_USERS_URL + u.id)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
+  banUsers (usersArg: UserServerModel | UserServerModel[], reason?: string) {
+    const body = reason ? { reason } : {}
+    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
+
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.post(UserService.BASE_USERS_URL + u.id + '/block', body)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
+  unbanUsers (usersArg: UserServerModel | UserServerModel[]) {
+    const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
+
+    return from(users)
+      .pipe(
+        concatMap(u => this.authHttp.post(UserService.BASE_USERS_URL + u.id + '/unblock', {})),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
+  getAnonymousOrLoggedUser () {
+    if (!this.authService.isLoggedIn()) {
+      return of(this.getAnonymousUser())
+    }
+
+    return this.authService.userInformationLoaded
+        .pipe(
+          first(),
+          map(() => this.authService.getUser())
+        )
+  }
+
+  private formatUser (user: UserServerModel) {
+    let videoQuota
+    if (user.videoQuota === -1) {
+      videoQuota = this.i18n('Unlimited')
+    } else {
+      videoQuota = this.bytesPipe.transform(user.videoQuota, 0)
+    }
+
+    const videoQuotaUsed = this.bytesPipe.transform(user.videoQuotaUsed, 0)
+
+    const roleLabels: { [ id in UserRole ]: string } = {
+      [UserRole.USER]: this.i18n('User'),
+      [UserRole.ADMINISTRATOR]: this.i18n('Administrator'),
+      [UserRole.MODERATOR]: this.i18n('Moderator')
+    }
+
+    return Object.assign(user, {
+      roleLabel: roleLabels[user.role],
+      videoQuota,
+      videoQuotaUsed
+    })
+  }
+}
diff --git a/client/src/app/core/wrappers/index.ts b/client/src/app/core/wrappers/index.ts
new file mode 100644
index 000000000..d82b70070
--- /dev/null
+++ b/client/src/app/core/wrappers/index.ts
@@ -0,0 +1,2 @@
+export * from './screen.service'
+export * from './storage.service'
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
new file mode 100644
index 000000000..a69fad31d
--- /dev/null
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core'
+
+@Injectable()
+export class ScreenService {
+  private windowInnerWidth: number
+  private lastFunctionCallTime: number
+  private cacheForMs = 500
+
+  constructor () {
+    this.refreshWindowInnerWidth()
+  }
+
+  isInSmallView (marginLeft = 0) {
+    if (marginLeft > 0) {
+      const contentWidth = this.getWindowInnerWidth() - marginLeft
+      return contentWidth < 800
+    }
+
+    return this.getWindowInnerWidth() < 800
+  }
+
+  isInMediumView () {
+    return this.getWindowInnerWidth() < 1100
+  }
+
+  isInMobileView () {
+    return this.getWindowInnerWidth() < 500
+  }
+
+  isInTouchScreen () {
+    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+  }
+
+  getNumberOfAvailableMiniatures () {
+    const screenWidth = this.getWindowInnerWidth()
+
+    let numberOfVideos = 1
+
+    if (screenWidth > 1850) numberOfVideos = 7
+    else if (screenWidth > 1600) numberOfVideos = 6
+    else if (screenWidth > 1370) numberOfVideos = 5
+    else if (screenWidth > 1100) numberOfVideos = 4
+    else if (screenWidth > 850) numberOfVideos = 3
+
+    return numberOfVideos
+  }
+
+  // Cache window inner width, because it's an expensive call
+  getWindowInnerWidth () {
+    if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
+
+    return this.windowInnerWidth
+  }
+
+  private refreshWindowInnerWidth () {
+    this.lastFunctionCallTime = new Date().getTime()
+
+    this.windowInnerWidth = window.innerWidth
+  }
+
+  private cacheWindowInnerWidthExpired () {
+    if (!this.lastFunctionCallTime) return true
+
+    return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
+  }
+}
diff --git a/client/src/app/core/wrappers/storage.service.ts b/client/src/app/core/wrappers/storage.service.ts
new file mode 100644
index 000000000..9a60b9785
--- /dev/null
+++ b/client/src/app/core/wrappers/storage.service.ts
@@ -0,0 +1,37 @@
+import { Observable, Subject } from 'rxjs'
+import { filter } from 'rxjs/operators'
+import { Injectable } from '@angular/core'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@app/helpers'
+
+abstract class StorageService {
+  protected instance: Storage
+  static storageSub = new Subject<string>()
+
+  watch (keys?: string[]): Observable<string> {
+    return StorageService.storageSub.asObservable().pipe(filter(val => keys ? keys.includes(val) : true))
+  }
+
+  getItem (key: string) {
+    return this.instance.getItem(key)
+  }
+
+  setItem (key: string, data: any, notifyOfUpdate = true) {
+    this.instance.setItem(key, data)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+
+  removeItem (key: string, notifyOfUpdate = true) {
+    this.instance.removeItem(key)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+}
+
+@Injectable()
+export class LocalStorageService extends StorageService {
+  protected instance: Storage = peertubeLocalStorage
+}
+
+@Injectable()
+export class SessionStorageService extends StorageService {
+  protected instance: Storage = peertubeSessionStorage
+}