Merge pull request #7336 from jwangyangls/loginPageChange

Change the login module

src/portal/src/app/account/account.module.ts

@@ -18,7 +18,6 @@ import { CoreModule } from '../core/core.module';
 import { SharedModule } from '../shared/shared.module';
 import { RepositoryModule } from '../repository/repository.module';
 
-import { SignInComponent } from './sign-in/sign-in.component';
 import { PasswordSettingComponent } from './password-setting/password-setting.component';
 import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
@@ -36,7 +35,6 @@ import { PasswordSettingService } from './password-setting/password-setting.serv
     RepositoryModule
   ],
   declarations: [
-    SignInComponent,
     PasswordSettingComponent,
     AccountSettingsModalComponent,
     SignUpComponent,
@@ -44,10 +42,11 @@ import { PasswordSettingService } from './password-setting/password-setting.serv
     ResetPasswordComponent,
     SignUpPageComponent],
   exports: [
-    SignInComponent,
     PasswordSettingComponent,
     AccountSettingsModalComponent,
+    ForgotPasswordComponent,
     ResetPasswordComponent,
+    SignUpComponent,
     SignUpPageComponent],
 
   providers: [PasswordSettingService]

src/portal/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { BaseModule } from './base/base.module';
 import { HarborRoutingModule } from './harbor-routing.module';
 import { SharedModule } from './shared/shared.module';
 import { AccountModule } from './account/account.module';
+import { SignInModule } from './sign-in/sign-in.module';
 import { ConfigurationModule } from './config/config.module';
 import { DeveloperCenterModule } from './dev-center/dev-center.module';
 import { registerLocaleData } from '@angular/common';
@@ -63,6 +64,7 @@ export function getCurrentLanguage(translateService: TranslateService) {
         SharedModule,
         BaseModule,
         AccountModule,
+        SignInModule,
         HarborRoutingModule,
         ConfigurationModule,
         DeveloperCenterModule,

src/portal/src/app/base/base.module.ts

@@ -46,7 +46,7 @@ import { SearchTriggerService } from './global-search/search-trigger.service';
     HarborShellComponent,
     SearchResultComponent,
   ],
-  exports: [ HarborShellComponent ],
+  exports: [ HarborShellComponent, NavigatorComponent, SearchResultComponent ],
   providers: [SearchTriggerService]
 })
 export class BaseModule {

src/portal/src/app/harbor-routing.module.ts

@@ -28,7 +28,7 @@ import { GcPageComponent } from './gc-page/gc-page.component';
 import { VulnerabilityPageComponent } from './vulnerability-page/vulnerability-page.component';
 
 import { UserComponent } from './user/user.component';
-import { SignInComponent } from './account/sign-in/sign-in.component';
+import { SignInComponent } from './sign-in/sign-in.component';
 import { ResetPasswordComponent } from './account/password-setting/reset-password/reset-password.component';
 import { GroupComponent } from './group/group.component';
 
@@ -68,17 +68,18 @@ const harborRoutes: Routes = [
     component: OidcOnboardComponent,
     canActivate: [OidcGuard, SignInGuard]
   },
+  {
+    path: 'harbor/sign-in',
+    component: SignInComponent,
+    canActivate: [ SignInGuard]
+  },
   {
     path: 'harbor',
     component: HarborShellComponent,
+    // canActivate: [AuthCheckGuard],
     canActivateChild: [AuthCheckGuard],
     children: [
-      { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
-      {
-        path: 'sign-in',
-        component: SignInComponent,
-        canActivate: [SignInGuard]
-      },
+      { path: '', redirectTo: 'projects', pathMatch: 'full' },
       {
         path: 'projects',
         component: ProjectComponent

src/portal/src/app/shared/route/auth-user-activate.service.ts

@@ -54,7 +54,7 @@ export class AuthCheckGuard implements CanActivate, CanActivateChild {
     }
 
     this.searchTrigger.closeSearch(true);
-    return new Observable( observer => {
+    return new Observable(observer => {
       let queryParams = route.queryParams;
       if (queryParams) {
         if (queryParams[AdmiralQueryParamKey]) {
@@ -72,25 +72,27 @@ export class AuthCheckGuard implements CanActivate, CanActivateChild {
       let user = this.authService.getCurrentUser();
       if (!user) {
         this.authService.retrieveUser()
-          .subscribe(() => observer.next(true)
-          , error => {
-            // If is guest, skip it
-            if (this.isGuest(route, state)) {
-              return observer.next(true);
-            }
-            // Session retrieving failed then redirect to sign-in
-            // no matter what status code is.
-            // Please pay attention that route 'HARBOR_ROOT' and 'EMBEDDED_SIGN_IN' support anonymous user
-            if (state.url !== CommonRoutes.HARBOR_ROOT && !state.url.startsWith(CommonRoutes.EMBEDDED_SIGN_IN)) {
-              let navigatorExtra: NavigationExtras = {
-                queryParams: { "redirect_url": state.url }
-              };
-              this.router.navigate([CommonRoutes.EMBEDDED_SIGN_IN], navigatorExtra);
-              return observer.next(false);
-            } else {
-              return observer.next(true);
-            }
-          });
+          .subscribe(() => {
+            return observer.next(true);
+          }
+            , error => {
+              // If is guest, skip it
+              if (this.isGuest(route, state)) {
+                return observer.next(true);
+              }
+              // Session retrieving failed then redirect to sign-in
+              // no matter what status code is.
+              // Please pay attention that route 'HARBOR_ROOT' and 'EMBEDDED_SIGN_IN' support anonymous user
+              if (!state.url.startsWith(CommonRoutes.EMBEDDED_SIGN_IN)) {
+                let navigatorExtra: NavigationExtras = {
+                  queryParams: { "redirect_url": state.url }
+                };
+                this.router.navigate([CommonRoutes.EMBEDDED_SIGN_IN], navigatorExtra);
+                return observer.next(false);
+              } else {
+                return observer.next(true);
+              }
+            });
       } else {
         return observer.next(true);
       }

src/portal/src/app/sign-in/sign-in.component.html

@@ -1,3 +1,6 @@
+<clr-main-container><global-message [isAppLevel]="true"></global-message>
+<navigator></navigator>
+<search-result></search-result>
 <div class="login-wrapper"
     [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
     <form #signInForm="ngForm" class="login">
@@ -37,8 +40,8 @@
             <div [class.visibility-hidden]="!isError" class="error active">
                 {{ 'SIGN_IN.INVALID_MSG' | translate }}
             </div>
-            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary"
-                (click)="signIn()" id="log_in">{{ 'BUTTON.LOG_IN' | translate }}</button>
+            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary" (click)="signIn()"
+                id="log_in">{{ 'BUTTON.LOG_IN' | translate }}</button>
             <a href="javascript:void(0)" class="signup" (click)="signUp()"
                 *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
         </div>
@@ -51,5 +54,6 @@
         <top-repo class="repo-container"></top-repo>
     </div>
 </div>
+</clr-main-container>
 <sign-up #signupDialog (userCreation)="handleUserCreation($event)"></sign-up>
 <forgot-password #forgotPwdDialog></forgot-password>

src/portal/src/app/sign-in/sign-in.component.scss

@@ -55,7 +55,6 @@
 
 .login-wrapper {
     flex-wrap: wrap;
-    margin-top:-20px;
     .login {
         background:transparent;
     }

src/portal/src/app/sign-in/sign-in.component.ts

@@ -16,19 +16,19 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Input, ViewChild, AfterViewChecked } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
-import { SessionService } from '../../shared/session.service';
-import { SignInCredential } from '../../shared/sign-in-credential';
+import { SessionService } from '../shared/session.service';
+import { SignInCredential } from '../shared/sign-in-credential';
 
-import { SignUpComponent } from '../sign-up/sign-up.component';
-import { CommonRoutes } from '../../shared/shared.const';
-import { ForgotPasswordComponent } from '../password-setting/forgot-password/forgot-password.component';
+import { SignUpComponent } from '../account/sign-up/sign-up.component';
+import { CommonRoutes } from '../shared/shared.const';
+import { ForgotPasswordComponent } from '../account/password-setting/forgot-password/forgot-password.component';
 
-import { AppConfigService } from '../../app-config.service';
-import { AppConfig } from '../../app-config';
-import { User } from '../../user/user';
+import { AppConfigService } from '../app-config.service';
+import { AppConfig } from '../app-config';
+import { User } from '../user/user';
 
 import { CookieService, CookieOptions } from 'ngx-cookie';
-import { SkinableConfig } from "../../skinable-config.service";
+import { SkinableConfig } from "../skinable-config.service";
 
 // Define status flags for signing in states
 export const signInStatusNormal = 0;
@@ -271,4 +271,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {
     forgotPassword(): void {
         this.forgotPwdDialog.open();
     }
+
 }
+
+

src/portal/src/app/sign-in/sign-in.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SignInComponent } from './sign-in.component';
+import { AccountModule } from '../account/account.module';
+import { BaseModule } from '../base/base.module';
+import { SharedModule } from '../shared/shared.module';
+import { RepositoryModule } from '../repository/repository.module';
+
+@NgModule({
+  declarations: [
+    SignInComponent,
+
+  ],
+  imports: [
+    CommonModule,
+    AccountModule,
+    SharedModule,
+    BaseModule,
+    RepositoryModule
+  ]
+})
+export class SignInModule { }

src/portal/src/app/sign-in/sign-in.service.ts

@@ -15,8 +15,8 @@ import { Injectable } from '@angular/core';
 import { Http, URLSearchParams } from '@angular/http';
 // import 'rxjs/add/operator/toPromise';
 
-import { SignInCredential } from '../../shared/sign-in-credential';
-import {HTTP_FORM_OPTIONS} from "../../shared/shared.utils";
+import { SignInCredential } from '../shared/sign-in-credential';
+import {HTTP_FORM_OPTIONS} from "../shared/shared.utils";
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 const signInUrl = '/c/login';