Skip to content
Snippets Groups Projects
Commit ee7246d7 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #13671 TIME 3:30 front installer mail server

parent 8c045912
No related branches found
No related tags found
No related merge requests found
......@@ -3,7 +3,7 @@
<div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
{{lang.stepCustomization_desc}}
</div>
<form [formGroup]="stepFormGroup" style="display: content;">
<form [formGroup]="stepFormGroup" style="display: contents;">
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>{{lang.instanceId}}</mat-label>
......
......@@ -7,6 +7,20 @@
<div class="container" [class.fullContainer]="appService.getViewMode()">
<div class="container-content" style="overflow: hidden;">
<mat-horizontal-stepper [@.disabled]="true" linear #stepper style="height: 100vh;overflow: auto;" (selectionChange)="initStep($event)">
<mat-step [stepControl]="appMailserver.getFormGroup()">
<ng-template matStepLabel>{{lang.stepMailServer}}</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-mailserver #appMailserver #stepContent (tiggerInstall)="endInstall()"></app-mailserver>
</div>
<button mat-fab matStepperPrevious class="previousStepButton" color="primary">
<mat-icon class="fa fa-arrow-left"></mat-icon>
</button>
<button mat-fab matStepperNext class="nextStepButton" color="primary" [disabled]="!appMailserver.isValidStep()">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step label="install">
<ng-template matStepLabel>Installation</ng-template>
<div class="stepContainer">
......@@ -88,13 +102,6 @@
</button>
</div>
</mat-step>
<mat-step optional>
<ng-template matStepLabel>Serveur mail</ng-template>
Bonjour
<div>
<button mat-button matStepperPrevious>Back</button>
</div>
</mat-step>
<ng-template matStepperIcon="edit">
<mat-icon class="fa fa-check stepIcon"></mat-icon>
</ng-template>
......
......@@ -8,6 +8,7 @@ import { DatabaseComponent } from './database/database.component';
import { DocserversComponent } from './docservers/docservers.component';
import { CustomizationComponent } from './customization/customization.component';
import { UseradminComponent } from './useradmin/useradmin.component';
import { MailserverComponent } from './mailserver/mailserver.component';
import { InstallerRoutingModule } from './installer-routing.module';
@NgModule({
......@@ -24,6 +25,7 @@ import { InstallerRoutingModule } from './installer-routing.module';
DocserversComponent,
CustomizationComponent,
UseradminComponent,
MailserverComponent
],
entryComponents: [InstallActionComponent]
})
......
<div class="stepContent">
<h2 class="stepContentTitle"><i class="fa fa-mail-bulk"></i> {{lang.stepMailServer}}</h2>
<div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;"
[innerHTML]="lang.stepMailServer_desc">
</div>
<div class="alert-message alert-message-danger" role="alert" style="margin-top: 30px;min-width: 100%;"
[innerHTML]="lang.stepMailServer_warning">
</div>
<mat-drawer-container autosize>
<mat-drawer-content>
<div style="width: 99%;">
<form [formGroup]="stepFormGroup" style="display: contents;">
<mat-form-field>
<mat-select #smtpType name="smtpType" [placeholder]="lang.configurationType"
formControlName="type" required>
<mat-option *ngFor="let type of smtpTypeList" [value]="type.id">
{{type.label}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="row" style="margin:0px;">
<div class="col-md-2">
<mat-form-field>
<mat-select name="SMTPSecure" [placeholder]="lang.smtpAuth" formControlName="secure">
<mat-option *ngFor="let security of smtpSecList" [value]="security.id">
{{security.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-9">
<mat-form-field>
<input matInput name="host" formControlName="host" [placeholder]="lang.host" required>
</mat-form-field>
</div>
<div class="col-md-1">
<mat-form-field>
<input name="port" type="number" matInput formControlName="port"
[placeholder]="lang.port" required>
</mat-form-field>
</div>
</div>
<mat-slide-toggle color="primary" name="SMTPAuth" formControlName="auth">
{{lang.enableAuth}}
</mat-slide-toggle>
<mat-form-field>
<input name="user" formControlName="user" matInput placeholder="{{lang.id}}" required>
</mat-form-field>
<mat-form-field>
<input name="password" [type]="hidePassword ? 'password' : 'text'" formControlName="password"
matInput [placeholder]="this.lang.password" required>
<mat-icon color="primary" style="cursor: pointer;" matSuffix
(click)="hidePassword = !hidePassword" class="fa fa-2x"
[ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
</mat-form-field>
<mat-form-field>
<input name="mailFrom" formControlName="from" required matInput [placeholder]="lang.mailFrom">
</mat-form-field>
</form>
</div>
</mat-drawer-content>
<mat-drawer #checkMailserverContent mode="side" position="end" style="padding:10px;width: 350px;">
<mat-nav-list disableRipple="true" style="display: flex;flex-direction: column;">
<h3 mat-subheader>{{lang.emailSendTest}}</h3>
<mat-form-field>
<input name="recipientTest" matInput placeholder="{{lang.mailTo}}" [(ngModel)]="recipientTest"
[disabled]="emailSendLoading">
<mat-icon *ngIf="!emailSendLoading" title="{{lang.beginSendTest}}" (click)="testEmailSend()"
color="primary" style="cursor: pointer;" matSuffix class="fa fa-paper-plane fa-2x"></mat-icon>
</mat-form-field>
<mat-list-item *ngIf="emailSendResult.msg != ''">
<mat-icon mat-list-icon class="fas {{emailSendResult.icon}} fa-2x"></mat-icon>
<p mat-line> {{emailSendResult.msg}} </p>
</mat-list-item>
</mat-nav-list>
<div class="bash" *ngIf="this.emailSendResult.msg === lang.emailSendFailed">
{{this.emailSendResult.debug}}
</div>
</mat-drawer>
</mat-drawer-container>
<div class="text-center">
<button mat-raised-button type="button" color="primary" (click)="checkMailserverContent.open()"
[disabled]="!stepFormGroup.valid">{{lang.checkSendmail}}</button>
</div>
</div>
\ No newline at end of file
@import '../../../css/vars.scss';
.stepContent {
// max-width: 850px;
margin: auto;
.stepContentTitle {
color: $primary;
margin-bottom: 30px;
border-bottom: solid 1px;
padding: 0;
}
}
.backgroundList {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
.selected {
transition: all 0.3s;
opacity: 1 !important;
border: solid 10px $secondary !important;
}
.backgroundItem {
border: solid 0px $secondary;
opacity: 0.5;
transition: all 0.3s;
cursor: pointer;
height: 120px;
background-size: cover !important;
}
.backgroundItem:hover {
transition: all 0.3s;
opacity: 1 !important;
}
.bash {
background: #34495e;
height: 310px;
border-radius: 5px;
top: 40px;
display: absolute;
color: #fff;
padding: 10px;
margin: 10px;
}
mat-drawer-container {
background: none !important;
}
\ No newline at end of file
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn } from '@angular/forms';
import { LANG } from '../../translate.component';
import { StepAction } from '../types';
import { DomSanitizer } from '@angular/platform-browser';
import { NotificationService } from '../../../service/notification/notification.service';
import { environment } from '../../../environments/environment';
import { ScanPipe } from 'ngx-pipes';
import { debounceTime, filter, tap, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs/internal/observable/of';
import { MatDrawer } from '@angular/material/sidenav';
declare var tinymce: any;
@Component({
selector: 'app-mailserver',
templateUrl: './mailserver.component.html',
styleUrls: ['./mailserver.component.scss'],
})
export class MailserverComponent implements OnInit {
lang: any = LANG;
hidePassword: boolean = true;
stepFormGroup: FormGroup;
testRecipient: string = '';
emailSendLoading: boolean = false;
emailSendResult: any = {
msg: '',
debug: ''
};
smtpTypeList = [
{
id: 'smtp',
label: this.lang.smtpclient
},
{
id: 'sendmail',
label: this.lang.smtprelay
},
{
id: 'qmail',
label: this.lang.qmail
},
{
id: 'mail',
label: this.lang.phpmail
}
];
smtpSecList = [
{
id: '',
label: this.lang.none
},
{
id: 'ssl',
label: 'ssl'
},
{
id: 'tls',
label: 'tls'
}
];
@ViewChild('checkMailserverContent', { static: true }) checkMailserverContent: MatDrawer;
constructor(
private _formBuilder: FormBuilder,
private notify: NotificationService,
public http: HttpClient,
) {
const valEmail: ValidatorFn[] = [Validators.pattern(/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/), Validators.required];
this.stepFormGroup = this._formBuilder.group({
firstCtrl: ['success', Validators.required],
type: ['smtp', Validators.required],
host: ['', Validators.required],
auth: [true],
user: ['', Validators.required],
password: ['', Validators.required],
secure: ['ssl', Validators.required],
port: ['465', Validators.required],
charset: ['utf-8', Validators.required],
from: ['', valEmail],
});
}
ngOnInit(): void {
this.stepFormGroup.valueChanges.subscribe(() => {
if (this.checkMailserverContent.opened) {
this.checkMailserverContent.close();
this.emailSendLoading = false;
this.emailSendResult = {
icon: 'fa-paper-plane primary',
msg: this.lang.emailSendInProgress,
debug: ''
};
}
});
this.stepFormGroup.controls['type'].valueChanges.pipe(
tap((data: any) => {
if (['smtp', 'mail'].indexOf(data) === -1) {
this.stepFormGroup.controls['secure'].disable();
this.stepFormGroup.controls['host'].disable();
this.stepFormGroup.controls['port'].disable();
this.stepFormGroup.controls['auth'].disable();
this.stepFormGroup.controls['user'].disable();
this.stepFormGroup.controls['password'].disable();
} else {
this.stepFormGroup.controls['secure'].enable();
this.stepFormGroup.controls['host'].enable();
this.stepFormGroup.controls['port'].enable();
this.stepFormGroup.controls['auth'].enable();
if (this.stepFormGroup.controls['auth'].value) {
this.stepFormGroup.controls['user'].enable();
this.stepFormGroup.controls['password'].enable();
}
}
})
).subscribe();
this.stepFormGroup.controls['auth'].valueChanges.pipe(
tap((data: any) => {
if (!data) {
this.stepFormGroup.controls['user'].disable();
this.stepFormGroup.controls['password'].disable();
} else {
this.stepFormGroup.controls['user'].enable();
this.stepFormGroup.controls['password'].enable();
}
})
).subscribe();
}
testEmailSend() {
this.emailSendResult = {
icon: 'fa-paper-plane primary',
msg: this.lang.emailSendInProgress,
debug: ''
};
const email = {
'sender': { 'email': this.stepFormGroup.controls['from'] },
'recipients': [this.testRecipient],
'object': '[' + this.lang.doNotReply + '] ' + this.lang.emailSendTest,
'status': 'EXPRESS',
'body': this.lang.emailSendTest,
'isHtml': false
};
this.emailSendLoading = true;
this.http.get(`../rest/emails`).pipe(
tap((data: any) => {
this.emailSendLoading = false;
this.emailSendResult = {
icon: 'fa-check green',
msg: this.lang.emailSendSuccess,
debug: ''
};
}),
catchError((err: any) => {
console.log(err);
this.emailSendLoading = false;
this.emailSendResult = {
icon: 'fa-times red',
msg: this.lang.emailSendFailed,
debug: err.error.errors
};
return of(false);
})
).subscribe();
}
initStep() {
return false;
}
isValidStep() {
return this.stepFormGroup === undefined ? false : this.stepFormGroup.valid;
}
getFormGroup() {
return this.stepFormGroup;
}
checkStep() {
return this.stepFormGroup.valid;
}
getInfoToInstall(): StepAction[] {
return [];
}
}
......@@ -1804,4 +1804,7 @@ export const LANG_FR = {
"customAlreadyExist": "Ce custom semble déjà exister.",
"onlySpecialCharAllowed": "Seul les caractères spéciaux {0} sont autorisés.",
"dbNotEmpty": "Cette base de données existe déjà et n'est pas vide",
"stepMailServer": "Serveur de mail",
"stepMailServer_desc": "Configurer votre serveur de mail afin de prévenir les utilisateurs par mail des différents échanges survenus dans l'application.<br/>Cette étape peut être passé et être configurée plus tard.",
"stepMailServer_warning": "Si aucun serveur de mail n'est renseigné, les nouveaux utilisateurs ne recevront pas leur jeton de première connexion !",
};
......@@ -120,18 +120,27 @@ export class FunctionsService {
}
debug(msg: string, route: string) {
const info: any = {
let info: any = {
route : route,
session : {
id : this.authService.getAppSession(),
expireIn : new Date((JSON.parse(atob(this.authService.getToken().split('.')[1])).exp) * 1000)
},
refreshSession : {
id : this.authService.getAppSession(),
expireIn : new Date((JSON.parse(atob(this.authService.getRefreshToken().split('.')[1])).exp) * 1000)
},
user : this.headerService.user,
session : 'No user logged !',
refreshSession : 'No user logged !',
user : 'No user logged !'
};
if (this.authService.getToken() != null) {
info = {
route : route,
session : {
id : this.authService.getAppSession(),
expireIn : new Date((JSON.parse(atob(this.authService.getToken().split('.')[1])).exp) * 1000)
},
refreshSession : {
id : this.authService.getAppSession(),
expireIn : new Date((JSON.parse(atob(this.authService.getRefreshToken().split('.')[1])).exp) * 1000)
},
user : this.headerService.user,
};
}
if (msg !== '') {
console.log(msg, info);
} else {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment