Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Personal info and Organisation specific info UI Adjustments #3717

Merged
merged 6 commits into from
May 31, 2024
Merged

Personal info and Organisation specific info UI Adjustments #3717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb9382c
Organization speficif info edit
Elblinator May 30, 2024
ea6217e
Organization speficif info view
Elblinator May 30, 2024
106b53b
Personal infomation edit
Elblinator May 30, 2024
234481f
Personal infomation view
Elblinator May 30, 2024
d317796
change layout a bit
Elblinator May 31, 2024
b4f488d
adjust for the buttons
Elblinator May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 103 additions & 91 deletions .../site/modules/user-components/components/user-detail-view/user-detail-view.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading