Update profile UI for social accounts

This commit is contained in:
shamoon 2023-12-31 12:06:03 -08:00 committed by Moritz Pflanzer
parent 4c8f067c1e
commit c3e23ff557

View File

@ -52,31 +52,30 @@
@if (socialAccounts?.length > 0) { @if (socialAccounts?.length > 0) {
<div class="mb-3"> <div class="mb-3">
<p i18n>Connected social accounts</p> <p i18n>Connected social accounts</p>
<div class="position-relative"> <ul class="list-group">
<ul> @for (account of socialAccounts; track account.id) {
@for (account of socialAccounts; track account.id) { <li class="list-group-item">{{account.name}} ({{account.provider}})<button type="button" class="btn btn-outline-danger btn-sm ms-2 align-baseline" (click)="disconnectSocialAccount(account.id)" i18n-title title="Disconnect {{ account.name }} social account">
<li>{{account.name}}<button type="button" class="btn btn-outline-secondary btn-sm ms-2 align-baseline" (click)="disconnectSocialAccount(account.id)" i18n-title title="Disconnect {{ account.name }} social account"> <ng-container i18n>Disconnect</ng-container><svg class="buttonicon-sm ms-1" fill="currentColor">
<svg class="buttonicon" fill="currentColor"> <use xlink:href="assets/bootstrap-icons.svg#trash" />
<use xlink:href="assets/bootstrap-icons.svg#trash" /> </svg>
</svg> </button>
</button> </li>
</li> }
} </ul>
</ul> <div class="form-text text-muted text-end fst-italic" i18n>Warning: disconnecting social accounts cannot be undone</div>
<div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the social accounts cannot be undone</div>
</div>
</div> </div>
} }
@if (socialAccountProviders?.length > 0) { @if (socialAccountProviders?.length > 0) {
<div class="mb-3"> <div class="mb-3">
<p i18n>Available social account providers</p> <p i18n>Connect new social account</p>
<div class="position-relative"> <div class="list-group">
<ul> @for (provider of socialAccountProviders; track provider.name) {
@for (provider of socialAccountProviders; track provider.name) { <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" target="_blank">
<li><a href="{{ provider.login_url }}">{{provider.name}}</a></li> {{provider.name}}<svg class="buttonicon-sm ms-2" style="margin-bottom: 1px;" fill="currentColor">
} <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right" />
</ul> </svg>
<div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the social account providers cannot be undone</div> </a>
}
</div> </div>
</div> </div>
} }