mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-26 01:02:16 +00:00
7576f09de6
# Which Problems Are Solved @mffap reported in issue #8084 that there was an oferflow error when the PAT token was displayed which made copying it almost impossible # How the Problems Are Solved It seems there was an issue with the token text not wrapping well as the token is a long word. Sometimes the token was displayed well but it was only because the token contains hyphens that made the text go into a new line but if no hyphen was there there was an overflow issue. I've used a new class for the token to be displayed and used the css properties explained in [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text) ``` overflow-wrap: break-word; word-break: break-all; ``` Here's a video showing the fix in action: https://github.com/zitadel/zitadel/assets/30386061/096de18d-4424-46b8-a287-cce6539c2053 # Additional Context - Closes #8084 Co-authored-by: Tim Möhlmann <[email protected]>
38 lines
1.5 KiB
HTML
38 lines
1.5 KiB
HTML
<span class="title" mat-dialog-title>{{ 'USER.PERSONALACCESSTOKEN.ADDED.TITLE' | translate }}</span>
|
|
<div mat-dialog-content>
|
|
<cnsl-info-section [type]="InfoSectionType.WARN">
|
|
{{ 'USER.PERSONALACCESSTOKEN.ADDED.DESCRIPTION' | translate }}
|
|
</cnsl-info-section>
|
|
|
|
<ng-container *ngIf="tokenResponse">
|
|
<div class="row">
|
|
<p class="left cnsl-secondary-text">{{ 'USER.PERSONALACCESSTOKEN.ID' | translate }}</p>
|
|
<p class="right">{{ tokenResponse.tokenId }}</p>
|
|
</div>
|
|
|
|
<div class="row" *ngIf="tokenResponse.token">
|
|
<p class="left cnsl-secondary-text">{{ 'USER.PERSONALACCESSTOKEN.TOKEN' | translate }}</p>
|
|
<div class="right">
|
|
<button
|
|
class="ctc"
|
|
[disabled]="copied === tokenResponse.token"
|
|
[matTooltip]="(copied !== tokenResponse.token ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
|
|
cnslCopyToClipboard
|
|
[valueToCopy]="tokenResponse.token"
|
|
(copiedValue)="copied = $event"
|
|
mat-icon-button
|
|
>
|
|
<i *ngIf="copied !== tokenResponse.token" class="las la-clipboard"></i>
|
|
<i *ngIf="copied === tokenResponse.token" class="las la-clipboard-check"></i>
|
|
</button>
|
|
<span class="token">{{ tokenResponse.token }}</span>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div mat-dialog-actions class="action">
|
|
<button color="primary" mat-raised-button class="ok-button" (click)="closeDialog()">
|
|
{{ 'ACTIONS.CLOSE' | translate }}
|
|
</button>
|
|
</div>
|