Namings improved.

src/Squidex/app/features/administration/guards/unset-user.guard.spec.ts

@@ -21,7 +21,7 @@ describe('UnsetUserGuard', () => {
     });
 
     it('should unset user', () => {
-        usersState.setup(x => x.selectUser(null))
+        usersState.setup(x => x.select(null))
             .returns(() => Observable.of(null));
 
         let result: boolean;
@@ -32,6 +32,6 @@ describe('UnsetUserGuard', () => {
 
         expect(result!).toBeTruthy();
 
-        usersState.verify(x => x.selectUser(null), Times.once());
+        usersState.verify(x => x.select(null), Times.once());
     });
 });

src/Squidex/app/features/administration/guards/unset-user.guard.ts

@@ -19,6 +19,6 @@ export class UnsetUserGuard implements CanActivate {
     }
 
     public canActivate(): Observable<boolean> {
-        return this.usersState.selectUser(null).map(u => u === null);
+        return this.usersState.select(null).map(u => u === null);
     }
 }

src/Squidex/app/features/administration/guards/user-must-exist.guard.spec.ts

@@ -31,7 +31,7 @@ describe('UserMustExistGuard', () => {
     });
 
     it('should load user and return true when found', () => {
-        usersState.setup(x => x.selectUser('123'))
+        usersState.setup(x => x.select('123'))
             .returns(() => Observable.of(<UserDto>{}));
 
         let result: boolean;
@@ -42,11 +42,11 @@ describe('UserMustExistGuard', () => {
 
         expect(result!).toBeTruthy();
 
-        usersState.verify(x => x.selectUser('123'), Times.once());
+        usersState.verify(x => x.select('123'), Times.once());
     });
 
     it('should load user and return false when not found', () => {
-        usersState.setup(x => x.selectUser('123'))
+        usersState.setup(x => x.select('123'))
             .returns(() => Observable.of(null));
 
         let result: boolean;

src/Squidex/app/features/administration/guards/user-must-exist.guard.ts

@@ -25,7 +25,7 @@ export class UserMustExistGuard implements CanActivate {
         const userId = allParams(route)['userId'];
 
         const result =
-            this.usersState.selectUser(userId)
+            this.usersState.select(userId)
                 .do(dto => {
                     if (!dto) {
                         this.router.navigate(['/404']);

src/Squidex/app/features/administration/pages/users/user-page.component.ts

@@ -50,14 +50,14 @@ export class UserPageComponent implements OnDestroy, OnInit {
 
         if (value) {
             if (this.user) {
-                this.usersState.updateUser(this.user, value)
+                this.usersState.update(this.user, value)
                     .subscribe(user => {
                         this.userForm.submitCompleted();
                     }, error => {
                         this.userForm.submitFailed(error);
                     });
             } else {
-                this.usersState.createUser(value)
+                this.usersState.create(value)
                     .subscribe(user => {
                         this.back();
                     }, error => {

src/Squidex/app/features/administration/pages/users/users-page.component.ts

@@ -37,15 +37,15 @@ export class UsersPageComponent implements OnInit {
     }
 
     public load(notify = false) {
-        this.usersState.loadUsers(notify).onErrorResumeNext().subscribe();
+        this.usersState.load(notify).onErrorResumeNext().subscribe();
     }
 
     public lock(user: UserDto) {
-        this.usersState.lockUser(user).onErrorResumeNext().subscribe();
+        this.usersState.lock(user).onErrorResumeNext().subscribe();
     }
 
     public unlock(user: UserDto) {
-        this.usersState.unlockUser(user).onErrorResumeNext().subscribe();
+        this.usersState.unlock(user).onErrorResumeNext().subscribe();
     }
 
     public goPrev() {

src/Squidex/app/features/administration/state/users.state.spec.ts

@@ -47,7 +47,7 @@ describe('UsersState', () => {
             .returns(() => Observable.of(new UsersDto(200, oldUsers)));
 
         usersState = new UsersState(authService.object, dialogs.object, usersService.object);
-        usersState.loadUsers().subscribe();
+        usersState.load().subscribe();
     });
 
     it('should load users', () => {
@@ -58,7 +58,7 @@ describe('UsersState', () => {
     });
 
     it('should replace selected user when reloading', () => {
-        usersState.selectUser('id1').subscribe();
+        usersState.select('id1').subscribe();
 
         const newUsers = [
             new UserDto('id1', 'mail1@mail.de_new', 'name1_new', false),
@@ -68,19 +68,19 @@ describe('UsersState', () => {
         usersService.setup(x => x.getUsers(10, 0, undefined))
             .returns(() => Observable.of(new UsersDto(200, newUsers)));
 
-        usersState.loadUsers().subscribe();
+        usersState.load().subscribe();
 
         expect(usersState.snapshot.selectedUser).toBe(newUsers[0]);
     });
 
     it('should raise notification on load when notify is true', () => {
-        usersState.loadUsers(true).subscribe();
+        usersState.load(true).subscribe();
 
         dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once());
     });
 
     it('should mark as current user when selected user equals to profile', () => {
-        usersState.selectUser('id2').subscribe();
+        usersState.select('id2').subscribe();
 
         expect(usersState.snapshot.isCurrentUser).toBeTruthy();
     });
@@ -88,7 +88,7 @@ describe('UsersState', () => {
     it('should not load user when already loaded', () => {
         let selectedUser: UserDto;
 
-        usersState.selectUser('id1').subscribe(x => {
+        usersState.select('id1').subscribe(x => {
             selectedUser = x!;
         });
 
@@ -104,7 +104,7 @@ describe('UsersState', () => {
 
         let selectedUser: UserDto;
 
-        usersState.selectUser('id3').subscribe(x => {
+        usersState.select('id3').subscribe(x => {
             selectedUser = x!;
         });
 
@@ -115,7 +115,7 @@ describe('UsersState', () => {
     it('should return null when unselecting user', () => {
         let selectedUser: UserDto;
 
-        usersState.selectUser(null).subscribe(x => {
+        usersState.select(null).subscribe(x => {
             selectedUser = x!;
         });
 
@@ -131,7 +131,7 @@ describe('UsersState', () => {
 
         let selectedUser: UserDto;
 
-        usersState.selectUser('unknown').subscribe(x => {
+        usersState.select('unknown').subscribe(x => {
             selectedUser = x!;
         }).unsubscribe();
 
@@ -143,8 +143,8 @@ describe('UsersState', () => {
         usersService.setup(x => x.lockUser('id1'))
             .returns(() => Observable.of({}));
 
-        usersState.selectUser('id1').subscribe();
+        usersState.select('id1').subscribe();
-        usersState.lockUser(oldUsers[0]).subscribe();
+        usersState.lock(oldUsers[0]).subscribe();
 
         expect(usersState.snapshot.users.at(0).isLocked).toBeTruthy();
         expect(usersState.snapshot.selectedUser).toBe(usersState.snapshot.users.at(0));
@@ -154,8 +154,8 @@ describe('UsersState', () => {
         usersService.setup(x => x.unlockUser('id2'))
             .returns(() => Observable.of({}));
 
-        usersState.selectUser('id2').subscribe();
+        usersState.select('id2').subscribe();
-        usersState.unlockUser(oldUsers[1]).subscribe();
+        usersState.unlock(oldUsers[1]).subscribe();
 
         expect(usersState.snapshot.users.at(1).isLocked).toBeFalsy();
         expect(usersState.snapshot.selectedUser).toBe(usersState.snapshot.users.at(1));
@@ -167,8 +167,8 @@ describe('UsersState', () => {
         usersService.setup(x => x.putUser('id1', request))
             .returns(() => Observable.of({}));
 
-        usersState.selectUser('id1').subscribe();
+        usersState.select('id1').subscribe();
-        usersState.updateUser(oldUsers[0], request).subscribe();
+        usersState.update(oldUsers[0], request).subscribe();
 
         expect(usersState.snapshot.users.at(0).email).toEqual('new@mail.com');
         expect(usersState.snapshot.users.at(0).displayName).toEqual('New');
@@ -181,7 +181,7 @@ describe('UsersState', () => {
         usersService.setup(x => x.postUser(request))
             .returns(() => Observable.of(newUser));
 
-        usersState.createUser(request).subscribe();
+        usersState.create(request).subscribe();
 
         expect(usersState.snapshot.users.at(0)).toBe(newUser);
         expect(usersState.snapshot.usersPager.numberOfItems).toBe(201);

src/Squidex/app/features/administration/state/users.state.ts

@@ -106,7 +106,7 @@ export class UsersState extends State<Snapshot> {
         super({ users: ImmutableArray.empty(), usersPager: new Pager(0) });
     }
 
-    public selectUser(id: string | null): Observable<UserDto | null> {
+    public select(id: string | null): Observable<UserDto | null> {
         return this.loadUser(id)
             .do(selectedUser => {
                 const isCurrentUser = id === this.authState.user!.id;
@@ -129,7 +129,7 @@ export class UsersState extends State<Snapshot> {
                 });
     }
 
-    public loadUsers(notify = false): Observable<any> {
+    public load(notify = false): Observable<any> {
         return this.usersService.getUsers(this.snapshot.usersPager.pageSize, this.snapshot.usersPager.skip, this.snapshot.usersQuery)
             .do(dtos => {
                 if (notify) {
@@ -156,7 +156,7 @@ export class UsersState extends State<Snapshot> {
             .notify(this.dialogs);
     }
 
-    public createUser(request: CreateUserDto): Observable<UserDto> {
+    public create(request: CreateUserDto): Observable<UserDto> {
         return this.usersService.postUser(request)
             .do(dto => {
                 this.next(s => {
@@ -168,7 +168,7 @@ export class UsersState extends State<Snapshot> {
             });
     }
 
-    public updateUser(user: UserDto, request: UpdateUserDto): Observable<any> {
+    public update(user: UserDto, request: UpdateUserDto): Observable<any> {
         return this.usersService.putUser(user.id, request)
             .do(() => {
                 this.dialogs.notifyInfo('User saved successsfull');
@@ -177,7 +177,7 @@ export class UsersState extends State<Snapshot> {
             });
     }
 
-    public lockUser(user: UserDto): Observable<any> {
+    public lock(user: UserDto): Observable<any> {
         return this.usersService.lockUser(user.id)
             .do(() => {
                 this.replaceUser(setLocked(user, true));
@@ -185,7 +185,7 @@ export class UsersState extends State<Snapshot> {
             .notify(this.dialogs);
     }
 
-    public unlockUser(user: UserDto): Observable<any> {
+    public unlock(user: UserDto): Observable<any> {
         return this.usersService.unlockUser(user.id)
             .do(() => {
                 this.replaceUser(setLocked(user, false));
@@ -196,19 +196,19 @@ export class UsersState extends State<Snapshot> {
     public search(query: string): Observable<any> {
         this.next(s => ({ ...s, usersPager: new Pager(0), usersQuery: query }));
 
-        return this.loadUsers();
+        return this.load();
     }
 
     public goNext(): Observable<any> {
         this.next(s => ({ ...s, usersPager: s.usersPager.goNext() }));
 
-        return this.loadUsers();
+        return this.load();
     }
 
     public goPrev(): Observable<any> {
         this.next(s => ({ ...s, usersPager: s.usersPager.goPrev() }));
 
-        return this.loadUsers();
+        return this.load();
     }
 
     private replaceUser(user: UserDto) {

src/Squidex/app/features/assets/pages/assets-page.component.ts

@@ -31,7 +31,7 @@ export class AssetsPageComponent implements OnInit {
     }
 
     public load(notify = false) {
-        this.assetsState.loadAssets(notify).onErrorResumeNext().subscribe();
+        this.assetsState.load(notify).onErrorResumeNext().subscribe();
     }
 
     public search() {

src/Squidex/app/features/content/pages/schemas/schemas-page.component.ts

@@ -39,7 +39,7 @@ export class SchemasPageComponent implements OnInit {
     }
 
     public ngOnInit() {
-        this.schemasState.loadSchemas().onErrorResumeNext().subscribe();
+        this.schemasState.load().onErrorResumeNext().subscribe();
     }
 
     public trackBySchema(index: number, schema: SchemaDto) {

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.ts

@@ -73,7 +73,7 @@ export class SchemasPageComponent implements OnDestroy, OnInit {
                 }
             });
 
-        this.schemasState.loadSchemas().onErrorResumeNext().subscribe();
+        this.schemasState.load().onErrorResumeNext().subscribe();
     }
 
     public onSchemaCreated(schema: SchemaDto) {

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -2,7 +2,7 @@
     <div class="row no-gutters">
         <div class="col">
             <div class="client-header">
-                <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm" (ngSubmit)="renaming.emit(renameForm.controls.name.value)">
+                <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm" (ngSubmit)="rename()">
                     <div class="form-group mr-1">
                         <sqx-control-errors for="name"></sqx-control-errors>
                         
@@ -32,7 +32,7 @@
         </div>
         <div class="col col-auto cell-actions">
             <button type="button" class="btn btn-link btn-danger"
-                (sqxConfirmClick)="revoking.emit()"
+                (sqxConfirmClick)="revoke()"
                 confirmTitle="Revoke client" 
                 confirmText="Do you really want to revoke the client?">
                 <i class="icon-bin2"></i>
@@ -70,7 +70,7 @@
             Permission:
         </div>
         <div class="col">
-            <select class="form-control" [ngModel]="client.permission" (ngModelChange)="updating.emit($event)">
+            <select class="form-control" [ngModel]="client.permission" (ngModelChange)="updatePermission($event)">
                 <option *ngFor="let permission of clientPermissions" [ngValue]="permission">{{permission}}</option>
             </select>
         </div>

src/Squidex/app/features/settings/pages/clients/client.component.ts

@@ -5,16 +5,18 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 
 import {
     AccessTokenDto,
     AppClientDto,
     AppClientsService,
+    AppsState,
+    ClientsState,
     DialogService,
     ModalView,
-    AppsState
+    UpdateAppClientDto
 } from '@app/shared';
 
 const ESCAPE_KEY = 27;
@@ -25,15 +27,6 @@ const ESCAPE_KEY = 27;
     templateUrl: './client.component.html'
 })
 export class ClientComponent {
-    @Output()
-    public renaming = new EventEmitter<string>();
-
-    @Output()
-    public revoking = new EventEmitter();
-
-    @Output()
-    public updating = new EventEmitter<boolean>();
-
     @Input()
     public client: AppClientDto;
 
@@ -60,11 +53,24 @@ export class ClientComponent {
     constructor(
         public readonly appsState: AppsState,
         private readonly appClientsService: AppClientsService,
+        private readonly clientsState: ClientsState,
         private readonly dialogs: DialogService,
         private readonly formBuilder: FormBuilder
     ) {
     }
 
+    public revoke() {
+        this.clientsState.revoke(this.client).onErrorResumeNext().subscribe();
+    }
+
+    public updatePermission(permission: string) {
+        this.clientsState.update(this.client, new UpdateAppClientDto(undefined, permission)).onErrorResumeNext().subscribe();
+    }
+
+    public rename() {
+        this.clientsState.update(this.client, new UpdateAppClientDto(this.renameForm.controls['name'].value)).onErrorResumeNext().subscribe();
+    }
+
     public cancelRename() {
         this.isRenaming = false;
     }

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -6,28 +6,24 @@
     </ng-container>
     
     <ng-container content>
-        <div class="table-items-row table-items-row-empty" *ngIf="appClients && appClients.clients.length === 0">
+        <ng-container *ngIf="clientsState.clients | async; let clients">
+            <div class="table-items-row table-items-row-empty" *ngIf="clients.length === 0">
                 No client created yet.
             </div>
     
-        <ng-container *ngIf="appClients">
+            <sqx-client *ngFor="let client of clients; trackBy: trackByClient" [client]="client"></sqx-client>
-            <sqx-client *ngFor="let client of appClients.clients" [client]="client"
-                (updating)="updateClient(client, $event)"
-                (renaming)="renameClient(client, $event)" 
-                (revoking)="revokeClient(client)">
-            </sqx-client>
         </ng-container>
 
-        <div class="table-items-footer" *ngIf="appClients">
+        <div class="table-items-footer" *ngIf="clientsState.isLoaded | async">
-            <form [formGroup]="addClientForm" (ngSubmit)="attachClient()">
+            <form [formGroup]="addClientForm.form" (ngSubmit)="attachClient()">
                 <div class="row no-gutters">
                     <div class="col">
-                        <sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
+                        <sqx-control-errors for="name" [submitted]="addClientForm.submitted | async"></sqx-control-errors>
                             
                         <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" autocomplete="off" sqxLowerCaseInput />
                     </div>
                     <div class="col col-auto pl-1">
-                        <button type="submit" class="btn btn-success" [disabled]="!hasName">Add Client</button>
+                        <button type="submit" class="btn btn-success" [disabled]="addClientForm.hasNoName | async">Add Client</button>
                     </div>
                     <div class="col col-auto pl-1">
                         <button type="reset" class="btn btn-secondary" (click)="cancelAttachClient()">Cancel</button>

src/Squidex/app/features/settings/pages/clients/clients-page.component.ts

@@ -6,17 +6,14 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 
 import {
     AppClientDto,
-    AppClientsDto,
-    AppClientsService,
     AppsState,
-    CreateAppClientDto,
+    AttachClientForm,
-    DialogService,
+    ClientsState,
-    UpdateAppClientDto,
+    CreateAppClientDto
-    ValidatorsEx
 } from '@app/shared';
 
 @Component({
@@ -25,106 +22,39 @@ import {
     templateUrl: './clients-page.component.html'
 })
 export class ClientsPageComponent implements OnInit {
-    public appClients: AppClientsDto;
+    public addClientForm = new AttachClientForm(this.formBuilder);
-
-    public addClientFormSubmitted = false;
-    public addClientForm =
-        this.formBuilder.group({
-            name: ['',
-                [
-                    Validators.maxLength(40),
-                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
-                ]
-            ]
-        });
-
-    public get hasName() {
-        return this.addClientForm.controls['name'].value && this.addClientForm.controls['name'].value.length > 0;
-    }
 
     constructor(
         public readonly appsState: AppsState,
-        private readonly appClientsService: AppClientsService,
+        private readonly clientsState: ClientsState,
-        private readonly dialogs: DialogService,
         private readonly formBuilder: FormBuilder
     ) {
     }
 
     public ngOnInit() {
-        this.load();
+        this.clientsState.load().onErrorResumeNext().subscribe();
-    }
-
-    public load() {
-        this.appClientsService.getClients(this.appsState.appName)
-            .subscribe(dtos => {
-                this.updateClients(dtos);
-            }, error => {
-                this.dialogs.notifyError(error);
-            });
-    }
-
-    public revokeClient(client: AppClientDto) {
-        this.appClientsService.deleteClient(this.appsState.appName, client.id, this.appClients.version)
-            .subscribe(dto => {
-                this.updateClients(this.appClients.removeClient(client, dto.version));
-            }, error => {
-                this.dialogs.notifyError(error);
-            });
-    }
-
-    public renameClient(client: AppClientDto, name: string) {
-        const requestDto = new UpdateAppClientDto(name);
-
-        this.appClientsService.updateClient(this.appsState.appName, client.id, requestDto, this.appClients.version)
-            .subscribe(dto => {
-                this.updateClients(this.appClients.updateClient(client.rename(name), dto.version));
-            }, error => {
-                this.dialogs.notifyError(error);
-            });
-    }
-
-    public updateClient(client: AppClientDto, permission: string) {
-        const requestDto = new UpdateAppClientDto(undefined, permission);
-
-        this.appClientsService.updateClient(this.appsState.appName, client.id, requestDto, this.appClients.version)
-            .subscribe(dto => {
-                this.updateClients(this.appClients.updateClient(client.update(permission), dto.version));
-            }, error => {
-                this.dialogs.notifyError(error);
-            });
     }
 
     public attachClient() {
-        this.addClientFormSubmitted = true;
+        const value = this.addClientForm.submit();
-
-        if (this.addClientForm.valid) {
-            this.addClientForm.disable();
 
-            const requestDto = new CreateAppClientDto(this.addClientForm.controls['name'].value);
+        if (value) {
+            const requestDto = new CreateAppClientDto(value.name);
 
-            this.appClientsService.postClient(this.appsState.appName, requestDto, this.appClients.version)
+            this.clientsState.attach(requestDto).onErrorResumeNext()
-                .subscribe(dto => {
+                .subscribe(() => {
-                    this.updateClients(this.appClients.addClient(dto.payload, dto.version));
+                    this.addClientForm.submitCompleted();
-                    this.resetClientForm();
                 }, error => {
-                    this.dialogs.notifyError(error);
+                    this.addClientForm.submitFailed(error);
-
-                    this.resetClientForm();
                 });
         }
     }
 
     public cancelAttachClient() {
-        this.resetClientForm();
+        this.addClientForm.submitCompleted();
-    }
-
-    private resetClientForm() {
-        this.addClientFormSubmitted = false;
-        this.addClientForm.enable();
-        this.addClientForm.reset();
     }
 
-    private updateClients(appClients: AppClientsDto) {
+    public trackByClient(index: number, item: AppClientDto) {
-        this.appClients = appClients;
+        return item.id;
     }
 }

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -21,12 +21,12 @@
 							<span class="user-name table-cell">{{contributor.contributorId | sqxUserName}}</span>
 						</td>
 						<td class="cell-time">
-							<select class="form-control" [ngModel]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="userId === contributor.contributorId">
+							<select class="form-control" [ngModel]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="authState.user?.id === contributor.contributorId">
 								<option *ngFor="let permission of usersPermissions" [ngValue]="permission">{{permission}}</option>
 							</select>
 						</td>
 						<td class="cell-actions">
-							<button *ngIf="ctx.userId !== contributor.contributorId" type="button" class="btn btn-link btn-danger" (click)="removeContributor(contributor)">
+							<button *ngIf="authState.user?.id !== contributor.contributorId" type="button" class="btn btn-link btn-danger" (click)="removeContributor(contributor)">
 								<i class="icon-bin2"></i>
 							</button>
 						</td>

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts

@@ -14,6 +14,7 @@ import {
     AppContributorsDto,
     AppContributorsService,
     AppsState,
+    AuthService,
     AutocompleteSource,
     DialogService,
     PublicUserDto,
@@ -70,6 +71,7 @@ export class ContributorsPageComponent implements OnInit {
 
     constructor(
         public readonly appsState: AppsState,
+        public readonly authState: AuthService,
         private readonly appContributorsService: AppContributorsService,
         private readonly dialogs: DialogService,
         private readonly formBuilder: FormBuilder,

src/Squidex/app/features/settings/pages/more/more-page.component.ts

@@ -24,7 +24,7 @@ export class MorePageComponent {
     }
 
     public archiveApp() {
-        this.appsState.deleteApp(this.appsState.appName)
+        this.appsState.delete(this.appsState.appName)
             .subscribe(() => {
                 this.router.navigate(['/app']);
             }, error => {

src/Squidex/app/shared/components/app-form.component.ts

@@ -45,7 +45,7 @@ export class AppFormComponent {
         if (value) {
             const request = new CreateAppDto(value.name, this.template);
 
-            this.appsStore.createApp(request)
+            this.appsStore.create(request)
                 .subscribe(dto => {
                     this.complete();
                 }, error => {

src/Squidex/app/shared/components/assets-list.component.ts

@@ -41,11 +41,11 @@ export class AssetsListComponent {
     public onAssetLoaded(file: File, asset: AssetDto) {
         this.newFiles = this.newFiles.remove(file);
 
-        this.state.addAsset(asset);
+        this.state.add(asset);
     }
 
     public search() {
-        this.state.loadAssets().onErrorResumeNext().subscribe();
+        this.state.load().onErrorResumeNext().subscribe();
     }
 
     public onAssetDeleting(asset: AssetDto) {

src/Squidex/app/shared/components/assets-selector.component.ts

@@ -39,7 +39,7 @@ export class AssetsSelectorComponent implements OnInit {
     }
 
     public ngOnInit() {
-        this.state.loadAssets(false, true).onErrorResumeNext().subscribe();
+        this.state.load(false, true).onErrorResumeNext().subscribe();
 
         this.assetsFilter.setValue(this.state.snapshot.assetsQuery);
     }

src/Squidex/app/shared/guards/app-must-exist.guard.spec.ts

@@ -33,7 +33,7 @@ describe('AppMustExistGuard', () => {
     });
 
     it('should navigate to 404 page if app is not found', () => {
-        appsState.setup(x => x.selectApp('my-app'))
+        appsState.setup(x => x.select('my-app'))
             .returns(() => Observable.of(null));
 
         let result: boolean;
@@ -44,11 +44,11 @@ describe('AppMustExistGuard', () => {
 
         expect(result!).toBeFalsy();
 
-        appsState.verify(x => x.selectApp('my-app'), Times.once());
+        appsState.verify(x => x.select('my-app'), Times.once());
     });
 
     it('should return true if app is found', () => {
-        appsState.setup(x => x.selectApp('my-app'))
+        appsState.setup(x => x.select('my-app'))
             .returns(() => Observable.of(<any>{}));
 
         let result: boolean;

src/Squidex/app/shared/guards/app-must-exist.guard.ts

@@ -23,7 +23,7 @@ export class AppMustExistGuard implements CanActivate {
         const appName = route.params['appName'];
 
         const result =
-            this.appsState.selectApp(appName)
+            this.appsState.select(appName)
                 .do(dto => {
                     if (!dto) {
                         this.router.navigate(['/404']);

src/Squidex/app/shared/guards/load-apps.guard.spec.ts

@@ -22,7 +22,7 @@ describe('LoadAppsGuard', () => {
     });
 
     it('should load apps', () => {
-        appsState.setup(x => x.loadApps())
+        appsState.setup(x => x.load())
             .returns(() => Observable.of(null));
 
         let result = false;
@@ -33,6 +33,6 @@ describe('LoadAppsGuard', () => {
 
         expect(result).toBeTruthy();
 
-        appsState.verify(x => x.loadApps(), Times.once());
+        appsState.verify(x => x.load(), Times.once());
     });
 });

src/Squidex/app/shared/guards/load-apps.guard.ts

@@ -19,6 +19,6 @@ export class LoadAppsGuard implements CanActivate {
     }
 
     public canActivate(): Observable<boolean> {
-        return this.appsState.loadApps().map(a => true);
+        return this.appsState.load().map(a => true);
     }
 }

src/Squidex/app/shared/guards/schema-must-exist-published.guard.spec.ts

@@ -31,7 +31,7 @@ describe('SchemaMustExistPublishedGuard', () => {
     });
 
     it('should load schema and return true when found', () => {
-        schemasState.setup(x => x.selectSchema('123'))
+        schemasState.setup(x => x.select('123'))
             .returns(() => Observable.of(<SchemaDetailsDto>{ isPublished: true }));
 
         let result: boolean;
@@ -42,11 +42,11 @@ describe('SchemaMustExistPublishedGuard', () => {
 
         expect(result!).toBeTruthy();
 
-        schemasState.verify(x => x.selectSchema('123'), Times.once());
+        schemasState.verify(x => x.select('123'), Times.once());
     });
 
     it('should load schema and return false when not found', () => {
-        schemasState.setup(x => x.selectSchema('123'))
+        schemasState.setup(x => x.select('123'))
         .returns(() => Observable.of(<SchemaDetailsDto>{ isPublished: false }));
 
         let result: boolean;
@@ -61,7 +61,7 @@ describe('SchemaMustExistPublishedGuard', () => {
     });
 
     it('should load schema and return false when not found', () => {
-        schemasState.setup(x => x.selectSchema('123'))
+        schemasState.setup(x => x.select('123'))
             .returns(() => Observable.of(null));
 
         let result: boolean;

src/Squidex/app/shared/guards/schema-must-exist-published.guard.ts

@@ -25,7 +25,7 @@ export class SchemaMustExistPublishedGuard implements CanActivate {
         const schemaName = allParams(route)['schemaName'];
 
         const result =
-            this.schemasState.selectSchema(schemaName)
+            this.schemasState.select(schemaName)
                 .do(dto => {
                     if (!dto || !dto.isPublished) {
                         this.router.navigate(['/404']);

src/Squidex/app/shared/guards/schema-must-exist.guard.spec.ts

@@ -31,7 +31,7 @@ describe('SchemaMustExistGuard', () => {
     });
 
     it('should load schema and return true when found', () => {
-        schemasState.setup(x => x.selectSchema('123'))
+        schemasState.setup(x => x.select('123'))
             .returns(() => Observable.of(<SchemaDetailsDto>{}));
 
         let result: boolean;
@@ -42,11 +42,11 @@ describe('SchemaMustExistGuard', () => {
 
         expect(result!).toBeTruthy();
 
-        schemasState.verify(x => x.selectSchema('123'), Times.once());
+        schemasState.verify(x => x.select('123'), Times.once());
     });
 
     it('should load schema and return false when not found', () => {
-        schemasState.setup(x => x.selectSchema('123'))
+        schemasState.setup(x => x.select('123'))
             .returns(() => Observable.of(null));
 
         let result: boolean;

src/Squidex/app/shared/guards/schema-must-exist.guard.ts

@@ -25,7 +25,7 @@ export class SchemaMustExistGuard implements CanActivate {
         const schemaName = allParams(route)['schemaName'];
 
         const result =
-            this.schemasState.selectSchema(schemaName)
+            this.schemasState.select(schemaName)
                 .do(dto => {
                     if (!dto) {
                         this.router.navigate(['/404']);

src/Squidex/app/shared/guards/unset-app.guard.spec.ts

@@ -22,7 +22,7 @@ describe('UnsetAppGuard', () => {
     });
 
     it('should unselect app', () => {
-        appsState.setup(x => x.selectApp(null))
+        appsState.setup(x => x.select(null))
             .returns(() => Observable.of(null));
 
         let result = false;
@@ -33,6 +33,6 @@ describe('UnsetAppGuard', () => {
 
         expect(result).toBeTruthy();
 
-        appsState.verify(x => x.selectApp(null), Times.once());
+        appsState.verify(x => x.select(null), Times.once());
     });
 });

src/Squidex/app/shared/guards/unset-app.guard.ts

@@ -19,6 +19,6 @@ export class UnsetAppGuard implements CanActivate {
     }
 
     public canActivate(): Observable<boolean> {
-        return this.appsState.selectApp(null).map(a => a === null);
+        return this.appsState.select(null).map(a => a === null);
     }
 }

src/Squidex/app/shared/internal.ts

@@ -40,6 +40,7 @@ export * from './services/users.service';
 
 export * from './state/apps.state';
 export * from './state/assets.state';
+export * from './state/clients.state';
 export * from './state/schemas.state';
 
 export * from './utils/messages';

src/Squidex/app/shared/module.ts

@@ -32,6 +32,7 @@ import {
     AuthInterceptor,
     AuthService,
     BackupsService,
+    ClientsState,
     ContentsService,
     FileIconPipe,
     GeolocationEditorComponent,
@@ -137,6 +138,7 @@ export class SqxSharedModule {
                 AssetsService,
                 AuthService,
                 BackupsService,
+                ClientsState,
                 ContentsService,
                 GraphQlService,
                 HelpService,

src/Squidex/app/shared/services/app-clients.service.spec.ts

@@ -20,54 +20,6 @@ import {
     Version
 } from './../';
 
-describe('AppClientsDto', () => {
-    const client1 = new AppClientDto('1', '1', '1', 'Editor');
-    const client2 = new AppClientDto('2', '2', '1', 'Editor');
-    const client2_new = new AppClientDto('2', '2 New', '1 New', 'Editor');
-    const version = new Version('1');
-    const newVersion = new Version('2');
-
-    it('should update clients when adding client', () => {
-        const clients_1 = new AppClientsDto([client1], version);
-        const clients_2 = clients_1.addClient(client2, newVersion);
-
-        expect(clients_2.clients).toEqual([client1, client2]);
-        expect(clients_2.version).toEqual(newVersion);
-    });
-
-    it('should update clients when removing client', () => {
-        const clients_1 = new AppClientsDto([client1, client2], version);
-        const clients_2 = clients_1.removeClient(client1, newVersion);
-
-        expect(clients_2.clients).toEqual([client2]);
-        expect(clients_2.version).toEqual(newVersion);
-    });
-
-    it('should update clients when updating client', () => {
-        const clients_1 = new AppClientsDto([client1, client2], version);
-        const clients_2 = clients_1.updateClient(client2_new, newVersion);
-
-        expect(clients_2.clients).toEqual([client1, client2_new]);
-        expect(clients_2.version).toEqual(newVersion);
-    });
-});
-
-describe('AppClientDto', () => {
-    it('should update name property when renaming', () => {
-        const client_1 = new AppClientDto('1', 'old-name', 'secret', 'Editor');
-        const client_2 = client_1.rename('new-name');
-
-        expect(client_2.name).toBe('new-name');
-    });
-
-    it('should update isReader property when changing', () => {
-        const client_1 = new AppClientDto('1', 'old-name', 'secret', 'Editor');
-        const client_2 = client_1.update('Developer');
-
-        expect(client_2.permission).toEqual('Developer');
-    });
-});
-
 describe('AppClientsService', () => {
     const version = new Version('1');
 
@@ -155,7 +107,7 @@ describe('AppClientsService', () => {
 
         const dto = new UpdateAppClientDto('Client 1 New');
 
-        appClientsService.updateClient('my-app', 'client1', dto, version).subscribe();
+        appClientsService.putClient('my-app', 'client1', dto, version).subscribe();
 
         const req = httpMock.expectOne('http://service/p/api/apps/my-app/clients/client1');
 

src/Squidex/app/shared/services/app-clients.service.ts

@@ -25,18 +25,6 @@ export class AppClientsDto {
         public readonly version: Version
     ) {
     }
-
-    public addClient(client: AppClientDto, version: Version) {
-        return new AppClientsDto([...this.clients, client], version);
-    }
-
-    public updateClient(client: AppClientDto, version: Version) {
-        return new AppClientsDto(this.clients.map(c => c.id === client.id ? client : c), version);
-    }
-
-    public removeClient(client: AppClientDto, version: Version) {
-        return new AppClientsDto(this.clients.filter(c => c.id !== client.id), version);
-    }
 }
 
 export class AppClientDto {
@@ -47,14 +35,6 @@ export class AppClientDto {
         public readonly permission: string
     ) {
     }
-
-    public rename(name: string): AppClientDto {
-        return new AppClientDto(this.id, name, this.secret, this.permission);
-    }
-
-    public update(permission: string): AppClientDto {
-        return new AppClientDto(this.id, this.name, this.secret, permission);
-    }
 }
 
 export class CreateAppClientDto {
@@ -132,7 +112,7 @@ export class AppClientsService {
                 .pretifyError('Failed to add client. Please reload.');
     }
 
-    public updateClient(appName: string, id: string, dto: UpdateAppClientDto, version: Version): Observable<Versioned<any>> {
+    public putClient(appName: string, id: string, dto: UpdateAppClientDto, version: Version): Observable<Versioned<any>> {
         const url = this.apiUrl.buildUrl(`api/apps/${appName}/clients/${id}`);
 
         return HTTP.putVersioned(this.http, url, dto, version)

src/Squidex/app/shared/state/apps.state.spec.ts

@@ -36,7 +36,7 @@ describe('AppsState', () => {
             .verifiable(Times.once());
 
         appsState = new AppsState(appsService.object);
-        appsState.loadApps().subscribe();
+        appsState.load().subscribe();
     });
 
     it('should load apps', () => {
@@ -52,7 +52,7 @@ describe('AppsState', () => {
             .returns(() => Observable.of(newApp))
             .verifiable(Times.once());
 
-        appsState.createApp(request, now).subscribe();
+        appsState.create(request, now).subscribe();
 
         expect(appsState.snapshot.apps.values).toEqual([newApp, ...oldApps]);
 
@@ -70,11 +70,11 @@ describe('AppsState', () => {
             .returns(() => Observable.of({}))
             .verifiable(Times.once());
 
-        appsState.createApp(request, now).subscribe();
+        appsState.create(request, now).subscribe();
 
         const appsAfterCreate = appsState.snapshot.apps.values;
 
-        appsState.deleteApp(newApp.name).subscribe();
+        appsState.delete(newApp.name).subscribe();
 
         const appsAfterDelete = appsState.snapshot.apps.values;
 
@@ -87,7 +87,7 @@ describe('AppsState', () => {
     it('should select app', () => {
         let selectedApp: AppDto;
 
-        appsState.selectApp(oldApps[0].name).subscribe(x => {
+        appsState.select(oldApps[0].name).subscribe(x => {
             selectedApp = x!;
         }).unsubscribe();
 
@@ -98,7 +98,7 @@ describe('AppsState', () => {
     it('should return null when unselecting app', () => {
         let selectedApp: AppDto;
 
-        appsState.selectApp(null).subscribe(x => {
+        appsState.select(null).subscribe(x => {
             selectedApp = x!;
         }).unsubscribe();
 
@@ -109,7 +109,7 @@ describe('AppsState', () => {
     it('should return null when app to select is not found', () => {
         let selectedApp: AppDto;
 
-        appsState.selectApp('unknown').subscribe(x => {
+        appsState.select('unknown').subscribe(x => {
             selectedApp = x!;
         }).unsubscribe();
 

src/Squidex/app/shared/state/apps.state.ts

@@ -72,7 +72,7 @@ export class AppsState extends State<Snapshot> {
         super({ apps: ImmutableArray.empty(), selectedApp: null });
     }
 
-    public selectApp(name: string | null): Observable<AppDto | null> {
+    public select(name: string | null): Observable<AppDto | null> {
         const observable =
             !name ?
                 Observable.of(null) :
@@ -86,7 +86,7 @@ export class AppsState extends State<Snapshot> {
             });
     }
 
-    public loadApps(): Observable<any> {
+    public load(): Observable<any> {
         return this.appsService.getApps()
             .do(dtos => {
                 this.next(s => {
@@ -95,7 +95,7 @@ export class AppsState extends State<Snapshot> {
             });
     }
 
-    public createApp(request: CreateAppDto, now?: DateTime): Observable<AppDto> {
+    public create(request: CreateAppDto, now?: DateTime): Observable<AppDto> {
         return this.appsService.postApp(request)
             .do(dto => {
                 this.next(s => {
@@ -104,7 +104,7 @@ export class AppsState extends State<Snapshot> {
             });
     }
 
-    public deleteApp(name: string): Observable<any> {
+    public delete(name: string): Observable<any> {
         return this.appsService.deleteApp(name)
             .do(app => {
                 this.next(s => {

src/Squidex/app/shared/state/assets.state.spec.ts

@@ -53,11 +53,11 @@ describe('AssetsState', () => {
             .returns(() => Observable.of(new AssetsDto(200, oldAssets)));
 
         assetsState = new AssetsState(appsState.object, assetsService.object, dialogs.object);
-        assetsState.loadAssets().subscribe();
+        assetsState.load().subscribe();
     });
 
     it('should load assets', () => {
-        assetsState.loadAssets().subscribe();
+        assetsState.load().subscribe();
 
         expect(assetsState.snapshot.assets.values).toEqual(oldAssets);
         expect(assetsState.snapshot.assetsPager.numberOfItems).toEqual(200);
@@ -66,7 +66,7 @@ describe('AssetsState', () => {
     });
 
     it('should not reload when assets assets already loaded', () => {
-        assetsState.loadAssets(false, true).subscribe();
+        assetsState.load(false, true).subscribe();
 
         expect(assetsState.snapshot.assets.values).toEqual(oldAssets);
         expect(assetsState.snapshot.assetsPager.numberOfItems).toEqual(200);
@@ -75,7 +75,7 @@ describe('AssetsState', () => {
     });
 
     it('should raise notification on load when notify is true', () => {
-        assetsState.loadAssets(true).subscribe();
+        assetsState.load(true).subscribe();
 
         dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once());
     });
@@ -83,7 +83,7 @@ describe('AssetsState', () => {
     it('should add asset to snapshot', () => {
         const newAsset = new AssetDto('id3', creator, creator, creation, creation, 'name3', 'type3', 3, 3, 'mime3', true, 0, 0, 'url3', version);
 
-        assetsState.addAsset(newAsset);
+        assetsState.add(newAsset);
 
         expect(assetsState.snapshot.assets.values).toEqual([newAsset, ...oldAssets]);
         expect(assetsState.snapshot.assetsPager.numberOfItems).toBe(201);
@@ -91,7 +91,8 @@ describe('AssetsState', () => {
 
     it('should update asset in snapshot', () => {
         const newAsset = new AssetDto('id1', modifier, modifier, modified, modified, 'name3', 'type3', 3, 3, 'mime3', true, 0, 0, 'url3', version);
-        assetsState.updateAsset(newAsset);
+
+        assetsState.update(newAsset);
 
         const asset_1 = assetsState.snapshot.assets.at(0);
 

src/Squidex/app/shared/state/assets.state.ts

@@ -60,7 +60,7 @@ export class AssetsState extends State<Snapshot> {
         super({ assets: ImmutableArray.empty(), assetsPager: new Pager(0, 0, 30), loaded: false });
     }
 
-    public loadAssets(notify = false, noReload = false): Observable<any> {
+    public load(notify = false, noReload = false): Observable<any> {
         if (this.snapshot.loaded && noReload) {
             return Observable.of({});
         }
@@ -81,7 +81,7 @@ export class AssetsState extends State<Snapshot> {
             .notify(this.dialogs);
     }
 
-    public addAsset(asset: AssetDto) {
+    public add(asset: AssetDto) {
         this.next(s => {
             const assets = s.assets.pushFront(asset);
             const assetsPager = s.assetsPager.incrementCount();
@@ -90,7 +90,7 @@ export class AssetsState extends State<Snapshot> {
         });
     }
 
-    public updateAsset(asset: AssetDto) {
+    public update(asset: AssetDto) {
         this.next(s => {
             const assets = s.assets.replaceBy('id', asset);
 
@@ -114,19 +114,19 @@ export class AssetsState extends State<Snapshot> {
     public search(query: string): Observable<any> {
         this.next(s => ({ ...s, assetsPager: new Pager(0, 0, 30), assetsQuery: query }));
 
-        return this.loadAssets();
+        return this.load();
     }
 
     public goNext(): Observable<any> {
         this.next(s => ({ ...s, assetsPager: s.assetsPager.goNext() }));
 
-        return this.loadAssets();
+        return this.load();
     }
 
     public goPrev(): Observable<any> {
         this.next(s => ({ ...s, assetsPager: s.assetsPager.goPrev() }));
 
-        return this.loadAssets();
+        return this.load();
     }
 
     private get appName() {

src/Squidex/app/shared/state/clients.state.spec.ts

@@ -0,0 +1,99 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Observable } from 'rxjs';
+import { IMock, Mock } from 'typemoq';
+
+import {
+    AppsState,
+    AppClientDto,
+    AppClientsDto,
+    AppClientsService,
+    ClientsState,
+    DialogService,
+    UpdateAppClientDto,
+    Version,
+    Versioned,
+    CreateAppClientDto
+ } from '@app/shared';
+
+describe('ClientsState', () => {
+    const app = 'my-app';
+    const version = new Version('1');
+    const newVersion = new Version('2');
+
+    const oldClients = [
+        new AppClientDto('id1', 'name1', 'secret1', 'Developer'),
+        new AppClientDto('id2', 'name2', 'secret2', 'Developer')
+    ];
+
+    let dialogs: IMock<DialogService>;
+    let appsState: IMock<AppsState>;
+    let clientsService: IMock<AppClientsService>;
+    let clientsState: ClientsState;
+
+    beforeEach(() => {
+        dialogs = Mock.ofType<DialogService>();
+
+        appsState = Mock.ofType<AppsState>();
+
+        appsState.setup(x => x.appName)
+            .returns(() => app);
+
+        clientsService = Mock.ofType<AppClientsService>();
+
+        clientsService.setup(x => x.getClients(app))
+            .returns(() => Observable.of(new AppClientsDto(oldClients, version)));
+
+        clientsState = new ClientsState(clientsService.object, appsState.object, dialogs.object);
+        clientsState.load().subscribe();
+    });
+
+    it('should load clients', () => {
+        expect(clientsState.snapshot.clients.values).toEqual(oldClients);
+        expect(clientsState.snapshot.version).toEqual(version);
+    });
+
+    it('should add client to snapshot', () => {
+        const newClient = new AppClientDto('id3', 'name3', 'secret3', 'Developer');
+
+        const request = new CreateAppClientDto('id3');
+
+        clientsService.setup(x => x.postClient(app, request, version))
+            .returns(() => Observable.of(new Versioned<AppClientDto>(newVersion, newClient)));
+
+        clientsState.attach(request).subscribe();
+
+        expect(clientsState.snapshot.clients.values).toEqual([...oldClients, newClient]);
+        expect(clientsState.snapshot.version).toEqual(newVersion);
+    });
+
+    it('should update client in snapshot', () => {
+        const request = new UpdateAppClientDto('NewName', 'NewPermission');
+
+        clientsService.setup(x => x.putClient(app, oldClients[0].id, request, version))
+            .returns(() => Observable.of(new Versioned<any>(newVersion, {})));
+
+        clientsState.update(oldClients[0], request).subscribe();
+
+        const client_1 = clientsState.snapshot.clients.at(0);
+
+        expect(client_1.name).toBe('NewName');
+        expect(client_1.permission).toBe('NewPermission');
+        expect(clientsState.snapshot.version).toEqual(newVersion);
+    });
+
+    it('should remove client from snapshot', () => {
+        clientsService.setup(x => x.deleteClient(app, oldClients[0].id, version))
+            .returns(() => Observable.of(new Versioned<any>(newVersion, {})));
+
+        clientsState.revoke(oldClients[0]).subscribe();
+
+        expect(clientsState.snapshot.clients.values).toEqual([oldClients[1]]);
+        expect(clientsState.snapshot.version).toEqual(newVersion);
+    });
+});

src/Squidex/app/shared/state/clients.state.ts

@@ -0,0 +1,124 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Injectable } from '@angular/core';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+import '@app/framework/utils/rxjs-extensions';
+
+import {
+    DialogService,
+    ImmutableArray,
+    Form,
+    State,
+    ValidatorsEx,
+    Version
+} from '@app/framework';
+
+import { AppsState } from './apps.state';
+
+import {
+    AppClientDto,
+    AppClientsService,
+    CreateAppClientDto,
+    UpdateAppClientDto
+} from './../services/app-clients.service';
+
+export class AttachClientForm extends Form<FormGroup> {
+    public hasNoName =
+        this.form.controls['name'].valueChanges.startWith('').map(x => !x || x.length === 0);
+
+    constructor(formBuilder: FormBuilder) {
+        super(formBuilder.group({
+            name: ['',
+                [
+                    Validators.maxLength(40),
+                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
+                ]
+            ]
+        }));
+    }
+}
+
+interface Snapshot {
+    clients: ImmutableArray<AppClientDto>;
+
+    isLoaded: boolean;
+
+    version: Version;
+}
+
+@Injectable()
+export class ClientsState extends State<Snapshot> {
+    public clients =
+        this.changes.map(x => x.clients);
+
+    public isLoaded =
+        this.changes.map(x => x.isLoaded);
+
+    constructor(
+        private readonly appClientsService: AppClientsService,
+        private readonly appsState: AppsState,
+        private readonly dialogs: DialogService
+    ) {
+        super({ clients: ImmutableArray.empty(), version: new Version(''), isLoaded: false });
+    }
+
+    public load(): Observable<any> {
+        return this.appClientsService.getClients(this.appName)
+            .do(dtos => {
+                this.next(s => {
+                    return { clients: ImmutableArray.of(dtos.clients), isLoaded: true, version: dtos.version };
+                });
+            })
+            .notify(this.dialogs);
+    }
+
+    public attach(request: CreateAppClientDto): Observable<any> {
+        return this.appClientsService.postClient(this.appName, request, this.snapshot.version)
+            .do(dto => {
+                this.next(s => {
+                    const clients = s.clients.push(dto.payload);
+
+                    return { ...s, clients, version: dto.version };
+                });
+            })
+            .notify(this.dialogs);
+    }
+
+    public revoke(client: AppClientDto): Observable<any> {
+        return this.appClientsService.deleteClient(this.appName, client.id, this.snapshot.version)
+            .do(dto => {
+                this.next(s => {
+                    const clients = s.clients.filter(c => c.id !== client.id);
+
+                    return { ...s, clients, version: dto.version };
+                });
+            })
+            .notify(this.dialogs);
+    }
+
+    public update(client: AppClientDto, request: UpdateAppClientDto): Observable<any> {
+        return this.appClientsService.putClient(this.appName, client.id, request, this.snapshot.version)
+            .do(dto => {
+                this.next(s => {
+                    const clients = s.clients.replaceBy('id', update(client, request));
+
+                    return { ...s, clients, version: dto.version };
+                });
+            })
+            .notify(this.dialogs);
+    }
+
+    private get appName() {
+        return this.appsState.appName;
+    }
+}
+
+const update = (client: AppClientDto, request: UpdateAppClientDto) =>
+    new AppClientDto(client.id, request.name || client.name, client.secret, request.permission || client.permission);

src/Squidex/app/shared/state/schemas.state.spec.ts

@@ -84,7 +84,7 @@ describe('SchemasState', () => {
             .returns(() => Observable.of(schema));
 
         schemasState = new SchemasState(appsState.object, authService.object, dialogs.object, schemasService.object);
-        schemasState.loadSchemas().subscribe();
+        schemasState.load().subscribe();
     });
 
     it('should load schemas', () => {
@@ -94,8 +94,8 @@ describe('SchemasState', () => {
     });
 
     it('should reload schema when already loaded', () => {
-        schemasState.selectSchema('name2').subscribe();
+        schemasState.select('name2').subscribe();
-        schemasState.selectSchema('name2').subscribe();
+        schemasState.select('name2').subscribe();
 
         schemasService.verify(x => x.getSchema(app, 'name2'), Times.exactly(2));
     });
@@ -103,7 +103,7 @@ describe('SchemasState', () => {
     it('should load selected schema when not loaded', () => {
         let selectedSchema: SchemaDetailsDto;
 
-        schemasState.selectSchema('name2').subscribe(x => {
+        schemasState.select('name2').subscribe(x => {
             selectedSchema = x!;
         });
 
@@ -118,7 +118,7 @@ describe('SchemasState', () => {
 
         let selectedSchema: SchemaDetailsDto;
 
-        schemasState.selectSchema('failed').subscribe(x => {
+        schemasState.select('failed').subscribe(x => {
             selectedSchema = x!;
         });
 
@@ -129,7 +129,7 @@ describe('SchemasState', () => {
     it('should return null when unselecting schema', () => {
         let selectedSchema: SchemaDetailsDto;
 
-        schemasState.selectSchema(null).subscribe(x => {
+        schemasState.select(null).subscribe(x => {
             selectedSchema = x!;
         });
 
@@ -165,7 +165,7 @@ describe('SchemasState', () => {
 
     describe('with selection', () => {
         beforeEach(() => {
-            schemasState.selectSchema(schema.name).subscribe();
+            schemasState.select(schema.name).subscribe();
         });
 
         it('should update isPublished property and user info when publishing selected schema', () => {

src/Squidex/app/shared/state/schemas.state.ts

@@ -173,7 +173,7 @@ export class SchemasState extends State<Snapshot> {
         super({ schemas: ImmutableArray.of() });
     }
 
-    public selectSchema(idOrName: string | null): Observable<SchemaDetailsDto | null> {
+    public select(idOrName: string | null): Observable<SchemaDetailsDto | null> {
         return this.loadSchema(idOrName)
             .do(schema => {
                 this.next(s => {
@@ -190,7 +190,7 @@ export class SchemasState extends State<Snapshot> {
                 .catch(() => Observable.of(null));
     }
 
-    public loadSchemas(): Observable<any> {
+    public load(): Observable<any> {
         return this.schemasService.getSchemas(this.appName)
             .do(dtos => {
                 return this.next(s => {