Introduce user autocomplete component for oauth page

app/views/oauth/applications/_form.html.erb

@@ -59,7 +59,13 @@ See docs/COPYRIGHT.rdoc for more details.
     </p>
 
     <div class="form--field">
-      <%= f.text_field :client_credentials_user_id, size: 25, container_class: '-middle' %>
+      <label class="form--label"> <%= t('doorkeeper.application.client_credentials_user_id') %>
+      </label>
+      <div class="form--field-container -visible-overflow">
+        <div class="form--text-field-container -middle">
+          <user-autocompleter></user-autocompleter>
+        </div>
+      </div>
       <p class="form--field-instructions">
         <%= t('oauth.application.instructions.client_credential_user_id') %>
         <br/>

frontend/src/app/modules/common/autocomplete/user-autocompleter.component.ts

@@ -0,0 +1,67 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+// ++
+
+import {Component, ElementRef, OnInit} from '@angular/core';
+import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
+import {HalResourceService} from "core-app/modules/hal/services/hal-resource.service";
+import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
+
+@Component({
+  template: `
+    <ng-select [items]="options"
+               bindLabel="name"
+               bindValue="id"
+               [virtualScroll]="true">
+    </ng-select>
+  `,
+  selector: 'user-autocompleter'
+})
+export class UserAutocompleterComponent implements OnInit {
+  public options:any[];
+  public url:string;
+
+  constructor(protected halResourceService:HalResourceService,
+              readonly pathHelper:PathHelperService) {
+  }
+
+  ngOnInit() {
+    this.url = this.pathHelper.api.v3.users.path;
+    this.setAvailableUsers(this.url);
+  }
+
+  private setAvailableUsers(url:string) {
+    this.halResourceService.get(url)
+      .subscribe(res => {
+        this.options = res.elements.map((el:any) => {
+          return {name: el.name, id: el.id};
+        });
+      });
+  }
+}
+
+DynamicBootstrapper.register({ selector: 'user-autocompleter', cls: UserAutocompleterComponent  });

frontend/src/app/modules/common/openproject-common.module.ts

@@ -71,6 +71,7 @@ import {PortalModule} from "@angular/cdk/portal";
 import {CommonModule} from "@angular/common";
 import {CollapsibleSectionComponent} from "core-app/modules/common/collapsible-section/collapsible-section.component";
 import {NgSelectModule} from "@ng-select/ng-select";
+import {UserAutocompleterComponent} from "app/modules/common/autocomplete/user-autocompleter.component";
 
 export function bootstrapModule(injector:Injector) {
   return () => {
@@ -95,6 +96,7 @@ export function bootstrapModule(injector:Injector) {
     PortalModule,
     // Our own A11y module
     OpenprojectAccessibilityModule,
+    NgSelectModule,
   ],
   exports: [
     // Re-export all commonly used
@@ -142,6 +144,7 @@ export function bootstrapModule(injector:Injector) {
 
     // Autocompleter Component
     NgSelectModule,
+    UserAutocompleterComponent,
   ],
   declarations: [
     OpDatePickerComponent,
@@ -184,6 +187,8 @@ export function bootstrapModule(injector:Injector) {
 
     // Zen mode button
     ZenModeButtonComponent,
+
+    UserAutocompleterComponent,
   ],
   entryComponents: [
     OpDateTimeComponent,
@@ -198,6 +203,7 @@ export function bootstrapModule(injector:Injector) {
     OPContextMenuComponent,
     ZenModeButtonComponent,
     CollapsibleSectionComponent,
+    UserAutocompleterComponent,
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: bootstrapModule, deps: [Injector], multi: true },