gocryptotrader/web/src/app/pages/settings/settings.component.html

<div class="loading-spinner" *ngIf="settings === null">
    <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
</div>
<div *ngIf="settings !== null">

    <button (click)="saveSettings()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >save</mat-icon></button>

    <mat-accordion>
        <mat-expansion-panel *ngIf="settings.SMSGlobal != null">
            <mat-expansion-panel-header >
                <mat-panel-title>
                    SMS Global
                </mat-panel-title>
                <mat-panel-description>
                    SMS configuration and contact management
                    <mat-icon>phone_iphone</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="smsEnabled" [(ngModel)]="settings.SMSGlobal.Enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                <mat-form-field>
                    <input matInput name="smsUsername" [(ngModel)]="settings.SMSGlobal.Username" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Username">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="smsPassword" [(ngModel)]="settings.SMSGlobal.Password" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Password">
                </mat-form-field>

                <div *ngFor="let contact of settings.SMSGlobal?.Contacts">
                    <mat-checkbox name="contactEnabled" [disabled]="!settings?.SMSGlobal.Enabled" [(ngModel)]="contact.Enabled">Enabled</mat-checkbox>
                    <div mat-line></div>
                    <mat-form-field>
                        <input matInput name="contactUsername" [(ngModel)]="contact.Name" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Name" />
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput name="contactPassword" [(ngModel)]="contact.Number" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Number" />
                    </mat-form-field>
                </div>
            </form>
        </mat-expansion-panel>


        <mat-expansion-panel *ngFor="let exchange of settings?.Exchanges">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{exchange.Name}}
                </mat-panel-title>
                <mat-panel-description>
                    Exchange Settings
                    <mat-icon>attach_money</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                    <mat-form-field>
                        <input matInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="API Key*">
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput name="apiSecretKey" [(ngModel)]="exchange.APISecret" [disabled]="!exchange.Enabled" placeholder="API Secret Key*">
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="API ClientID">
                    </mat-form-field>
                    <div mat-line></div>
                    <mat-panel-description>
                        Enabled Currency pairs {{enabledCurrencies.selectedOptions.selected.length}} - Managed via config temporarily
                    </mat-panel-description>
                    <div mat-line></div>
                    <mat-selection-list #enabledCurrencies>
                            <mat-list-option [disabled]="!exchange.Enabled || true" *ngFor="let currency of exchange.AvailablePairs.split(',')">
                              {{currency}}
                            </mat-list-option>
                          </mat-selection-list>
            </form>
        </mat-expansion-panel>
    </mat-accordion>

</div>