cbsnexora/src/app/login/login.component.html

<!-- The viewport is divided into two parts having max-width 70% and 30% -->
<div class="layout-row">
  <!--
    Content in 70%: (TODO: Allow customization by organization)
      Cover Image
      Organization/Application Name
      Organization/Application Description

    This content will be hidden for smaller screens.
  -->

  <div class="flex-70 layout-column align-center align-items-center hide-lt-sm cover">
    <div class="cover-content">
      <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
      <p class="mat-headline cover-description">
        {{ 'APP_NAME' | translate }} {{ 'labels.text.is designed by the' | translate }}
        <a href="https://mifos.org/" target="_blank" class="cover-link">{{
          'labels.text.Mifos Initiative' | translate
        }}</a
        >. {{ 'labels.text.A' | translate }}
        <a href="https://mifos.org/resources/community/" target="_blank" class="cover-link">{{
          'labels.text.global community' | translate
        }}</a>
        {{ 'labels.text.elimination of poverty' | translate }}
        <a href="https://mifos.org/take-action/volunteer/" target="_blank" class="cover-link"
          >{{ 'labels.text.Get involved' | translate }}!</a
        >
      </p>
    </div>
  </div>

  <!--
    Content in 30%: (TODO: Allow customization of Name, Logo and Contact Information by organization)
      Language Selector
      Organization/Application Name with Logo
      Form
      Contact Information/Resources
      Footer
  -->

  <div class="layout-column flex-gt-sm-30 login-container">
    <!-- Language Selector to the extreme right -->
    <div class="layout-row-reverse">
      <mifosx-language-selector class="p-t-10 p-r-10 width-40"></mifosx-language-selector>
      <mifosx-theme-toggle class="p-t-10"></mifosx-theme-toggle>
      <mifosx-server-selector
        class="p-t-10"
        *ngIf="!environment.production && environment.allowServerSwitch"
      ></mifosx-server-selector>
    </div>

    <!-- Logo with Organization Name -->
    <div class="layout-row align-center-center flex-auto">
      <img src="assets/images/mifos_lg-logo.png" alt="{{ 'APP_NAME' | translate }} Logo" class="img-container" />
    </div>

    <!-- Tenant Identifier Name -->
    <mifosx-tenant-selector *ngIf="displayTenantSelector()"></mifosx-tenant-selector>

    <!--
      Type of Form:
        Login
        Reset Password
        Two Factor Authentication
        Forgot Password (TODO: Decision to be taken on providing this feature.)
    -->
    <mifosx-login-form *ngIf="!resetPassword && !twoFactorAuthenticationRequired"></mifosx-login-form>

    <div class="layout-row">
      <mifosx-reset-password *ngIf="resetPassword"></mifosx-reset-password>
      <mifosx-two-factor-authentication *ngIf="twoFactorAuthenticationRequired"></mifosx-two-factor-authentication>
    </div>
    <div class="layout-row">
      <!-- Contact Information/Resources (hidden on smaller screens) -->
      <mat-list class="information-list align-items-center custom-horizontal-list hide-lt-lg">
        <mat-list-item
          ><button mat-button [matMenuTriggerFor]="resourcesMenu">
            {{ 'labels.links.Resources' | translate }}
          </button></mat-list-item
        >
        <mat-list-item
          ><button mat-button [matMenuTriggerFor]="communityMenu">
            {{ 'labels.links.Community' | translate }}
          </button></mat-list-item
        >
        <mat-list-item
          ><button mat-button [matMenuTriggerFor]="contributeMenu">
            {{ 'labels.links.Contribute' | translate }}
          </button></mat-list-item
        >
      </mat-list>
    </div>

    <!-- Footer -->
    <mifosx-footer [styleClass]="'m-t-90'"></mifosx-footer>

    <div class="layout-row m-b-20 m-r-10" align="end">
      <a (click)="reloadSettings()"><fa-icon icon="refresh"></fa-icon></a>
    </div>
  </div>
</div>

<!-- Contact Information/Resources Menus -->
<mat-menu #resourcesMenu="matMenu">
  <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual" target="_blank" mat-menu-item>{{
    'labels.links.User Manual' | translate
  }}</a>
  <a
    href="https://cwiki.apache.org/confluence/display/FINERACT/Apache+Fineract+1.0+Functional+Specifications"
    target="_blank"
    mat-menu-item
    >{{ 'labels.links.Functional Specifications' | translate }}</a
  >
  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Contributor%27s+Zone" target="_blank" mat-menu-item>{{
    'labels.links.Developer Zone' | translate
  }}</a>
</mat-menu>

<mat-menu #communityMenu="matMenu">
  <a href="https://groups.google.com/forum/#!forum/mifosusers" target="_blank" mat-menu-item>{{
    'labels.links.User Group' | translate
  }}</a>
  <a href="https://groups.google.com/forum/#!forum/mifosdeveloper" target="_blank" mat-menu-item>{{
    'labels.links.Developer Group' | translate
  }}</a>
  <a href="https://mifos.org/resources/community/communications/#mifos-irc" target="_blank" mat-menu-item>{{
    'labels.links.IRC' | translate
  }}</a>
</mat-menu>

<mat-menu #contributeMenu="matMenu">
  <a
    href="https://mifosforge.jira.com/wiki/spaces/MDZ/pages/92012624/Key+Design+Principles"
    target="_blank"
    mat-menu-item
    >{{ 'labels.links.Key Design Principles' | translate }}</a
  >
  <a href="https://sourceforge.net/projects/mifos/" target="_blank" mat-menu-item>{{
    'labels.links.Working with Code' | translate
  }}</a>
  <a href="https://mifos.org/donate/" target="_blank" mat-menu-item>{{ 'labels.links.Donate' | translate }}</a>
</mat-menu>