customization.component.html

<div class="stepContent">
    <h2 class="stepContentTitle"><i class="fas fa-tools"></i> {{lang.customization}}</h2>
    <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: contents;">
        <div class="col-md-6">
            <mat-form-field appearance="outline">
                <mat-label>{{lang.instanceId}}</mat-label>
                <input matInput formControlName="customId">
                <mat-error>
                    <ng-container *ngIf="stepFormGroup.controls['customId'].errors?.customExist">
                        {{lang.customAlreadyExist}}
                    </ng-container>
                    <ng-container *ngIf="stepFormGroup.controls['customId'].errors?.pattern">
                        {{lang.onlySpecialCharAllowed | scan : ['"_", "-"']}}
                    </ng-container>
                </mat-error>
            </mat-form-field>
            <mat-form-field appearance="outline">
                <mat-label>{{lang.applicationName}}</mat-label>
                <input matInput formControlName="appName">
            </mat-form-field>
            <div>{{lang.loginMsg}} : </div>
            <textarea style="padding-top: 10px;" name="loginMessage" id="loginMessage"
                formControlName="loginMessage"></textarea>
            <br />
            <br />
            <div>{{lang.homeMsg}} : </div>
            <textarea style="padding-top: 10px;" name="homeMessage" id="homeMessage"
                formControlName="homeMessage"></textarea>
            <br />
            <br />
        </div>
        <div class="col-md-6">
            <div>{{lang.chooseLogo}} : </div>
            <div>
                <mat-card style="width: 350px;background-size: 100%;cursor: pointer;" matRipple>
                    <img [src]="logoURL()" (click)="clickLogoButton(uploadLogo)" style="width: 100%;" />
                    <input type="file" name="files[]" #uploadLogo (change)="uploadTrigger($event, 'logo')"
                        accept="image/svg+xml" style="display: none;">
                </mat-card>
            </div>
            <br />
            <div>{{lang.chooseLoginBg}} : </div>
            <div class="backgroundList">
                <mat-card (click)="selectBg('assets/bodylogin.jpg')" style="opacity: 0.3;" class="backgroundItem"
                    [class.disabled]="stepFormGroup.controls['bodyLoginBackground'].disabled"
                    [class.selected]="stepFormGroup.controls['bodyLoginBackground'].value === 'assets/bodylogin.jpg'"
                    style="background:url(assets/bodylogin.jpg);background-size: cover;">
                </mat-card>
                <mat-card *ngFor="let background of backgroundList"
                    (click)="selectBg(background.url)"
                    style="opacity: 0.3;" class="backgroundItem"
                    [class.selected]="background.url === stepFormGroup.controls['bodyLoginBackground'].value"
                    [class.disabled]="stepFormGroup.controls['bodyLoginBackground'].disabled"
                    [style.background]="'url('+background.url+')'">
                </mat-card>
                <mat-card *ngIf="!stepFormGroup.controls['bodyLoginBackground'].disabled"
                    style="opacity: 0.3;display: flex;align-items: center;justify-content: center;"
                    class="backgroundItem" (click)="uploadFile.click()">
                    <input type="file" name="files[]" #uploadFile (change)="uploadTrigger($event, 'bg')"
                        accept="image/jpeg" style="display: none;">
                    <i class="fa fa-plus" style="font-size: 30px;color: #666;"></i>
                </mat-card>
            </div>
        </div>
    </form>
</div>