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 && ready">
    <button matTooltip="Save" (click)="saveSettings()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >save</mat-icon></button>
    <mat-accordion>
        <!--WEBSOCKET SETTINGS-->
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    Credentials
                </mat-panel-title>
                <mat-panel-description>
                    User Settings
                    <mat-icon>person</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-form-field>
                    <input matInput name="username" [(ngModel)]="settings.webserver.adminUsername" placeholder="Username">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="password" type="password" [(ngModel)]="settings.webserver.adminPassword" placeholder="Password">
                </mat-form-field>
                <mat-form-field>
                    <input type="number" matInput name="connection-limit" [(ngModel)]="settings.webserver.websocketConnectionLimit" placeholder="Websocket connection limit">
                </mat-form-field>
                <mat-checkbox name="allow-insecure-origin" [(ngModel)]="settings.webserver.websocketAllowInsecureOrigin">Allow Insecure Websocket Origin</mat-checkbox>

            </form>
        </mat-expansion-panel>

        <!--CURRENCY SETTINGS-->
        <mat-expansion-panel *ngFor="let provider of settings.currencyConfig?.forexProviders">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{provider.name}}
                </mat-panel-title>
                <mat-panel-description>
                    Forex Providers
                    <mat-icon>attach_money</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="fpEnabled" [(ngModel)]="provider.enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                <mat-checkbox name="fpVerbose" [(ngModel)]="provider.verbose" [disabled]="!provider.enabled">Verbose</mat-checkbox>
                <div mat-line></div>
                <div mat-line></div>
                <mat-form-field>
                    <input matInput name="fpPollingDelay" type="number" [(ngModel)]="provider.RESTPollingDelay" [disabled]="!provider.enabled" placeholder="Polling Delay">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="fpKey" type="password" [(ngModel)]="provider.APIKey" [disabled]="!provider.enabled" placeholder="APIKey">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="fpKeyLevel" [(ngModel)]="provider.APIKeyLvl" [disabled]="!provider.enabled" placeholder="APIKey Level">
                </mat-form-field>
                <mat-checkbox name="fpPrimary" [(ngModel)]="provider.primaryProvider">Primary Provider</mat-checkbox>
            </form>

        </mat-expansion-panel>

        <!--SMS SETTINGS-->
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    SMS Notifications
                </mat-panel-title>
                <mat-panel-description>
                    Notification Settings
                    <mat-icon>sms</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="smsEnabled" [(ngModel)]="settings.communications.smsGlobal.enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                <mat-checkbox name="smsVerbose" [(ngModel)]="settings.communications.smsGlobal.verbose" [disabled]="!settings?.communications.smsGlobal.enabled">Verbose</mat-checkbox>
                <div mat-line></div>
                <mat-form-field>
                    <input matInput name="smsUsername" [(ngModel)]="settings.communications.smsGlobal.username" [disabled]="!settings?.communications.smsGlobal.enabled" placeholder="Username">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="smsPassword" type="password" [(ngModel)]="settings.communications.smsGlobal.Password" [disabled]="!settings?.communications.smsGlobal.enabled" placeholder="Password">
                </mat-form-field>

                <div *ngFor="let contact of settings.communications.smsGlobal?.contacts">
                    <mat-checkbox name="contactEnabled" [disabled]="!settings?.communications.smsGlobal.enabled" [(ngModel)]="contact.enabled">Enabled</mat-checkbox>
                    <div mat-line></div>
                    <mat-form-field>
                        <input matInput name="contactUsername" [(ngModel)]="contact.name" [disabled]="!settings.communications.smsGlobal.enabled || !contact.enabled" placeholder="Contact Name" />
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput name="contactPassword" [(ngModel)]="contact.number" [disabled]="!settings.communications.smsGlobal.enabled || !contact.enabled" placeholder="Contact Number" />
                    </mat-form-field>
                </div>
            </form>
            <mat-action-row>
                <button mat-button>ADD</button>
            </mat-action-row>
        </mat-expansion-panel>

        <!--SLACK SETTINGS-->
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    Slack Notifications
                </mat-panel-title>
                <mat-panel-description>
                    Notification Settings
                    <mat-icon>apps</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="slackEnabled" [(ngModel)]="settings.communications.slack.enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                <mat-checkbox name="slackVerbose" [disabled]="!settings?.communications.slack.enabled" [(ngModel)]="settings.communications.slack.verbose">Verbose</mat-checkbox>
                <div mat-line></div>
                <mat-form-field>
                    <input matInput name="slackTargetChannel" [(ngModel)]="settings.communications.slack.targetChannel" [disabled]="!settings?.communications.slack.enabled" placeholder="Target Channel">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="slackVerificationToken" type="password" [(ngModel)]="settings.communications.slack.verificationToken" [disabled]="!settings?.communications.slack.enabled" placeholder="Verification Token">
                </mat-form-field>
            </form>
        </mat-expansion-panel>

        <!--SMTP SETTINGS-->
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    SMTP Notifications
                </mat-panel-title>
                <mat-panel-description>
                    Notification Settings
                    <mat-icon>mail_outline</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="smtpEnabled" [(ngModel)]="settings.communications.smtp.enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                <mat-checkbox name="smtpVerbose" [disabled]="!settings?.communications.smtp.enabled" [(ngModel)]="settings.communications.smtp.verbose">Verbose</mat-checkbox>
                <div mat-line></div>
                <mat-form-field>
                    <input matInput name="smtpHost" [(ngModel)]="settings.communications.smtp.name" [disabled]="!settings?.communications.smtp.enabled" placeholder="Host">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="smtpPort" type="nunber" [(ngModel)]="settings.communications.smtp.port" [disabled]="!settings?.communications.smtp.enabled" placeholder="Verification Token">
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="smtpAccountName" [(ngModel)]="settings.communications.smtp.accountName" [disabled]="!settings?.communications.smtp.enabled" placeholder="Account Name">
                </mat-form-field>

                <mat-form-field>
                    <input matInput name="smtpPassword" type="password" [(ngModel)]="settings.communications.smtp.accountPassword" [disabled]="!settings?.communications.smtp.enabled" placeholder="Account Name">
                </mat-form-field>

                <mat-form-field>
                    <input matInput name="smtpRecipientList" [(ngModel)]="settings.communications.smtp.recipientList" [disabled]="!settings?.communications.smtp.enabled" placeholder="Recipient List (comma seperated)">
                </mat-form-field>
            </form>
        </mat-expansion-panel>

        <!--TELEGRAM SETTINGS-->
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    Telegram Notifications
                </mat-panel-title>
                <mat-panel-description>
                    Notification Settings
                    <mat-icon>send</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <form class="form-content">
                <mat-checkbox name="telegramEnabled" [(ngModel)]="settings.communications.telegram.enabled">Enabled</mat-checkbox>
                <div mat-line></div>
                <mat-checkbox name="telegramVerbose" [disabled]="!settings?.communications.telegram.enabled" [(ngModel)]="settings.communications.telegram.verbose">Verbose</mat-checkbox>
                <div mat-line></div>
                <mat-form-field>
                    <input matInput name="slackVerificationToken" type="password" [(ngModel)]="settings.communications.telegram.verificationToken" [disabled]="!settings?.communications.telegram.enabled" placeholder="Verification Token">
                </mat-form-field>
            </form>
        </mat-expansion-panel>

        <!--WALLET SETTINGS-->
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    Wallets
                </mat-panel-title>
                <mat-panel-description>
                    Wallet Address Settings
                    <mat-icon>account_balance_wallet</mat-icon>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <div *ngFor="let wallet of settings.PortfolioAddresses?.addresses">
                <mat-form-field class="long">
                    <input matInput name="wallet-address" [(ngModel)]="wallet.address" placeholder="Address" />
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="wallet-cointype" [(ngModel)]="wallet.coinType" placeholder="Coin Type" />
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="wallet-description" [(ngModel)]="wallet.description" placeholder="Description" />
                </mat-form-field>
                <button mat-button (click)="removeWallet(wallet)">REMOVE</button>
            </div>
            <mat-action-row>
                <button mat-button (click)="addWallet()">ADD</button>
            </mat-action-row>
        </mat-expansion-panel>

        <!--EXCHANGE SETTINGS-->
        <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>poll</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" type="password" [(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>
                <h4>
                    Enabled currencies
                </h4>
                <p><span *ngFor="let pair of exchange.pairs | enabledCurrencies; let isLast=last">{{pair.name}}{{isLast ? '' : ', '}}</span> </p>
                <button mat-button [disabled]="!exchange.enabled" (click)="openModal(exchange.pairs)">CHANGE</button>
            </form>
        </mat-expansion-panel>

    </mat-accordion>
</div>