src/angular/dialog/p3xr-dialog-connection.html

<md-dialog class="fullscreen-dialog">
    <form novalidate name="p3xrConnectionForm" ng-submit="submit()">
        <md-toolbar md-theme="{{ $root.p3xr.state.themeLayout }}" class="md-hue-3">
            <div class="md-toolbar-tools">
                <h2 flex md-truncate>{{ $root.p3xr.state.cfg.readonlyConnections ?
                    $root.p3xr.strings.label.connectiondView : options.type === 'new' ?
                    $root.p3xr.strings.label.connectiondAdd : $root.p3xr.strings.label.connectiondEdit }}</h2>
                <md-button class="md-icon-button" ng-click="cancel()">
                    <md-icon>close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content md-theme="{{ $root.p3xr.state.theme }}" >
            <md-content>
                <div class="p3xr-padding">
                    <md-input-container class="md-block">
                        <label>{{ $root.p3xr.strings.form.connection.label.name }}</label>
                        <input required name="name" ng-model="model.name"
                               ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                        <div ng-messages="p3xrConnectionForm.name.$error">
                            <div ng-message="required">{{ $root.p3xr.strings.form.error.required }}</div>
                        </div>
                    </md-input-container>

<md-input-container class="md-block">
                        <label>{{ $root.p3xr.strings.form.connection.label.host }}</label>
                        <input name="host" ng-model="model.host" ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                    </md-input-container>

<md-input-container class="md-block">
                        <label>{{ $root.p3xr.strings.form.connection.label.port }}</label>
                        <input name="port" type="number" min="1" max="65535" ng-model="model.port"
                               ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                        <div ng-messages="p3xrConnectionForm.port.$error">
                            <div ng-message-exp="['min', 'max']">
                                {{ $root.p3xr.strings.form.error.port }}
                            </div>
                        </div>
                    </md-input-container>

<md-input-container class="md-block">
                        <label>{{ $root.p3xr.strings.form.connection.label.username }}</label>
                        <input name="username" type="text" ng-model="model.username"
                               ng-disabled="$root.p3xr.state.cfg.readonlyConnections" autocomplete="off">
                    </md-input-container>

<md-input-container class="md-block p3xr-md-input-container-no-bottom">
                        <label>{{ $root.p3xr.strings.form.connection.label.password }}</label>
                        <input name="password" type="password" ng-model="model.password"
                               ng-disabled="$root.p3xr.state.cfg.readonlyConnections" autocomplete="off">
                    </md-input-container>
                    <div class="p3xr-md-input-container-bottom-info">
                        {{ $root.p3xr.strings.label.passwordSecure }}
                    </div>

<br/>

<md-input-container class="md-block p3xr-md-input-container-no-bottom">
                        <label>TLS (redis.crt)</label>
                        <textarea name="tlsCrt" ng-model="model.tlsCrt"
                                  ng-disabled="$root.p3xr.state.cfg.readonlyConnections" autocomplete="off"></textarea>
                    </md-input-container>
                    <div class="p3xr-md-input-container-bottom-info">
                        {{ $root.p3xr.strings.label.tlsSecure }}
                    </div>
                    <br/>

<md-input-container class="md-block p3xr-md-input-container-no-bottom">
                        <label>TLS (redis.key)</label>
                        <textarea name="tlsKey" ng-model="model.tlsKey"
                                  ng-disabled="$root.p3xr.state.cfg.readonlyConnections" autocomplete="off"></textarea>
                    </md-input-container>
                    <div class="p3xr-md-input-container-bottom-info">
                        {{ $root.p3xr.strings.label.tlsSecure }}
                    </div>
                    <br/>

<md-input-container class="md-block p3xr-md-input-container-no-bottom">
                        <label>TLS (ca.crt)</label>
                        <textarea name="tlsCa" ng-model="model.tlsCa"
                                  ng-disabled="$root.p3xr.state.cfg.readonlyConnections" autocomplete="off"></textarea>
                    </md-input-container>
                    <div class="p3xr-md-input-container-bottom-info">
                        {{ $root.p3xr.strings.label.tlsSecure }}
                    </div>
                    <br/>

<md-input-container style="margin: 0px">
                        <md-switch ng-model="model.readonly" name="readonly" aria-label=""
                                   ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                            {{ model.readonly ? $root.p3xr.strings.label.readonly.on : $root.p3xr.strings.label.readonly.off }}
                        </md-switch>
                    </md-input-container>

<md-input-container style="margin: 0px">
                        <md-switch ng-model="model.awsElastiCache" name="awsElastiCache" aria-label=""
                                   ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                            {{ model.awsElastiCache ? $root.p3xr.strings.label.awsElastiCache.on :
                            $root.p3xr.strings.label.awsElastiCache.off }}
                        </md-switch>
                    </md-input-container>

<md-input-container style="margin: 0px">
                        <md-switch ng-model="model.azure" name="azure" aria-label=""
                                   ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                            {{ model.azure ? $root.p3xr.strings.label.azure.on :
                            $root.p3xr.strings.label.azure.off }}
                        </md-switch>
                    </md-input-container>

<md-input-container style="margin: 0px">
                        <md-switch ng-model="model.cluster" name="cluster" aria-label=""
                                   ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                            {{ model.cluster ? $root.p3xr.strings.label.cluster.on : $root.p3xr.strings.label.cluster.off }}
                        </md-switch>
                    </md-input-container>

<span ng-if="model.cluster === true && !$root.p3xr.state.cfg.readonlyConnections" ng-click="addNode()">
                            <md-button class="md-fab md-primary md-mini">
                                <md-icon>add</md-icon>
                            </md-button>
                            {{ $root.p3xr.strings.label.addNode }}
                        </span>

<div ng-repeat="node in model.nodes">
                            <fieldset>
                                <legend>Node {{$index + 1}}</legend>
                                <div style="float: right;" ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                                    <md-button class="md-fab md-warn md-mini" ng-click="removeNode($event, $index)">
                                        <md-tooltip>{{ $root.p3xr.strings.confirm.deleteConnectionText }}</md-tooltip>
                                        <md-icon>delete</md-icon>
                                    </md-button>
                                    <md-button class="md-fab md-primary md-mini" ng-click="addNode($index)">
                                        <md-tooltip>{{ $root.p3xr.strings.label.addNode }}</md-tooltip>
                                        <md-icon>add</md-icon>
                                    </md-button>
                                </div>
                                <md-input-container class="md-block">
                                    <label>{{ $root.p3xr.strings.form.connection.label.host }}</label>
                                    <input name="host{{$index}}" ng-model="node.host"
                                           ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                                </md-input-container>

<md-input-container class="md-block">
                                    <label>{{ $root.p3xr.strings.form.connection.label.port }}</label>
                                    <input required name="port{{$index}}" type="number" min="1" max="65535"
                                           ng-model="node.port" ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                                    <div ng-messages="p3xrConnectionForm['port' +  $index].$error">
                                        <div ng-message-exp="['min', 'max']">
                                            {{ $root.p3xr.strings.form.error.port }}
                                        </div>
                                        <div ng-message="required">{{ $root.p3xr.strings.form.error.required }}</div>
                                    </div>
                                </md-input-container>

<md-input-container class="md-block">
                                    <label>{{ $root.p3xr.strings.form.connection.label.username }}</label>
                                    <input name="username{{$index}}" type="text" ng-model="node.username"
                                           ng-disabled="$root.p3xr.state.cfg.readonlyConnections" autocomplete="off">
                                </md-input-container>

<md-input-container class="md-block p3xr-md-input-container-no-bottom">
                                    <label>{{ $root.p3xr.strings.form.connection.label.password }}</label>
                                    <input name="password{{$index}}" type="password" ng-model="node.password"
                                           ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                                </md-input-container>

<div class="p3xr-md-input-container-bottom-info">
                                    {{ $root.p3xr.strings.label.passwordSecure }}
                                </div>

</fieldset>
                            <div ng-if="$last !== true" style="margin-bottom: 16px;">
                                &nbsp;
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </span>

</div>

</md-content>
        </md-dialog-content>

<md-dialog-actions  md-theme="{{ $root.p3xr.state.theme }}" class="p3xr-dialog-connection-actions">

<md-button class="md-raised md-warn" ng-click="cancel()" md-autofocus>
                <md-icon>cancel</md-icon>
                <span ng-if="$root.$mdMedia('(min-width: 699px)')">{{ $root.p3xr.strings.intention.cancel }}</span>
                <md-tooltip ng-if="$root.$mdMedia('(max-width: 699px)')" md-direction="top">{{
                    $root.p3xr.strings.intention.cancel }}
                </md-tooltip>
            </md-button>

<span md-theme="{{ $root.p3xr.state.themeCommon }}">
                <md-button class="md-raised md-primary" ng-click="testConnection()">
                    <i class="fas fa-plug"></i>
                    {{ $root.p3xr.strings.intention.testConnection }}
                </md-button>
            </span>

<md-button class="md-raised md-primary" type="submit" ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                <md-icon>{{ options.type === 'new' ? 'add' : 'save' }}</md-icon>
                {{ options.type === 'new' ? $root.p3xr.strings.intention.add : $root.p3xr.strings.intention.save }}
            </md-button>

</md-dialog-actions>
    </form>
</md-dialog>

`/`	Focus search
`?`	Show this help
`Esc`	Unfocus input