update the email settings page

pull/3632/head
tidusjar 4 years ago
parent 163d127c87
commit b8632b2185

@ -1,120 +1,132 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<div *ngIf="form">
<fieldset>
<legend>Lidarr Settings</legend>
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Lidarr Settings</legend>
<div>
<form novalidate [formGroup]="form" class="row" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div>
<div class="md-form-field"><mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle></div>
<div class="md-form-field"><mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle></div>
</div>
<div class="col-md-5">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<div class="row">
<div class="col-md-12 col-12 col-sm-12"></div>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="Hostname or IP" formControlName="ip">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="Port" formControlName="port">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="API Key" formControlName="apiKey">
</mat-form-field>
</div>
<div>
<mat-slide-toggle formControlName="ssl">
Enable SSL
</mat-slide-toggle>
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="Base Url" formControlName="subDir">
</mat-form-field>
<div class="md-form-field">
<mat-slide-toggle [ngModelOptions]="{standalone: true}" [(ngModel)]="advanced">Advanced</mat-slide-toggle>
</div>
</div>
<div class="col-md-5">
<div class="md-form-field">
<mat-form-field>
<mat-label>Quality Profiles</mat-label>
<mat-select formControlName="defaultQualityProfile" required>
<mat-option *ngFor="let quality of qualities" [value]="quality.id">
{{quality.name}}
</mat-option>
</mat-select>
</mat-form-field>
<div><button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
*ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button></div>
</div>
<div class="md-form-field">
<mat-form-field>
<mat-label>Default Root Folder</mat-label>
<mat-select formControlName="defaultRootPath" required>
<mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
{{folder.path}}
</mat-option>
</mat-select>
</mat-form-field>
<div><button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
*ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button></div>
</div>
<div class="md-form-field">
<mat-form-field>
<mat-label>Metadata Profile</mat-label>
<mat-select formControlName="metadataProfileId" required>
<mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
{{folder.name}}
</mat-option>
</mat-select>
</mat-form-field>
<div><button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
*ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
<div class="row">
<div class="col-md-7 col-8 col-sm-12">
<label for="username" class="control-label">
<h3>Server Configuration</h3>
</label>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Hostname or IP</mat-label>
<input matInput formControlName="ip">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Port</mat-label>
<input matInput formControlName="port">
</mat-form-field>
<mat-slide-toggle formControlName="ssl">
SSL
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>API key</mat-label>
<input matInput formControlName="apiKey">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Base URL</mat-label>
<input matInput formControlName="subDir">
</mat-form-field>
</div>
</div>
<div class="col-md-5 col-4 col-sm-12">
<label for="username" class="control-label">
<h3>Interface</h3>
</label>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Quality Profiles</mat-label>
<mat-select formControlName="defaultQualityProfile" required>
<mat-option *ngFor="let quality of qualities" [value]="quality.id">
{{quality.name}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="md-form-field" style="display:inline;margin-left:20px;">
<button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
*ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Default Root Folder</mat-label>
<mat-select formControlName="defaultRootPath" required>
<mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
{{folder.path}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="md-form-field" style="display:inline;margin-left:20px;">
<button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
*ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div>
<div class="md-form-field">
<mat-slide-toggle formControlName="albumFolder">
Album Folder
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Metadata Profile</mat-label>
<mat-select formControlName="metadataProfileId" required>
<mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
{{folder.name}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="md-form-field" style="display:inline;margin-left:20px;">
<button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
*ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
</div>
<div class="md-form-field" *ngIf="advanced" style="color:#ff761b">
<mat-slide-toggle formControlName="addOnly">
Do not search
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-slide-toggle formControlName="albumFolder">
Album Folder
</mat-slide-toggle>
</div>
<div class="md-form-field" >
<div>
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
Connectivity <span id="spinner"></span></button>
<div class="md-form-field" *ngIf="advanced" style="color:#ff761b">
<mat-slide-toggle formControlName="addOnly">
Do not search
</mat-slide-toggle>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form-field">
<div>
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
Connectivity <span id="spinner"></span></button>
</div>
</div>
<div class="md-form-field" >
<div>
<button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
<div class="md-form-field">
<div>
<button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</fieldset>
</div>
</div>
</fieldset>
</div>

@ -5,40 +5,13 @@
margin-top: 10px;
}
.col-md-6 {
display: contents;
.col-8 {
display: inline-table;
}
.col-md-5 {
display: contents;
}
.control-label {
font-weight: 400;
display: inline-table;
}
.row {
display: block;
}
.btn-danger-outline {
background-color: #E84C3D;
}
.btn-success-outline {
background-color: #1b9d1b;
}
::ng-deep .dark .btn:hover {
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
@media (min-width:1440px) {
.col-md-6 {
display: inline-table;
}
.col-md-5 {
display: inline-table;
}
}

@ -1,105 +1,119 @@

<settings-menu></settings-menu>
<settings-menu></settings-menu>
<div *ngIf="emailForm" class="small-middle-container">
<fieldset>
<legend>Email Notifications</legend>
<div class="col-md-6">
<form novalidate [formGroup]="emailForm" (ngSubmit)="onSubmit(emailForm)">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="enable" formControlName="enabled">
<label for="enable">Enabled</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="Authentication" formControlName="authentication"><label for="Authentication">Enable SMTP Authentication</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="disableTLS" formControlName="disableTLS"><label for="disableTLS">Disable TLS/SSL</label>
<div class="row">
<div class="col-md-8">
<form novalidate [formGroup]="emailForm" style="padding-top:2%;" (ngSubmit)="onSubmit(emailForm)">
<div class="row">
<div>
<div class="md-form-field">
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-slide-toggle formControlName="authentication">Enable SMTP Authentication
</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-slide-toggle formControlName="disableTLS">Disable TLS/SSL</mat-slide-toggle>
</div>
<div class="md-form-field">
<mat-slide-toggle formControlName="disableCertificateChecking">Disable Certificate
Checking</mat-slide-toggle>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="disableCertificateChecking" formControlName="disableCertificateChecking"><label for="disableCertificateChecking">Disable Certificate Checking</label>
</div>
</div>
<div class="form-group">
<label for="host" class="control-label">SMTP Host</label>
<input type="text" class="form-control form-control-custom " id="host" name="host" placeholder="localhost" formControlName="host" [ngClass]="{'form-error': emailForm.get('host').hasError('required')}">
<small *ngIf="emailForm.get('host').hasError('required')" class="error-text">The Host is required</small>
</div>
<div class="row">
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>SMTP Host</mat-label>
<input matInput formControlName="host">
<mat-error *ngIf="emailForm.get('host').hasError('required')">
Host is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>SMTP Port</mat-label>
<input matInput formControlName="port">
<mat-error *ngIf="emailForm.get('port').hasError('required')">
Port is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Email Sender</mat-label>
<input matInput formControlName="senderAddress" matTooltip="The email address that the emails will be sent from">
<mat-error *ngIf="emailForm.get('senderAddress').hasError('required')">
Email Sender Address is <strong>required</strong>
</mat-error>
<mat-error *ngIf="emailForm.get('senderAddress').hasError('email')">
Email Sender Address needs to be a valid email address
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Sender Name</mat-label>
<input matInput formControlName="senderName" matTooltip="The 'Friendly' name that will appear in the 'FROM:' part of the email">
</mat-form-field>
</div>
<div class="form-group">
<label for="portNumber" class="control-label">SMTP Port</label>
<div>
<input type="text" class="form-control form-control-custom " [ngClass]="{'form-error': emailForm.get('port').hasError('required')}" id="portNumber" name="Port" placeholder="Port Number" formControlName="port">
<small *ngIf="emailForm.get('port').hasError('required')" class="error-text">The Port is required</small>
</div>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline">
<mat-label>Admin Email</mat-label>
<input matInput formControlName="adminEmail" matTooltip="The administrator email will be used to send emails for admin only notifications (e.g. New Requests that require approvals)">
<mat-error *ngIf="emailForm.get('adminEmail').hasError('required')">
Admin Email is <strong>required</strong>
</mat-error>
<mat-error *ngIf="emailForm.get('adminEmail').hasError('email')">
Admin Email needs to be a valid email address
</mat-error>
</mat-form-field>
</div>
<div class="form-group">
<label style="padding-left: 0" for="senderAddress" class="control-label col-md-12">Email Sender</label>
<div style="padding-left: 0" class="col-md-6">
<input type="text" class="form-control form-control-custom " id="senderAddress" [ngClass]="{'form-error': emailForm.get('senderAddress').hasError('required'), 'form-error': emailForm.get('senderAddress').hasError('incorrectMailFormat')}" name="senderAddress" formControlName="senderAddress" tooltipPosition="top" placeholder="Sender Address" pTooltip="The email address that the emails will be sent from">
<small *ngIf="emailForm.get('senderAddress').hasError('required')" class="error-text">The Email Sender Address is required</small>
<small *ngIf="emailForm.get('senderAddress').hasError('email') && !emailForm.get('senderAddress').hasError('required')" class="error-text">The Email Sender Address needs to be a valid email address</small>
</div>
<div style="padding-left: 0" class="col-md-6">
<input type="text" class="form-control form-control-custom " id="senderName" name="senderName" formControlName="senderName" tooltipPosition="top" placeholder="Sender Name" pTooltip="The 'Friendly' name that will appear in the 'FROM:' part of the email">
</div>
<br/>
<br/>
<br/>
</div>
<div class="form-group">
<label for="adminEmail" class="control-label">Admin Email</label>
<input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': emailForm.get('adminEmail').hasError('required'), 'form-error': emailForm.get('adminEmail').hasError('email')}" id="adminEmail" name="adminEmail" formControlName="adminEmail" tooltipPosition="top" pTooltip="The administrator email will be used to send emails for admin only notifications (e.g. New Requests that require approvals)">
<small *ngIf="emailForm.get('adminEmail').hasError('required')" class="error-text">The Admin Email Address is required</small>
<small *ngIf="emailForm.get('adminEmail').hasError('email') && !emailForm.get('adminEmail').hasError('required')" class="error-text">The Admin Email needs to be a valid email address</small>
</div>
<div class="form-group" *ngIf="emailForm.controls['username'].validator">
<label for="username" class="control-label">Username</label>
<input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': emailForm.get('username').hasError('required')}" id="username" name="username" formControlName="username" pTooltip="The username if authentication is enabled" tooltipPosition="top">
<small *ngIf="emailForm.get('username').hasError('required')" class="error-text">The Username is required</small>
</div>
<div class="form-group" *ngIf="emailForm.get('password').validator">
<label for="password" class="control-label">Password</label>
<input type="password" class="form-control form-control-custom" [ngClass]="{'form-error': emailForm.get('password').hasError('required')}" id="password" name="password" formControlName="password" pTooltip="The password if authentication is enabled" tooltipPosition="top">
<small *ngIf="emailForm.get('password').hasError('required')" class="error-text">The Password is required</small>
</div>
<div class="md-form-field" *ngIf="emailForm.controls['username'].validator">
<mat-form-field appearance="outline">
<mat-label>Username</mat-label>
<input matInput formControlName="username" matTooltip="The username if authentication is enabled">
<mat-error *ngIf="emailForm.get('username').hasError('required')">
Username is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="form-group">
<div>
<button [disabled]="emailForm.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
<button [disabled]="emailForm.invalid" type="submit" (click)="test(emailForm)" class="btn btn-primary-outline">
Test
<div id="spinner"></div>
</button>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput formControlName="password" matTooltip="The password if authentication is enabled">
<mat-error *ngIf="emailForm.get('password').hasError('required')">
Password is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row top-space">
<div class="form-group">
<div>
<button mat-raised-button type="button" class="btn-spacing" color="accent"
(click)="test(emailForm)" [disabled]="emailForm.invalid">Test <div id="spinner"></div>
</button>
</div>
</div>
<div class="form-group">
<div>
<button mat-raised-button type="submit" class="btn-spacing" color="primary"
[disabled]="emailForm.invalid">Submit</button>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
<div class="col-md-6">
<div class="col-md-4">
<notification-templates [templates]="templates"></notification-templates>
</div>
</div>
</fieldset>
</div>
Loading…
Cancel
Save