mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 21:33:15 -07:00
update the email settings page
This commit is contained in:
tidusjar
parent
163d127c87
commit
b8632b2185
3 changed files with 224 additions and 225 deletions
|
|
@ -1,53 +1,58 @@
|
||||||
<settings-menu></settings-menu>
|
<settings-menu></settings-menu>
|
||||||
<div class="small-middle-container">
|
<div *ngIf="form" class="small-middle-container">
|
||||||
<div *ngIf="form">
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Lidarr Settings</legend>
|
<legend>Lidarr Settings</legend>
|
||||||
|
|
||||||
<div>
|
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
|
||||||
<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">
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 col-12 col-sm-12"></div>
|
||||||
<div class="md-form-field">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
|
||||||
<input matInput placeholder="Hostname or IP" formControlName="ip">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="md-form-field">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-slide-toggle [ngModelOptions]="{standalone: true}" [(ngModel)]="advanced">Advanced</mat-slide-toggle>
|
||||||
<input matInput placeholder="Port" formControlName="port">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
</div>
|
||||||
|
</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">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-form-field appearance="outline">
|
||||||
<input matInput placeholder="API Key" formControlName="apiKey">
|
<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-form-field>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<mat-slide-toggle formControlName="ssl">
|
<mat-slide-toggle formControlName="ssl">
|
||||||
Enable SSL
|
SSL
|
||||||
</mat-slide-toggle>
|
</mat-slide-toggle>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="md-form-field">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-form-field appearance="outline">
|
||||||
<input matInput placeholder="Base Url" formControlName="subDir">
|
<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>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
<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">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-form-field appearance="outline">
|
||||||
<mat-label>Quality Profiles</mat-label>
|
<mat-label>Quality Profiles</mat-label>
|
||||||
<mat-select formControlName="defaultQualityProfile" required>
|
<mat-select formControlName="defaultQualityProfile" required>
|
||||||
<mat-option *ngFor="let quality of qualities" [value]="quality.id">
|
<mat-option *ngFor="let quality of qualities" [value]="quality.id">
|
||||||
|
|
@ -55,12 +60,14 @@
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<div><button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
|
<div class="md-form-field" style="display:inline;margin-left:20px;">
|
||||||
*ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button></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>
|
||||||
|
|
||||||
<div class="md-form-field">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-form-field appearance="outline">
|
||||||
<mat-label>Default Root Folder</mat-label>
|
<mat-label>Default Root Folder</mat-label>
|
||||||
<mat-select formControlName="defaultRootPath" required>
|
<mat-select formControlName="defaultRootPath" required>
|
||||||
<mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
|
<mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
|
||||||
|
|
@ -68,12 +75,14 @@
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<div><button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
|
<div class="md-form-field" style="display:inline;margin-left:20px;">
|
||||||
*ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button></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>
|
||||||
|
|
||||||
<div class="md-form-field">
|
<div class="md-form-field">
|
||||||
<mat-form-field>
|
<mat-form-field appearance="outline">
|
||||||
<mat-label>Metadata Profile</mat-label>
|
<mat-label>Metadata Profile</mat-label>
|
||||||
<mat-select formControlName="metadataProfileId" required>
|
<mat-select formControlName="metadataProfileId" required>
|
||||||
<mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
|
<mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
|
||||||
|
|
@ -81,7 +90,8 @@
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<div><button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
|
<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>
|
*ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -98,8 +108,11 @@
|
||||||
</mat-slide-toggle>
|
</mat-slide-toggle>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="md-form-field" >
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="md-form-field">
|
||||||
<div>
|
<div>
|
||||||
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
|
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
|
||||||
Connectivity <span id="spinner"></span></button>
|
Connectivity <span id="spinner"></span></button>
|
||||||
|
|
@ -107,14 +120,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="md-form-field" >
|
<div class="md-form-field">
|
||||||
<div>
|
<div>
|
||||||
<button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
|
<button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
@ -5,40 +5,13 @@
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-md-6 {
|
.col-8 {
|
||||||
display: contents;
|
display: inline-table;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-md-5 {
|
.col-md-5 {
|
||||||
display: contents;
|
display: inline-table;
|
||||||
}
|
|
||||||
|
|
||||||
.control-label {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: block;
|
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">
|
<div *ngIf="emailForm" class="small-middle-container">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Email Notifications</legend>
|
<legend>Email Notifications</legend>
|
||||||
<div class="col-md-6">
|
<div class="row">
|
||||||
<form novalidate [formGroup]="emailForm" (ngSubmit)="onSubmit(emailForm)">
|
<div class="col-md-8">
|
||||||
|
<form novalidate [formGroup]="emailForm" style="padding-top:2%;" (ngSubmit)="onSubmit(emailForm)">
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<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>
|
|
||||||
</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="form-group">
|
|
||||||
<label for="portNumber" class="control-label">SMTP Port</label>
|
|
||||||
<div>
|
<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">
|
<div class="md-form-field">
|
||||||
<small *ngIf="emailForm.get('port').hasError('required')" class="error-text">The Port is required</small>
|
<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>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<label style="padding-left: 0" for="senderAddress" class="control-label col-md-12">Email Sender</label>
|
<div class="md-form-field">
|
||||||
<div style="padding-left: 0" class="col-md-6">
|
<mat-form-field appearance="outline">
|
||||||
<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">
|
<mat-label>SMTP Host</mat-label>
|
||||||
<small *ngIf="emailForm.get('senderAddress').hasError('required')" class="error-text">The Email Sender Address is required</small>
|
<input matInput formControlName="host">
|
||||||
<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>
|
<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>
|
||||||
<div style="padding-left: 0" class="col-md-6">
|
<div class="md-form-field">
|
||||||
<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">
|
<mat-form-field appearance="outline">
|
||||||
</div>
|
<mat-label>Email Sender</mat-label>
|
||||||
<br/>
|
<input matInput formControlName="senderAddress" matTooltip="The email address that the emails will be sent from">
|
||||||
<br/>
|
<mat-error *ngIf="emailForm.get('senderAddress').hasError('required')">
|
||||||
<br/>
|
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>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="md-form-field">
|
||||||
<label for="adminEmail" class="control-label">Admin Email</label>
|
<mat-form-field appearance="outline">
|
||||||
<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)">
|
<mat-label>Admin Email</mat-label>
|
||||||
<small *ngIf="emailForm.get('adminEmail').hasError('required')" class="error-text">The Admin Email Address is required</small>
|
<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)">
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group" *ngIf="emailForm.controls['username'].validator">
|
<div class="md-form-field" *ngIf="emailForm.controls['username'].validator">
|
||||||
<label for="username" class="control-label">Username</label>
|
<mat-form-field appearance="outline">
|
||||||
|
<mat-label>Username</mat-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">
|
<input matInput formControlName="username" matTooltip="The username if authentication is enabled">
|
||||||
<small *ngIf="emailForm.get('username').hasError('required')" class="error-text">The Username is required</small>
|
<mat-error *ngIf="emailForm.get('username').hasError('required')">
|
||||||
|
Username is <strong>required</strong>
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<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="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>
|
||||||
|
<div class="row top-space">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div>
|
<div>
|
||||||
<button [disabled]="emailForm.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
|
<button mat-raised-button type="button" class="btn-spacing" color="accent"
|
||||||
<button [disabled]="emailForm.invalid" type="submit" (click)="test(emailForm)" class="btn btn-primary-outline">
|
(click)="test(emailForm)" [disabled]="emailForm.invalid">Test <div id="spinner"></div>
|
||||||
Test
|
|
||||||
<div id="spinner"></div>
|
|
||||||
</button>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-md-4">
|
||||||
<notification-templates [templates]="templates"></notification-templates>
|
<notification-templates [templates]="templates"></notification-templates>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue