Skip to content

Commit

Permalink
Personal info and Organisation specific info UI Adjustments (#3717)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Elblinator
Elblinator authored and openslides-automation committed May 31, 2024
1 parent 79c2819 commit 7f9346d
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 117 deletions.
194 changes: 103 additions & 91 deletions .../site/modules/user-components/components/user-detail-view/user-detail-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,44 +56,29 @@
<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">
<mat-label>{{ 'Title' | translate }}</mat-label>
<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>
Expand All @@ -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')">
Expand All @@ -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">
Expand All @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions .../site/modules/user-components/components/user-detail-view/user-detail-view.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
49 changes: 25 additions & 24 deletions ...ges/accounts/pages/account-detail/components/account-detail/account-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 7f9346d

Please sign in to comment.