Open Closed

Login Page layout issue #1540


User avatar
0
kaustubh.kale@ness.com created

ABP Framework version: v4.2.2 UI type: Angular DB provider: EF Core Tiered (MVC) or Identity Server Seperated (Angular): no / yes Exception message and stack trace: Steps to reproduce the issue:

Hi Team

Before ABP Update our login page coomponent layout like below

After Update :

We tried to overide css and html in our replaceble component but we are not able to do it.


16 Answer(s)
  • User Avatar
    0
    alper created
    Support Team Director

    It looks like the one after update looks better :) do you want to keep it as in the first image (aligned left)

  • User Avatar
    0
    alper created
    Support Team Director

    also which version did you update it?

  • User Avatar
    0
    alper created
    Support Team Director

    last question is Identity Server Seperated ?

  • User Avatar
    0
    kaustubh.kale@ness.com created
    • Want Left align
    • ABP version 4.3.1
    • Identity server separated - Yes
  • User Avatar
    0
    alper created
    Support Team Director

    Can you check if your Login Page is MVC or Angular. Because it's changed in 4.3x

  • User Avatar
    0
    kaustubh.kale@ness.com created

    its Angular

  • User Avatar
    0
    bunyamin created

    Hello,

    Could you share the template of your login component to see which style class could have been affected?

  • User Avatar
    0
    kaustubh.kale@ness.com created
    <div class="header_cl">
      <div class="account-brand p-4 text-center mb-1">
        <a #navbarBrand class="navbar-brand logo_cl_sp" routerLink="/" alt="Logo"></a>
      </div>
      <nav class="navbar navbar-expand p-0 pt-1 float-right navbar_lang">
        <ul class="navbar-nav ml-auto toolbar-nav">
          <li class="nav-item">
            <div class="dropdown" ngbDropdown>
              <a *ngIf="defaultLanguage$ | async as defaultLang" class="pointer" role="button" id="dropdownMenuLink"
                ngbDropdownToggle [class.dropdown-toggle]="false">
                <span class="flag-icon flag-icon-squared flag-icon-{{ defaultLang.flagIcon }}"></span>
                <span class="def_lang_text">{{ defaultLang.displayName }}</span>
              </a>
              <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right"
                *ngIf="(dropdownLanguages$ | async).length > 0">
                <a *ngFor="let lang of dropdownLanguages$ | async" class="dropdown-item pointer"
                  (click)="onChangeLang(lang.cultureName)">
                  <span class="flag-icon flag-icon-{{ lang.flagIcon }} flag-icon-squared mr-2"></span>
                  {{ lang?.displayName }}</a>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
    <div class="row login_card_outer1">
    
      <div class="col col-md-6 col-lg-4 offset-md-3 offset-lg-4 login_card_outer">
        <div class="card login_card">
          <div class="card-header login_card_hd">
            <div class="card-title d-inline-block login_card_hd_txt">{{ pageLabel | abpLocalization }}</div>
          </div>
          <div class="card-body login_card_bd">
            <!-- <router-outlet></router-outlet> -->
            <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit>
              <div class="form-group div_outer"
                [ngClass]="{'error_div':(f1.username.value=='' && (f1.username.dirty || loginFormInvalid)) || (f1.username.value!='' && (f1.username.invalid))}">
                <!-- {{
                    'AbpAccount::UserNameOrEmailAddress' | abpLocalization
                  }}-->
                <label class="label_cl" for="login-input-user-name-or-email-address"><span class="label_cl_span"
                    [ngClass]="{'error_lb':(f1.username.value=='' && (f1.username.dirty || loginFormInvalid)) || (f1.username.value!='' && (f1.username.invalid))}">E-mail</span></label>
                <xnput class="form-control xnput_cl_login" type="text" id="login-input-user-name-or-email-address"
                autocomplete="off" formControlName="username" placeholder="E-mail" autofocus />
                <span class="error_span_img"
                  *ngIf="(f1.username.value=='' && (f1.username.dirty || loginFormInvalid)) || (f1.username.value!='' && (f1.username.invalid))"><img
                    src="assets/images/error_alert.jpg"></span>
              </div>
              <div class="error_div_sp">
                <span class="error_span" id="sname_err1"
                  *ngIf="f1.username.value=='' && (f1.username.dirty || loginFormInvalid)">E-mail is required.</span>
                <!-- <span class="error_span" id="sname_err2" *ngIf="f1.username.value!='' && (f1.username.invalid)">Please enter valid email.</span> -->
              </div>
    
              <div class="form-group div_outer"
                [ngClass]="{'error_div':(f1.password.value=='' && (f1.password.dirty || loginFormInvalid)) || (f1.password.value!='' && (f1.password.invalid))}">
                <label class="label_cl" for="login-input-password"><span class="label_cl_span"
                    [ngClass]="{'error_lb':(f1.password.value=='' && (f1.password.dirty || loginFormInvalid)) || (f1.password.value!='' && (f1.password.invalid))}">{{ 'AbpAccount::Password' | abpLocalization }}</span></label>
                <xnput class="form-control xnput_cl_login" type="password" id="login-input-password"
                autocomplete="off" formControlName="password" placeholder="{{ 'AbpAccount::Password' | abpLocalization }}" />
                <span class="error_span_img"
                  *ngIf="(f1.password.value=='' && (f1.password.dirty || loginFormInvalid)) || (f1.password.value!='' && (f1.password.invalid))"><img
                    src="assets/images/error_alert.jpg"></span>
              </div>
              <div class="error_div_sp">
                <span class="error_span" id="sname_err1"
                  *ngIf="f1.password.value=='' && (f1.password.dirty || loginFormInvalid)">Password is required.</span>
                <span class="error_span" id="sname_err2" *ngIf="f1.password.value!='' && (f1.password.invalid)">Please
                  enter
                  valid password.</span>
              </div>
    
              <div class="row">
                <!-- <div class="col">
                  <div class="custom-checkbox custom-control mb-2 login_check_rem">
                    <mat-checkbox formControlName="remember" id="login-input-remember-me" value="option1"></mat-checkbox>
                     <xnput 
                        class="mb-4 custom-control-input"
                        type="checkbox"
                        id="login-input-remember-me"
                        formControlName="remember"
                      />
                    <label class="lb_login_rem" for="login-input-remember-me">
                      {{ 'AbpAccount::RememberMe' | abpLocalization }}
                    </label>
                  </div>
                </div> -->
                <div class="col">
                  <!--routerLink="/account/forgot-password"-->
                  <a href="javascript:void(0);" class="forgot_pass_cl" (click)="onForgotpassclick($event)">{{
                      'AbpAccount::ForgotPassword' | abpLocalization
                    }}</a>
                </div>           
                  <div class="card-body" >
                      <div #recaptcha ></div>             
              </div>         
              </div>
              <!--{{ 'AbpAccount::Login' | abpLocalization }} [loading]="inProgress" -->
              <abp-button class="d-block" buttonClass="mt-2 btn btn-primary btn-block login_pg_sign_in_bttn mb_login_bttn"
                buttonType="submit" [loading]="inProgress">
                <span class="login_bttn_txt_span">{{ 'Sign In' }}</span>
              </abp-button>
            </form>
    
            <!-- <ng-container *ngIf="isSelfRegistrationEnabled">
                {{ 'AbpAccount::NotAMemberYet' | abpLocalization }}
                <a routerLink="/account/register">{{ 'AbpAccount::Register' | abpLocalization }}</a>
              </ng-container> -->
          </div>
        </div>
    
        <!-- <div class="p-3 text-center text-muted">
            <div class="copyright">
              <span>© {{ appInfo.name }}</span
              ><br />
            </div>
          </div> -->
      </div>
    
      <!-- <div class="logo2div"></div> -->
    </div>
    
  • User Avatar
    0
    bunyamin created

    Hello,

    It seems that you have a single login page which contains everything, layout, language selection etc. Did you replace AuthWrapperComponent with your LoginComponent?

  • User Avatar
    0
    kaustubh.kale@ness.com created

    can we have call on this thing ?

  • User Avatar
    0
    alper created
    Support Team Director

    hi kaustubh,

    you can send us your project for further investigation at info@abp.io

  • User Avatar
    0
    kaustubh.kale@ness.com created

    HI

    We can not share our project due some policies. Can we connect on quick zoom call or screen sharing its small update issue.

  • User Avatar
    0
    bunyamin created

    Hello,

    We've discussed your code within our team and it seems that your code needs a little bit of refactoring.

    Our account module has the following structure.

    • AuthWrapperComponent
      • Logo
      • Language Selection
      • Tenant Box
      • Router Outlet (in which components like login, forgot-password, reset-password will be placed)

    On the other hand, your login component contains everything above which forces you to duplicate Logo, Language Selection, Tenant Box throughout every account component (Login, Forgot-Password, Reset-Password etc.) I suggest you should revisit your design and remove duplications.

    When migrating to v4.x, we've removed the account module from angular packages however we brought it back in v4.3. It seems that our login component interferes with yours at the URL /account/login and the login page shown in the second picture is the one from @volo/abp.ng.account/public. It looks like your component but there are subtle differences. You can tell by looking at the language selection. In your component, it is displayed at the top-right corner of the screen. In our component, it is displayed within the card. That's why whatever you do in your own component is not being displayed on the page.

    You could follow the instructions in the following answer which had a similar problem like yours.

    https://support.abp.io/QA/Questions/1456/account-component-issue-after-ABP-upgrade-to-v431#answer-003284c1-68ef-d181-23d3-39fd2aabd174

    Let me know if this works for you.

  • User Avatar
    0
    kaustubh.kale@ness.com created

    We dont have seprate auth and login component for login page layout .we have only one component which is replaceble. we dont get it your points .can we connect on call or screen sharing ?

  • User Avatar
    0
    bunyamin created

    I understand your need. Did you follow the instructions given in the answer?

    What you need to do is to create a AuthWrapperComponent with template <router-outlet></router-outlet> only. Then your LoginComponent which contains everything will be placed into the router-outlet.

  • User Avatar
    0
    kaustubh.kale@ness.com created

    Hi

    Issue Resolved .

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19