From 58d687d1fef2496c117734d96c696e8593593c46 Mon Sep 17 00:00:00 2001
From: "openslides-automation[bot]"
 <125256978+openslides-automation[bot]@users.noreply.github.com>
Date: Fri, 31 May 2024 11:57:10 +0000
Subject: [PATCH] Personal info and Organisation specific info UI Adjustments
 (#3717) (#3724)

Co-authored-by: Elblinator <69210919+Elblinator@users.noreply.github.com>
---
 .../user-detail-view.component.html           | 194 ++++++++++--------
 .../user-detail-view.component.scss           |  11 +-
 .../account-detail.component.html             |  49 ++---
 3 files changed, 137 insertions(+), 117 deletions(-)

diff --git a/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html b/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html
index 02a00cb641..6ac26b99fd 100644
--- a/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html
+++ b/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html
@@ -56,6 +56,7 @@
 <ng-template #editTemplate>
     <form [formGroup]="personalInfoForm">
         <h2>{{ 'Personal information' | translate }}</h2>
+        <!-- First line -->
         <div class="personal-info-area">
             <!-- Title -->
             <mat-form-field class="form16 force-min-width">
@@ -63,37 +64,21 @@ <h2>{{ 'Personal information' | translate }}</h2>
                 <input type="text" matInput formControlName="title" />
             </mat-form-field>
             <!-- First name -->
-            <mat-form-field class="form37 force-min-width">
+            <mat-form-field class="form38 force-min-width">
                 <mat-label>{{ 'Given name' | translate }}</mat-label>
                 <input type="text" osAutofocus matInput formControlName="first_name" />
             </mat-form-field>
-
             <!-- Last name -->
-            <mat-form-field class="form37 force-min-width">
+            <mat-form-field class="form38 force-min-width">
                 <mat-label>{{ 'Surname' | translate }}</mat-label>
                 <input type="text" matInput formControlName="last_name" />
             </mat-form-field>
         </div>
 
+        <!-- Second line -->
         <div class="personal-info-area">
-            <!-- E-Mail -->
-            <mat-form-field class="width-58p force-min-width">
-                <mat-label>{{ 'Email' | translate }}</mat-label>
-                <input type="email" matInput autocomplete="off" name="email" formControlName="email" />
-                <mat-error *ngIf="personalInfoForm.get('email')?.hasError('email')">
-                    {{ 'Please enter a valid email address!' | translate }}
-                </mat-error>
-            </mat-form-field>
-
-            <!-- Pronoun -->
-            <mat-form-field class="width-16p force-min-width">
-                <mat-label>{{ 'Pronoun' | translate }}</mat-label>
-                <input type="text" matInput formControlName="pronoun" />
-                <mat-error>{{ 'max. 32 characters allowed' | translate }}</mat-error>
-            </mat-form-field>
-
             <!-- Gender -->
-            <mat-form-field class="width-16p force-min-width">
+            <mat-form-field class="form58 force-min-width">
                 <mat-label>{{ 'Gender' | translate }}</mat-label>
                 <mat-select formControlName="gender">
                     <mat-option [value]="null">-</mat-option>
@@ -102,68 +87,101 @@ <h2>{{ 'Personal information' | translate }}</h2>
                     </mat-option>
                 </mat-select>
             </mat-form-field>
+            <!-- Pronoun -->
+            <mat-form-field class="form38 force-min-width">
+                <mat-label>{{ 'Pronoun' | translate }}</mat-label>
+                <input type="text" matInput formControlName="pronoun" />
+                <mat-error>{{ 'max. 32 characters allowed' | translate }}</mat-error>
+            </mat-form-field>
         </div>
 
-        <!-- username -->
-        <div *ngIf="isAllowed('seePersonal')">
-            <mat-form-field class="full-width">
-                <mat-label>{{ 'Username' | translate }}</mat-label>
-                <input type="text" matInput formControlName="username" />
-                <button
-                    *ngIf="isNewUser"
-                    matSuffix
-                    type="button"
-                    mat-button
-                    mat-icon-button
-                    [matTooltip]="'Leave blank to automatically generate the username.' | translate"
-                    matTooltipPosition="above"
-                >
-                    <mat-icon>help</mat-icon>
-                </button>
-                <mat-error *ngIf="personalInfoForm.controls['username'].errors?.['required']" translate>
-                    You have to enter at least one character
-                </mat-error>
-                <mat-error *ngIf="personalInfoForm.controls['username'].errors?.['noSpace']" translate>
-                    Username may not contain spaces
+        <!-- Third line -->
+        <div class="personal-info-area">
+            <!-- E-Mail -->
+            <mat-form-field
+                [ngClass]="{
+                    form58: isAllowed('update'),
+                    form100: !isAllowed('update')
+                }"
+                class="force-min-width"
+            >
+                <mat-label>{{ 'Email' | translate }}</mat-label>
+                <input type="email" matInput autocomplete="off" name="email" formControlName="email" />
+                <mat-error *ngIf="personalInfoForm.get('email')?.hasError('email')">
+                    {{ 'Please enter a valid email address!' | translate }}
                 </mat-error>
             </mat-form-field>
+            <!-- Member Number -->
+            <ng-container *ngIf="isAllowed('update')">
+                <mat-form-field class="form38 force-min-width">
+                    <mat-label>{{ 'Membership number' | translate }}</mat-label>
+                    <input type="text" matInput formControlName="member_number" />
+                </mat-form-field>
+            </ng-container>
         </div>
 
-        <div *ngIf="isAllowed('update') && !user?.saml_id">
-            <!-- Initial Password -->
-            <mat-form-field class="full-width">
-                <mat-label>{{ 'Initial password' | translate }}</mat-label>
-                <input matInput autocomplete="off" formControlName="default_password" />
-                <button
-                    *ngIf="isNewUser && generatePasswordFn"
-                    matSuffix
-                    type="button"
-                    mat-button
-                    mat-icon-button
-                    [disabled]="!generatePasswordFn"
-                    (click)="setRandomPassword()"
-                    [matTooltip]="'Generate password' | translate"
-                >
-                    <mat-icon>autorenew</mat-icon>
-                </button>
-                <button
-                    *ngIf="isNewUser"
-                    matSuffix
-                    type="button"
-                    mat-button
-                    mat-icon-button
-                    [matTooltip]="'Leave blank to automatically generate the password.' | translate"
+        <!-- Fourth line -->
+        <div class="personal-info-area">
+            <!-- username -->
+            <ng-container *ngIf="isAllowed('seePersonal')">
+                <mat-form-field
+                    [ngClass]="{
+                        form58: isAllowed('update'),
+                        form100: !isAllowed('update')
+                    }"
+                    class="force-min-width"
                 >
-                    <mat-icon>help</mat-icon>
-                </button>
-            </mat-form-field>
-        </div>
+                    <mat-label>{{ 'Username' | translate }}</mat-label>
+                    <input type="text" matInput formControlName="username" />
+                    <button
+                        *ngIf="isNewUser"
+                        matSuffix
+                        type="button"
+                        mat-button
+                        mat-icon-button
+                        [matTooltip]="'Leave blank to automatically generate the username.' | translate"
+                        matTooltipPosition="above"
+                    >
+                        <mat-icon>help</mat-icon>
+                    </button>
+                    <mat-error *ngIf="personalInfoForm.controls['username'].errors?.['required']" translate>
+                        You have to enter at least one character
+                    </mat-error>
+                    <mat-error *ngIf="personalInfoForm.controls['username'].errors?.['noSpace']" translate>
+                        Username may not contain spaces
+                    </mat-error>
+                </mat-form-field>
+            </ng-container>
 
-        <div *ngIf="isAllowed('update')">
-            <mat-form-field class="width-16p force-min-width">
-                <mat-label>{{ 'Membership number' | translate }}</mat-label>
-                <input type="text" matInput formControlName="member_number" />
-            </mat-form-field>
+            <!-- Initial Password -->
+            <ng-container *ngIf="isAllowed('update') && !user?.saml_id">
+                <mat-form-field class="form38 force-min-width">
+                    <mat-label>{{ 'Initial password' | translate }}</mat-label>
+                    <input matInput autocomplete="off" formControlName="default_password" />
+                    <button
+                        *ngIf="isNewUser && generatePasswordFn"
+                        matSuffix
+                        type="button"
+                        mat-button
+                        mat-icon-button
+                        [disabled]="!generatePasswordFn"
+                        (click)="setRandomPassword()"
+                        [matTooltip]="'Generate password' | translate"
+                    >
+                        <mat-icon>autorenew</mat-icon>
+                    </button>
+                    <button
+                        *ngIf="isNewUser"
+                        matSuffix
+                        type="button"
+                        mat-button
+                        mat-icon-button
+                        [matTooltip]="'Leave blank to automatically generate the password.' | translate"
+                    >
+                        <mat-icon>help</mat-icon>
+                    </button>
+                </mat-form-field>
+            </ng-container>
         </div>
 
         <div *ngIf="isAllowed('seeName')">
@@ -175,8 +193,8 @@ <h2>{{ 'Personal information' | translate }}</h2>
 
 <ng-template #showTemplate>
     <h2>{{ 'Personal information' | translate }}</h2>
-    <!-- User name -->
     <ng-container *ngIf="user">
+        <!-- Displayed name -->
         <div *ngIf="isAllowed('seeName')">
             <h4>{{ 'Name' | translate }}</h4>
             <span class="state-icons">
@@ -203,39 +221,33 @@ <h4>{{ 'Name' | translate }}</h4>
             </span>
         </div>
 
-        <!-- Mail -->
-        <div *ngIf="isAllowed('seeSensitiveData')">
-            <div *ngIf="user.email">
-                <h4>{{ 'Email' | translate }}</h4>
-                <span>{{ user.email }}</span>
-            </div>
-        </div>
-
         <!-- Gender -->
         <div *ngIf="user.gender">
             <h4>{{ 'Gender' | translate }}</h4>
             <span>{{ user.gender | translate }}</span>
         </div>
 
+        <!-- Mail -->
         <div *ngIf="isAllowed('seeSensitiveData')">
+            <div *ngIf="user.email">
+                <h4>{{ 'Email' | translate }}</h4>
+                <span>{{ user.email }}</span>
+            </div>
+            <!-- Membership number-->
+            <div *ngIf="user.member_number">
+                <h4>{{ 'Membership number' | translate }}</h4>
+                <span>{{ user.member_number }}</span>
+            </div>
             <!-- Username -->
             <div *ngIf="user.username">
                 <h4>{{ 'Username' | translate }}</h4>
                 <span>{{ user.username }}</span>
             </div>
-
             <!-- Initial Password -->
             <div *ngIf="user.default_password && !user.saml_id && isAllowed('update')">
                 <h4>{{ 'Initial password' | translate }}</h4>
                 <span>{{ user.default_password }}</span>
             </div>
-
-            <!-- Membership number-->
-            <div *ngIf="user.member_number">
-                <h4>{{ 'Membership number' | translate }}</h4>
-                <span>{{ user.member_number }}</span>
-            </div>
-
             <!-- SAML id -->
             <div *ngIf="user.saml_id">
                 <h4>{{ 'SSO Identification' | translate }}</h4>
diff --git a/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.scss b/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.scss
index 2b59441691..94eddd25da 100644
--- a/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.scss
+++ b/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.scss
@@ -1,12 +1,19 @@
 @import 'src/assets/styles/media-queries.scss';
 
 @include set-breakpoint-upper(xs) {
+    .form100 {
+        width: 100%;
+    }
     .form70 {
         width: 70%;
     }
 
-    .form37 {
-        width: 37%;
+    .form58 {
+        width: 58%;
+    }
+
+    .form38 {
+        width: 38%;
     }
 
     .form25 {
diff --git a/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html b/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html
index 00c7eb917c..0ba6b6e785 100644
--- a/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html
+++ b/client/src/app/site/pages/organization/pages/accounts/pages/account-detail/components/account-detail/account-detail.component.html
@@ -37,23 +37,7 @@ <h2 *ngIf="!isNewUser">{{ user?.full_name }}</h2>
     <ng-template #editView let-form="form">
         <h2>{{ 'Organization specific information' | translate }}</h2>
         <div [formGroup]="form">
-            <!-- Default Vote weight -->
-            <mat-form-field class="form100 force-min-with">
-                <mat-label>{{ 'Default vote weight' | translate }}</mat-label>
-                <input type="number" matInput formControlName="default_vote_weight" />
-                <mat-error *ngIf="isDefaultVoteWeightError && form.controls['default_vote_weight'].value > 0" translate>
-                    Please select a vote weight greater than or equal to 0.000001
-                </mat-error>
-                <mat-error
-                    *ngIf="isDefaultVoteWeightError && form.controls['default_vote_weight'].value <= 0"
-                    translate
-                >
-                    Please select a vote weight greater than zero.
-                </mat-error>
-            </mat-form-field>
-        </div>
-
-        <div [formGroup]="form">
+            <!-- Administration roles (at organization level) -->
             <div *osOmlPerms="OML.can_manage_users">
                 <mat-form-field class="form100 force-min-with">
                     <mat-label>{{ 'Administration roles (at organization level)' | translate }}</mat-label>
@@ -69,6 +53,7 @@ <h2>{{ 'Organization specific information' | translate }}</h2>
                     </mat-select>
                 </mat-form-field>
             </div>
+            <!-- Committee admin -->
             <div *osOmlPerms="OML.can_manage_organization">
                 <mat-form-field class="form100 force-min-with">
                     <mat-label>{{ 'Committee admin' | translate }}</mat-label>
@@ -84,28 +69,44 @@ <h2>{{ 'Organization specific information' | translate }}</h2>
                 </mat-form-field>
             </div>
         </div>
+        <!-- Default Vote weight -->
+        <div [formGroup]="form">
+            <mat-form-field class="form100 force-min-with">
+                <mat-label>{{ 'Default vote weight' | translate }}</mat-label>
+                <input type="number" matInput formControlName="default_vote_weight" />
+                <mat-error *ngIf="isDefaultVoteWeightError && form.controls['default_vote_weight'].value > 0" translate>
+                    Please select a vote weight greater than or equal to 0.000001
+                </mat-error>
+                <mat-error
+                    *ngIf="isDefaultVoteWeightError && form.controls['default_vote_weight'].value <= 0"
+                    translate
+                >
+                    Please select a vote weight greater than zero.
+                </mat-error>
+            </mat-form-field>
+        </div>
     </ng-template>
 
     <ng-template #showView let-user="user">
         <h2>{{ 'Organization specific information' | translate }}</h2>
-
-        <div *ngIf="user.default_vote_weight || user.default_vote_weight === 0">
-            <h4>{{ 'Default vote weight' | translate }}</h4>
-            <span>{{ user.default_vote_weight }}</span>
-        </div>
-
         <!-- Organization management level -->
         <div *ngIf="user.organization_management_level">
             <h4>{{ 'Administration roles (at organization level)' | translate }}</h4>
             <span>{{ getOmlVerboseName(user.organization_management_level) | translate }}</span>
         </div>
-
+        <!-- Default vote weight -->
+        <div *ngIf="user.default_vote_weight || user.default_vote_weight === 0">
+            <h4>{{ 'Default vote weight' | translate }}</h4>
+            <span>{{ user.default_vote_weight }}</span>
+        </div>
+        <!-- Last email sent -->
         <div *ngIf="user?.isLastEmailSent">
             <div>
                 <h4>{{ 'Last email sent' | translate }}</h4>
                 <span>{{ user.last_email_sent | localizedDate }}</span>
             </div>
         </div>
+        <!-- Last login -->
         <div>
             <div *ngIf="user?.isLastLogin">
                 <h4>{{ 'Last login' | translate }}</h4>