connect/src/app/utils/subscribe/invite/invite.component.html

<div *ngIf="longView == true">
<div class=" uk-section  uk-margin-small-top tm-middle uk-container" id="tm-main">

        <div class="uk-container  uk-margin-bottom">

                <div id="invite" class=" uk-card uk-card-default uk-padding">
                     <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Invite users to subscribe</div>
                     <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span>></div>
                     <div *ngIf="communityId != null && !showLoading && !errorMessage">
                     <!--table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-table uk-align-center"-->
                        <table class="uk-table uk-align-center">
                                <tbody>
                                        <!-- <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <li>Invite by email</li>
                                            </td>
                                        </tr> -->
                                        <tr>
                                            <td for="from" class="uk-text-bold uk-width-1-3@xl uk-width-1-3@m uk-width-1-3@s uk-text-right">From:</td>
                                            <td class="uk-text-left uk-width-expand">
                                                <input  placeholder="Type your name" type="text"
                                                        class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)] = "body.fromName" id="from">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td for="email.recipients[0]" class="uk-text-bold uk-text-right">To <span class="uk-text-danger uk-text-bold">*</span> :</td>
                                            <td class="uk-text-left">
                                                <!-- <div *ngIf="email.recipients && email.recipients[0] != ''">
                                                        <div >
                                                        </div>
                                                        <div *ngFor='let emailsss of email.recipients.split(,), let index; trackBy:trackByFn'> -->
                                                                <!-- <div *ngIf="!email[i].match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')"
                                                                        class="uk-width-large uk-text-danger uk-text-small uk-margin-top"> Please add a valid email. </div> -->
                                                        <!-- </div>
                                                </div> -->
                                                <div *ngIf="!recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add valid email/s.</div>
                                                <div *ngIf="!recipients" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.</div>
                                                <input  placeholder="email" type="text"
                                                        class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)] = "recipients" id="recipients"
                                                        required>
                                                <div class="uk-width-medium uk-text-muted uk-text-small style=display:none">separate multiple emails with a comma</div>
                                            </td>

                                        </tr>
                                </tbody>
                        </table>
                        <div class="boundary-align uk-panel uk-placeholder">

                        <table class="uk-table uk-align-center">
                                <tbody>
                                        <!-- <tr>
                                           <td class="uk-text-bold uk-width-1-4@xl uk-width-1-4@m uk-width-1-4@s uk-text-right"></td>
                                           <td class="uk-text-left">
                                                <{{body.salutation}}<br>-->
                                                <!-- <span *ngIf="body.fromName == ''" class="uk-text-muted">
                                                        <i>{{body.fromMessage}}...</i>
                                                </span>
                                                <span *ngIf="body.fromName !=''">
                                                        {{body.fromMessage}}
                                                        <b>{{body.fromName}}</b>
                                                </span>
                                           </td>
                                        </tr> -->
                                        <tr>
                                           <td for="email.body" class="uk-text-bold uk-text-right">Message:</td>
                                           <td class="uk-text-left">
                                                   <ckeditor
                                                        class="form-control" [(ngModel)] = "body.paragraphs" id="message"
                                                        debounce="400"
                                                        [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
                                                                   extraPlugins: 'divarea'}">
                                                       <!-- <id="contentTag"-->
                                                       <!--(ready)="onReady($event)"-->
                                                       <!--(focus)="onFocus($event)"-->
                                                       <!--[config]="{uiColor: '#99000'}"-->
                                                       <!--(blur)="onBlur($event)"-->
                                                       <!--(change)="onChange($event)"-->
                                                   </ckeditor>
                                                <!-- <textarea type="text"
                                                        class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)] = "email.body" id="message">
                                                </textarea> -->
                                           </td>
                                        </tr>
                                        <tr>
                                           <td></td>
                                           <td class="uk-text-left">
                                                <!-- {{body.closing}}<br> -->
                                                {{body.signature}}
                                                <span *ngIf="body.fromName == ''" class="uk-text-muted">
                                                        <i>{{body.fromMessage}}...</i>
                                                </span>
                                                <span *ngIf="body.fromName !=''">
                                                        {{body.fromMessage}}
                                                        <b>{{body.fromName}}</b>
                                                </span>
                                                <br><a href="https://www.openaire.eu">www.openaire.eu</a>
                                           </td>
                                        </tr>
                                </tbody>
                        </table>
                        </div>
                        <table class="uk-table uk-align-center">
                                <tbody>
                                        <tr>
                                          <td class="uk-text-bold uk-width-3-5@xl uk-width-3-5@m uk-width-3-5@s uk-text-right"></td>
                                          <td><div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger uk-text-bold">* Required fields</div>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td class="uk-text-right"></td>
                                          <td>
                                              <div class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
                                                  <button class="uk-button uk-button-primary" (click)="invite()">Invite</button>
                                              </div>
                                          </td>
                                        </tr>
                                        <!-- <tr>
                                           <td>
                                           </td>
                                           <td>
                                                <li>Invite by link</li>
                                           </td>
                                        </tr> -->
                                        <!-- <tr>
                                           <td for="link" class="uk-text-bold uk-text-right">Link :</td>
                                           <td class="uk-text-left">
                                                <input  placeholder="link" type="text"
                                                        class="form-control uk-input uk-width-large@l uk-width-medium@s" id="link"></td>
                                        </tr>
                                        <tr>
                                          <td class="uk-text-right"></td>
                                          <td>
                                              <div class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
                                                  <button class="uk-button" (click)="resetForm(communityId)">Cancel</button>
                                              </div>
                                          </td>
                                        </tr> -->
                                </tbody>
                        </table>

                        <div class="uk-text-left">
                                <span uk-icon="chevron-left"></span><span class="uk-margin-small-left"><a href="invite">Back</a></span>
                        </div>

                </div>
        </div>
</div>
</div>
<div *ngIf="longView == false">
        <div class="uk-width-large@m uk-width-1-1@s">
          <div class="uk-card uk-card-default uk-card-body">
            <div class="uk-text-center uk-text-large">
              <div> Invite users to subscribe </div>
              <div uk-grid>
                  <div class="uk-width-1-6">
                    <span class="uk-margin-small-right" uk-icon="social"></span>
                  </div>
                  <div class="uk-width-3-5">
                    <input placeholder="" type="text"
                           class="form-control uk-input" [(ngModel)] = "email.recipients[0]" id="recipients"
                           required >
                  </div>
                  <div class="uk-width-1-6">
                    <button class="uk-button" (click)="invite()">Invite</button>
                  </div>
              </div>
              <div class="uk-width-medium uk-text-muted uk-text-small style=display:none">separate multiple emails with a comma</div>
              <div class="uk-text-right">
                <span class="uk-margin-small-left" uk-icon="cog"></span><span class="uk-margin-small-left uk-text-small"><a href="invite">customise it</a></span>
              </div>
            </div>
          </div>
        </div>
</div>