account-settings-modal.component.html 3.72 KB
Newer Older
1
<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalSize]="'lg'">
kunw's avatar
kunw committed
2 3
    <h3 class="modal-title">User Profile</h3>
    <div class="modal-body" style="overflow-y: hidden;">
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
        <form #accountSettingsFrom="ngForm" class="form">
            <section class="form-block">
                <div class="form-group">
                    <label for="account_settings_username" class="col-md-4">Username</label>
                    <input type="text" name="account_settings_username" [(ngModel)]="account.username" disabled id="account_settings_username" size="51">
                </div>
                <div class="form-group">
                    <label for="account_settings_email" class="col-md-4 required">Email</label>
                    <label for="account_settings_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="eamilInput.invalid && (eamilInput.dirty || eamilInput.touched)">
                      <input name="account_settings_email" type="text" #eamilInput="ngModel" [(ngModel)]="account.email" 
                      required 
                      pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$' id="account_settings_email" size="48">
                      <span class="tooltip-content">
                          Email should be a valid email address like name@example.com
                      </span>
                    </label>
                </div>
                <div class="form-group">
                    <label for="account_settings_full_name" class="col-md-4 required">Full name</label>
                    <label for="account_settings_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="fullNameInput.invalid && (fullNameInput.dirty || fullNameInput.touched)">
kunw's avatar
kunw committed
24
                      <input type="text" name="account_settings_full_name" #fullNameInput="ngModel" [(ngModel)]="account.realname" required maxLengthExt="20" id="account_settings_full_name" size="48">
25 26 27 28 29 30 31
                      <span class="tooltip-content">
                          Max length of full name is 20
                      </span>
                    </label>
                </div>
                <div class="form-group">
                    <label for="account_settings_comments" class="col-md-4">Comments</label>
kunw's avatar
kunw committed
32 33 34 35 36 37
                    <label for="account_settings_comments" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="commentInput.invalid && (commentInput.dirty || commentInput.touched)">
                    <input type="text" #commentInput="ngModel" maxLengthExt="20" name="account_settings_comments" [(ngModel)]="account.comment" id="account_settings_comments" size="48">
                    <span class="tooltip-content">
                        Length of comment should be less than 20
                    </span>
                    </label>
38 39 40
                </div>
            </section>
        </form>
kunw's avatar
kunw committed
41 42
        <div style="height: 30px;"></div>
        <clr-alert [clrAlertType]="'alert-danger'" [clrAlertClosable]="true" [(clrAlertClosed)]="alertClose">
43 44
            <div class="alert-item">
                <span class="alert-text">
kunw's avatar
kunw committed
45
                   {{errorMessage}}
46 47 48 49 50 51 52 53 54 55
                </span>
            </div>
        </clr-alert>
    </div>
    <div class="modal-footer">
        <span class="spinner spinner-inline" style="top:8px;" [hidden]="showProgress === false"></span>
        <button type="button" class="btn btn-outline" (click)="close()">Cancel</button>
        <button type="button" class="btn btn-primary" [disabled]="!isValid || showProgress" (click)="submit()">Ok</button>
    </div>
</clr-modal>