otp.component.html

<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-menu-button menu="left-menu"></ion-menu-button>
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>{{title}}</ion-title>
    </ion-toolbar>
</ion-header>
<form *ngIf="!loading" style="display: contents;" id="adminForm" (ngSubmit)="onSubmit()" #adminForm="ngForm">
    <ion-content>
        <ion-item>
            <ion-label color="secondary" position="floating">{{'lang.label' | translate}} *</ion-label>
            <ion-input name="label" [maxlength]="128" [(ngModel)]="connector.label" required>
            </ion-input>
        </ion-item>
        <ion-list>
            <ion-radio-group name="type" [(ngModel)]="connector.type" [value]="connector.type">
                <ion-list-header>
                    <ion-label color="secondary">{{'lang.source' | translate}} *</ion-label>
                </ion-list-header>
                <ion-item *ngFor="let connector of connectorTypes">
                    <ion-radio slot="start" [value]="connector.id"></ion-radio>
                    <ion-avatar slot="start">
                        <img [src]="connector.logo">
                      </ion-avatar>
                    <ion-label>
                        {{connector.id | translate}}
                    </ion-label>
                </ion-item>
            </ion-radio-group>
        </ion-list>
        <ion-item>
            <ion-label color="secondary" position="floating">{{'lang.apiUri' | translate}} *</ion-label>
            <ion-input name="apiUri" [maxlength]="128" [(ngModel)]="connector.apiUri" required>
            </ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="secondary" position="floating">{{'lang.apiKey' | translate}} *</ion-label>
            <ion-input name="apiKey" [maxlength]="128" [(ngModel)]="connector.apiKey" required>
            </ion-input>
        </ion-item>
        <ion-list>
            <ion-list-header>
                <ion-label color="secondary">
                    {{'lang.securityCodeSendMode' | translate}} *
                </ion-label>
            </ion-list-header>
            <ion-item *ngFor="let mode of securityModes">
                <ion-label>{{mode}}</ion-label>
                <ion-checkbox slot="start" [checked]="isCheckedSecurityMode(mode)"
                    (ionChange)="toggleSecurityMode($event.detail)" [value]="mode"></ion-checkbox>
            </ion-item>
        </ion-list>
        <ion-list *ngIf="connector.securityModes.includes('sms')">
            <ion-list-header>
                <ion-label color="secondary">
                    {{ 'lang.smsContent' | translate}} <ng-container
                    *ngIf="connector.securityModes.includes('sms')">*</ng-container>
                </ion-label>
            </ion-list-header>
            <ion-item>
                <ion-textarea name ="smsContent"rows="2" cols="10" [(ngModel)]="connector.message.sms" 
                    [required]="connector.securityModes.includes('sms')" placeholder="Ex: Bonjour Alain Dupont, le code de sécurité est ...">
                </ion-textarea>
            </ion-item>
        </ion-list>
        <ion-list *ngIf="connector.securityModes.includes('email')">
            <ion-list-header>
                <ion-label color="secondary">
                    {{ 'lang.emailContent' | translate}} <ng-container
                    *ngIf="connector.securityModes.includes('email')">*</ng-container>
                </ion-label>
            </ion-list-header>
            <ion-item>
                <ion-textarea name="emailContent" rows="2" cols="10" [(ngModel)]="connector.message.email"
                    [required]="connector.securityModes.includes('email')" placeholder="Ex: Bonjour Alain Dupont, le code de sécurité est ...">
                </ion-textarea>
            </ion-item>
        </ion-list>
        <ion-item text-center lines="none" style="position: sticky;bottom:0px;z-index:1;">
            <div style="display: flex;align-items: center;justify-content: center;width: 100%;background: white;">
                <ion-button type="submit" shape="round" size="large" fill="outline" color="primary"
                    [disabled]="!adminForm.form.valid || connector.securityModes.length === 0">
                    <ion-label style="font-size: 13px;">{{'lang.validate' | translate}}</ion-label>
                </ion-button>
                <ion-button *ngIf="!creationMode" type="button" shape="round" size="large" fill="outline" color="danger"
                    (click)="deleteconnector()">
                    <ion-label style="font-size: 13px;">{{'lang.delete' | translate}}</ion-label>
                </ion-button>
            </div>
        </ion-item>
    </ion-content>
</form>