Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. MiniProfileComponent

File

projects/congarevenuecloud/elements/src/lib/mini-profile/mini-profile.component.ts

Description

Mini profile displays the First and the Last Name's Initials of the Current User.

Preview

Mini profile on the dashboard view

Usage

Example :
import { MiniProfileModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [MiniProfileModule, ...]
})
export class AppModule {}
Example :
```typescript
<apt-mini-profile
             (onRegister)="handleOnRegister($event)"
             (onLogin)="handleOnLogin($event)"
></apt-mini-profile>
Example :

Implements

OnInit

Metadata

selector apt-mini-profile
styleUrls ./mini-profile.component.scss
templateUrl ./mini-profile.component.html

Constructor

constructor(userService: UserService, ngZone: NgZone, modalService: BsModalService, translateService: TranslateService, activatedRoute: ActivatedRoute)
Parameters :
Name Type Optional
userService UserService No
ngZone NgZone No
modalService BsModalService No
translateService TranslateService No
activatedRoute ActivatedRoute No

Outputs

onLogin
Type : EventEmitter<boolean>

Event emitter for when user logs in.
onRegister
Type : EventEmitter<User>

Event emitter for when user registers.

 
<!-- Modal -->
<ng-template #template>
    <form *ngIf="loginState === 'LOGIN'" (ngSubmit)="doLogin()">
        <div class="modal-header">
            <h5 class="modal-title" id="loginModalLabel"> {{'MINI_PROFILE.LOGIN' | translate}}</h5>
            <button type="button" class="close" (click)="modalRef.hide()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="email">{{'COMMON.USERNAME' | translate}}</label>
                <input autofocus type="email" class="form-control" id="username" name="username" placeholder="{{'MINI_PROFILE.ENTER_USERNAME' | translate}}" [(ngModel)]="username">
            </div>
            <div class="form-group">
                <label for="password">{{'MINI_PROFILE.PASSWORD' | translate}}</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="{{'MINI_PROFILE.PASSWORD' | translate}}" [(ngModel)]="password">
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">{{'MINI_PROFILE.REMEMBER_ME' | translate}}</label>
            </div>
            <small class="text-danger " *ngIf="loginMessage">{{loginMessage}}</small>
        </div>
        <div class="modal-footer d-flex justify-content-start">
            <button class="btn btn-link" type="button" (click)="loginState = 'REGISTER'">{{'COMMON.REGISTER' | translate}}</button>
            |
            <button class="btn btn-link" type="button" (click)="loginState = 'RESET-PASSWORD'">{{'MINI_PROFILE.FORGOT_PASSWORD' | translate}}</button>
            <button type="submit" class="btn btn-primary ml-auto" [ladda]="loading">{{'COMMON.SUBMIT' | translate}}</button>
        </div>
    </form>

    <form *ngIf="loginState === 'REGISTER'" (ngSubmit)="doRegister()">
        <div class="modal-header">
            <h5 class="modal-title" id="loginModalLabel">{{'COMMON.REGISTER' | translate}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalRef.hide()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="exampleInputEmail1">{{'COMMON.EMAIL_ADDRESS' | translate}}</label>
                <input type="email" [(ngModel)]="user.Email" class="form-control" name="email" placeholder="{{'MINI_PROFILE.ENTER_EMAIL' | translate}}">
                <small id="emailHelp" class="form-text text-muted"> {{'MINI_PROFILE.NEVER_SHARE_YOUR_EMAIL' | translate}}</small>
            </div>
            <div class="form-group">
                <label for="firstName">{{'COMMON.FIRST_NAME' | translate}}</label>
                <input type="text" class="form-control" id="firstName" [(ngModel)]="user.FirstName" name="firstName" placeholder="{{'COMMON.FIRST_NAME' | translate}}">
            </div>
            <div class="form-group">
                <label for="lastName">{{'COMMON.LAST_NAME' | translate}}</label>
                <input type="text" class="form-control" placeholder="{{'COMMON.LAST_NAME' | translate}}" [(ngModel)]="user.LastName" name="lastName" id="lastName">
            </div>
            <small class="text-danger " *ngIf="registerMessage">{{registerMessage}}</small>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="loginState = 'LOGIN'">{{'MINI_PROFILE.GO_BACK' | translate}}</button>
            <button type="submit" class="btn btn-primary" [ladda]="loading">{{'COMMON.SUBMIT' | translate}}</button>
        </div>
    </form>

    <form *ngIf="loginState === 'RESET-PASSWORD'" (ngSubmit)="doResetPassword()">
        <div class="modal-header">
            <h5 class="modal-title">{{'MINI_PROFILE.RESET_PASSWORD' | translate}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalRef.hide()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p>{{'MINI_PROFILE.TROUBLE_LOGGINGIN' | translate}}</p>
            <ul>
                <li>{{'MINI_PROFILE.USERNAME_ARE_IN_EMAIL' | translate}}</li>
                <li>{{'MINI_PROFILE.PASSWORDS_ARE_CASESENSITIVE' | translate}}</li>
            </ul>
            <p>{{'MINI_PROFILE.TO_RESET_PASSWORD_ENTER_USERNAME' | translate}}</p>
            <div class="form-group">
                <label for="resetUsername">{{'COMMON.USERNAME' | translate}}</label>
                <input type="email" [(ngModel)]="resetUsername" class="form-control" name="resetUsername" placeholder="{{'COMMON.USERNAME' | translate}}">
                <small id="emailHelp" class="form-text text-muted">{{'MINI_PROFILE.TO_RESET_PASSWORD_ENTER_USERNAME' | translate}}</small>
            </div>
            <small class="text-danger " *ngIf="resetMessage">{{resetMessage}}</small>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="loginState = 'LOGIN'">{{'MINI_PROFILE.GO_BACK' | translate}}</button>
            <button type="submit" class="btn btn-primary" type="submit" [ladda]="loading">{{'COMMON.SUBMIT' | translate}}</button>
        </div>
    </form>

    <div *ngIf="loginState === 'RESET-CONFIRM'">
        <div class="modal-header">
            <h5 class="modal-title">{{'MINI_PROFILE.PASSWORD_RESET' | translate}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalRef.hide()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p>{{'MINI_PROFILE.PASSWORD_RESET_CONFIRM1' | translate}}</p>
            <p>{{'MINI_PROFILE.PASSWORD_RESET_CONFIRM2' | translate}}</p>
            <p>{{'MINI_PROFILE.PASSWORD_RESET_CONFIRM3' | translate}}</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="loginState = 'LOGIN'">{{'MINI_PROFILE.GO_BACK' | translate}}</button>
        </div>
    </div>
</ng-template>

./mini-profile.component.scss 

:host{
    display: flex;
    align-items: center;
}
.dropdown-menu{
    z-index: 1040;
}
    
a .oi{
    margin-right: 5px;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""