feat(console): Active Directory / LDAP, cleanup idp component routing (#5506)

feat(console): LDAP

console/src/app/modules/providers/ldap-attributes/ldap-attributes.component.html

@@ -0,0 +1,54 @@
+<form [formGroup]="form" class="attribute-form">
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.LDAPIDATTRIBUTE' | translate }}*</cnsl-label>
+    <input cnslInput formControlName="idAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.AVATARURLATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="avatarUrlAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.DISPLAYNAMEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="displayNameAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.EMAILATTRIBUTEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="emailAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.EMAILVERIFIEDATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="emailVerifiedAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.FIRSTNAMEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="firstNameAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.LASTNAMEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="lastNameAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.NICKNAMEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="nickNameAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.PHONEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="phoneAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.PHONEVERIFIEDATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="phoneVerifiedAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.PREFERREDLANGUAGEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="preferredLanguageAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.PREFERREDUSERNAMEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="preferredUsernameAttribute" />
+  </cnsl-form-field>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ 'IDP.PROFILEATTRIBUTE' | translate }}</cnsl-label>
+    <input cnslInput formControlName="profileAttribute" />
+  </cnsl-form-field>
+</form>

console/src/app/modules/providers/ldap-attributes/ldap-attributes.component.scss

@@ -0,0 +1,6 @@
+.attribute-form {
+  display: grid;
+  grid-template-columns: 1fr;
+  max-width: 400px;
+  padding-bottom: 1rem;
+}

console/src/app/modules/providers/ldap-attributes/ldap-attributes.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LDAPAttributesComponent } from './ldap-attributes.component';
+
+describe('LDAPAttributesComponent', () => {
+  let component: LDAPAttributesComponent;
+  let fixture: ComponentFixture<LDAPAttributesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LDAPAttributesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LDAPAttributesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/modules/providers/ldap-attributes/ldap-attributes.component.ts

@@ -0,0 +1,64 @@
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { LDAPAttributes } from 'src/app/proto/generated/zitadel/idp_pb';
+import { requiredValidator } from '../../form-field/validators/validators';
+
+@Component({
+  selector: 'cnsl-ldap-attributes',
+  templateUrl: './ldap-attributes.component.html',
+  styleUrls: ['./ldap-attributes.component.scss'],
+})
+export class LDAPAttributesComponent implements OnChanges, OnDestroy {
+  @Input() public initialAttributes?: LDAPAttributes.AsObject;
+  @Output() public attributesChanged: EventEmitter<LDAPAttributes> = new EventEmitter<LDAPAttributes>();
+  private destroy$: Subject<void> = new Subject();
+  public form: FormGroup = new FormGroup({
+    avatarUrlAttribute: new FormControl('', []),
+    displayNameAttribute: new FormControl('', []),
+    emailAttribute: new FormControl('', []),
+    emailVerifiedAttribute: new FormControl('', []),
+    firstNameAttribute: new FormControl('', []),
+    idAttribute: new FormControl('', [requiredValidator]),
+    lastNameAttribute: new FormControl('', []),
+    nickNameAttribute: new FormControl('', []),
+    phoneAttribute: new FormControl('', []),
+    phoneVerifiedAttribute: new FormControl('', []),
+    preferredLanguageAttribute: new FormControl('', []),
+    preferredUsernameAttribute: new FormControl('', []),
+    profileAttribute: new FormControl('', []),
+  });
+
+  constructor() {
+    this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      if (value) {
+        const attr = new LDAPAttributes();
+        attr.setAvatarUrlAttribute(value.avatarUrlAttribute);
+        attr.setDisplayNameAttribute(value.displayNameAttribute);
+        attr.setEmailAttribute(value.emailAttribute);
+        attr.setEmailVerifiedAttribute(value.emailVerifiedAttribute);
+        attr.setFirstNameAttribute(value.firstNameAttribute);
+        attr.setIdAttribute(value.idAttribute);
+        attr.setLastNameAttribute(value.lastNameAttribute);
+        attr.setNickNameAttribute(value.nickNameAttribute);
+        attr.setPhoneAttribute(value.phoneAttribute);
+        attr.setPhoneVerifiedAttribute(value.phoneVerifiedAttribute);
+        attr.setPreferredLanguageAttribute(value.preferredLanguageAttribute);
+        attr.setPreferredUsernameAttribute(value.preferredUsernameAttribute);
+        attr.setProfileAttribute(value.profileAttribute);
+        this.attributesChanged.emit(attr);
+      }
+    });
+  }
+
+  ngOnChanges(): void {
+    if (this.initialAttributes) {
+      this.form.patchValue(this.initialAttributes);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}