zitadel/console/src/app/pages/users/user-create/user-create.component.ts

import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CreateUserRequest, Gender, User } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';

function noEmailValidator(c: AbstractControl): any {
    const EMAIL_REGEXP: RegExp = /^((?!@).)*$/gm;
    if (!c.parent || !c) {
        return;
    }
    const username = c.parent.get('userName');

    if (!username) {
        return;
    }

    return EMAIL_REGEXP.test(username.value) ? null : {
        noEmailValidator: {
            valid: false,
        },
    };
}

@Component({
    selector: 'app-user-create',
    templateUrl: './user-create.component.html',
    styleUrls: ['./user-create.component.scss'],
})
export class UserCreateComponent implements OnDestroy {
    public user: CreateUserRequest.AsObject = new CreateUserRequest().toObject();
    public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
    public languages: string[] = ['de', 'en'];
    public userForm!: FormGroup;

    private sub: Subscription = new Subscription();

    public userLoginMustBeDomain: boolean = false;
    public loading: boolean = false;

    constructor(
        private router: Router,
        private toast: ToastService,
        public userService: ManagementService,
        private fb: FormBuilder,
        private mgmtService: ManagementService,
    ) {
        this.loading = true;
        this.mgmtService.GetMyOrgIamPolicy().then((iampolicy) => {
            this.userLoginMustBeDomain = iampolicy.toObject().userLoginMustBeDomain;
            this.initForm();
            this.loading = false;
        }).catch(error => {
            console.error(error);
            this.initForm();
            this.loading = false;
        });
    }

    private initForm(): void {
        this.userForm = this.fb.group({
            email: ['', [Validators.required, Validators.email]],
            userName: ['',
                [
                    Validators.required,
                    Validators.minLength(2),
                    this.userLoginMustBeDomain ? noEmailValidator : Validators.email,
                ],
            ],
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            nickName: [''],
            gender: [Gender.GENDER_UNSPECIFIED],
            preferredLanguage: [''],
            phone: [''],
            streetAddress: [''],
            postalCode: [''],
            locality: [''],
            region: [''],
            country: [''],
        });
    }

    public createUser(): void {
        this.user = this.userForm.value;

        this.loading = true;
        this.userService
            .CreateUser(this.user)
            .then((data: User) => {
                this.loading = false;
                this.toast.showInfo('USER.TOAST.CREATED', true);
                this.router.navigate(['users', data.getId()]);
            })
            .catch(error => {
                this.loading = false;
                this.toast.showError(error);
            });
    }

    ngOnDestroy(): void {

        this.sub.unsubscribe();
    }

    public get email(): AbstractControl | null {
        return this.userForm.get('email');
    }
    public get userName(): AbstractControl | null {
        return this.userForm.get('userName');
    }
    public get firstName(): AbstractControl | null {
        return this.userForm.get('firstName');
    }
    public get lastName(): AbstractControl | null {
        return this.userForm.get('lastName');
    }
    public get nickName(): AbstractControl | null {
        return this.userForm.get('nickName');
    }
    public get gender(): AbstractControl | null {
        return this.userForm.get('gender');
    }
    public get preferredLanguage(): AbstractControl | null {
        return this.userForm.get('preferredLanguage');
    }
    public get phone(): AbstractControl | null {
        return this.userForm.get('phone');
    }
    public get streetAddress(): AbstractControl | null {
        return this.userForm.get('streetAddress');
    }
    public get postalCode(): AbstractControl | null {
        return this.userForm.get('postalCode');
    }
    public get locality(): AbstractControl | null {
        return this.userForm.get('locality');
    }
    public get region(): AbstractControl | null {
        return this.userForm.get('region');
    }
    public get country(): AbstractControl | null {
        return this.userForm.get('country');
    }
}