From 659d1b1252d177cf8d929420e37c9d49c576d806 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Tue, 9 Nov 2021 12:21:40 +0100
Subject: [PATCH] fix(console): project role ui optimization, disable resend
 init mail btn for reader (#2615)

* fix: new role button alignment

* disable init mail btn

* stylelint
---
 .../project-role-create.component.html        | 70 ++++++++++---------
 .../project-role-create.component.scss        | 24 ++++---
 .../user-detail/user-detail.component.html    |  5 +-
 3 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/console/src/app/pages/projects/project-role-create/project-role-create.component.html b/console/src/app/pages/projects/project-role-create/project-role-create.component.html
index dadbb2a28a..9f27ff1738 100644
--- a/console/src/app/pages/projects/project-role-create/project-role-create.component.html
+++ b/console/src/app/pages/projects/project-role-create/project-role-create.component.html
@@ -1,41 +1,45 @@
 <div class="container">
-    <div class="abort-container">
-        <button (click)="close()" mat-icon-button>
-            <mat-icon>close</mat-icon>
+  <div class="abort-container">
+    <button (click)="close()" mat-icon-button>
+      <mat-icon>close</mat-icon>
+    </button>
+    <span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step
+      {{ currentCreateStep }} of
+      {{ createSteps }}</span>
+  </div>
+
+  <h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
+
+  <form @list (ngSubmit)="addRole()">
+    <div @animate *ngFor="let formGroup of formArray.controls; index as i" class="newrole-content">
+      <ng-container [formGroup]="$any(formGroup)">
+        <div class="newrole">
+          <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
+            <input cnslInput formControlName="key" />
+          </cnsl-form-field>
+          <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="displayName" />
+          </cnsl-form-field>
+          <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</cnsl-label>
+            <input cnslInput formControlName="group" />
+          </cnsl-form-field>
+        </div>
+        <button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
+          matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
+          <i class="las la-trash"></i>
         </button>
-        <span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step
-            {{ currentCreateStep }} of
-            {{ createSteps }}</span>
+      </ng-container>
     </div>
 
-    <h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
     <button class="add-line-btn" color="primary" type="button" mat-stroked-button (click)="addEntry()">
-        {{'PROJECT.ROLE.ADDNEWLINE' | translate}}
+      {{'PROJECT.ROLE.ADDNEWLINE' | translate}}
     </button>
-    <form @list (ngSubmit)="addRole()">
-        <div @animate *ngFor="let formGroup of formArray.controls; index as i" class="content">
-            <ng-container [formGroup]="$any(formGroup)">
-                <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="key" />
-                </cnsl-form-field>
-                <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="displayName" />
-                </cnsl-form-field>
-                <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="group" />
-                </cnsl-form-field>
-                <button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
-                    matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
-                    <i class="las la-trash"></i>
-                </button>
-            </ng-container>
-        </div>
 
-        <button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" type="submit">
-            {{ 'ACTIONS.SAVE' | translate }}
-        </button>
-    </form>
+    <button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" type="submit">
+      {{ 'ACTIONS.SAVE' | translate }}
+    </button>
+  </form>
 </div>
\ No newline at end of file
diff --git a/console/src/app/pages/projects/project-role-create/project-role-create.component.scss b/console/src/app/pages/projects/project-role-create/project-role-create.component.scss
index 937d7c4b5d..260b3e1826 100644
--- a/console/src/app/pages/projects/project-role-create/project-role-create.component.scss
+++ b/console/src/app/pages/projects/project-role-create/project-role-create.component.scss
@@ -1,4 +1,3 @@
-
 .container {
   padding: 4rem 4rem 2rem 4rem;
 
@@ -29,21 +28,28 @@
   }
 }
 
-.content {
+.newrole-content {
   padding-top: 1rem;
   padding-bottom: 1rem;
-  display: flex;
-  margin: 0 -.5rem;
-  flex-wrap: wrap;
   border-bottom: 1px solid #ffffff20;
+  margin-bottom: 1rem;
+  display: flex;
 
-  .formfield {
-    margin: 0 .5rem;
+  .newrole {
+    display: grid;
+    grid-template-columns: 1fr;
+    flex: 1;
 
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
+    @media only screen and (min-width: 1000px) {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 1rem;
     }
   }
+
+  button {
+    align-self: flex-end;
+    margin-bottom: 1rem;
+  }
 }
 
 .continue-button {
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
index 12056c840d..8d1862eded 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
@@ -65,8 +65,9 @@
           <button pwdAction [disabled]="(canWrite$ | async) === false" (click)="sendSetPasswordNotification()"
             mat-stroked-button color="primary" *ngIf="user.state === UserState.USER_STATE_INITIAL">{{
             'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
-          <button emailAction class="resendemail" *ngIf="user.state === UserState.USER_STATE_INITIAL" mat-stroked-button
-            color="primary" (click)="resendInitEmail()">{{'USER.RESENDINITIALEMAIL' |
+          <button emailAction [disabled]="(canWrite$ | async) === false" class="resendemail"
+            *ngIf="user.state === UserState.USER_STATE_INITIAL" mat-stroked-button color="primary"
+            (click)="resendInitEmail()">{{'USER.RESENDINITIALEMAIL' |
             translate}}</button>
         </cnsl-contact>
       </cnsl-card>