OpenSlides/client/src/app/site/users/components/user-detail/user-detail.component.html

<os-head-bar [mainButton]="isAllowed('manage')" buttonIcon="edit" [nav]="false" [editMode]="editUser" (mainEvent)="setEditMode(!editUser)"
    (saveEvent)="saveUser()">

    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf='editUser'>
            {{personalInfoForm.get('title').value}}
            {{personalInfoForm.get('first_name').value}}
            {{personalInfoForm.get('last_name').value}}
        </h2>

        <h2 *ngIf='!editUser'>
            {{user.full_name}}
        </h2>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="userExtraMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <mat-menu #userExtraMenu="matMenu">
        <button mat-menu-item class="red-warning-text" (click)='deleteUserButton()'>
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
    </mat-menu>
</os-head-bar>

<mat-card class="os-card" *osPerms="'users.can_see_name'">
    <form [ngClass]="{'mat-form-field-enabled': editUser}" [formGroup]='personalInfoForm' (ngSubmit)='saveUser()' *ngIf="user">
        <!-- <h3 translate>Personal Data</h3> -->
        <div *ngIf='isAllowed("seeName")'>
            <!-- Title -->
            <mat-form-field class='form30 distance force-min-with' *ngIf='user.title || editUser && isAllowed("manage")'>
                <input type='text' matInput osAutofocus placeholder='{{"Title" | translate}}' formControlName='title'
                    [value]='user.title'>
            </mat-form-field>

            <!-- First name -->
            <mat-form-field class='form30 distance force-min-with' *ngIf='user.first_name || editUser && isAllowed("manage")'>
                <input type='text' matInput placeholder='{{"First Name" | translate}}' formControlName='first_name'
                    [value]='user.first_name'>
            </mat-form-field>

            <!-- Last name -->
            <mat-form-field class='form30  force-min-with' *ngIf='user.last_name || editUser && isAllowed("manage")'>
                <input type='text' matInput placeholder='{{"Last Name" | translate}}' formControlName='last_name'
                    [value]='user.last_name'>
            </mat-form-field>
        </div>

        <div *ngIf='isAllowed("seePersonal")'>
            <!-- E-Mail -->
            <mat-form-field class='form100' *ngIf="user.email || editUser">
                <input type='email' matInput placeholder='{{"EMail" | translate}}' name="email" formControlName='email'
                    [value]='user.email'>
                <mat-error *ngIf="personalInfoForm.get('email').hasError('email')">
                    Please enter a valid email address
                </mat-error>
            </mat-form-field>
        </div>

        <div>
            <!-- Strucuture Level -->
            <mat-form-field class='form70 distance' *ngIf='user.structure_level || editUser && isAllowed("manage")'>
                <input type='text' matInput placeholder='{{"Structure Level" | translate}}' formControlName='structure_level'
                    [value]='user.structure_level'>
            </mat-form-field>

            <!-- Partizipant Number -->
            <mat-form-field class='form20 force-min-with' *ngIf='user.participant_number || editUser && isAllowed("manage")'>
                <input type='text' matInput placeholder='{{"Participant Number" | translate}}' formControlName='number'
                    [value]='user.participant_number'>
            </mat-form-field>
        </div>

        <div>
            <!-- Groups -->
            <mat-form-field class='form100' *ngIf="user.groups && user.groups.length > 0 || editUser">
                <mat-select placeholder='{{"Groups" | translate}}' formControlName='groups_id' multiple>
                    <mat-option *ngFor="let group of groups" [value]="group.id">{{group}}</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div *ngIf='isAllowed("manage")'>
            <!-- Initial Password -->
            <mat-form-field class='form100'>
                <input matInput placeholder='{{"Initial Password" | translate}}' formControlName='default_password'
                    [value]='user.default_password'>
                <mat-hint align="end">Generate</mat-hint>
                <button type="button" mat-button matSuffix mat-icon-button [disabled]='!newUser' (click)='generatePassword()'>
                    <mat-icon>sync_problem</mat-icon>
                </button>
            </mat-form-field>
        </div>

        <div *ngIf='isAllowed("seePersonal")'>
            <!-- About me -->
            <!-- TODO: Needs Rich Text Editor -->
            <mat-form-field class='form100' *ngIf="user.about_me || editUser">
                <textarea formControlName='about_me' matInput placeholder='{{"About Me" | translate}}' [value]='user.about_me'></textarea>
            </mat-form-field>
        </div>

        <div *ngIf='isAllowed("seePersonal")'>
            <!-- username -->
            <mat-form-field class='form100' *ngIf="user.username || editUser">
                <input type='text' matInput placeholder='{{"Username" | translate}}' formControlName='username' [value]='user.username'>
            </mat-form-field>
        </div>

        <div *ngIf='isAllowed("seeExtra")'>
            <!-- Comment -->
            <mat-form-field class='form100' *ngIf="user.comment || editUser">
                <input matInput placeholder='{{"Comment"| translate}}' formControlName='comment' [value]='user.comment'>
                <mat-hint translate>Only for internal notes.</mat-hint>
            </mat-form-field>
        </div>

        <div *ngIf='isAllowed("seeExtra")'>
            <!-- Present? -->
            <mat-checkbox formControlName='is_present' matTooltip='{{"Designates whether this user is in the room." | translate}} '
                [value]='user.is_present'>
                <span translate>Is Present</span>
            </mat-checkbox>
            <!-- Active? -->
            <mat-checkbox *osPerms="'users.can_see_extra_data'" formControlName='is_active' matTooltip='{{"Designates whether this user should be treated as active. Unselect this instead of deleting the account." | translate}}'
                [value]='user.is_active'>
                <span translate>Is Active</span>
            </mat-checkbox>
            <!-- Commitee? -->
            <mat-checkbox formControlName='is_committee' matTooltip='{{"Designates whether this user should be treated as a committee." | translate}}'
                [value]='user.is_committee'>
                <span translate>Is a committee</span>
            </mat-checkbox>
        </div>
    </form>

</mat-card>