Added login page ang nav menu

resources/i18n/en.json

@@ -46,7 +46,8 @@
     }
   },
   "nav": {
-    "home": "Home"
+    "home": "Home",
+    "login": "Log In"
   },
   "pagination": {
     "results-per-page": "Results Per Page",
@@ -145,5 +146,14 @@
     "item": "Error fetching item",
     "objects": "Error fetching objects",
     "search-results": "Error fetching search results"
+  },
+  "login": {
+    "title": "Login",
+    "form": {
+      "header": "Please log in",
+      "email": "Email address",
+      "password": "Password",
+      "submit": "Log in"
+    }
   }
 }

src/app/+login-page/login-page-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { LoginPageComponent } from './login-page.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: LoginPageComponent, data: { title: 'login.title' } }
+    ])
+  ]
+})
+export class LoginPageRoutingModule { }

src/app/+login-page/login-page.component.html

+<div class="text-center mt-5">
+  <img class="mb-4" src="assets/images/dspace-logo.png" alt="" width="72" height="72">
+  <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
+  <ds-login-form></ds-login-form>
+</div>

src/app/+login-page/login-page.component.scss

+.login-container {
+  height: 100%;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #f5f5f5;
+}

src/app/+login-page/login-page.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-login-page',
+  styleUrls: ['./login-page.component.scss'],
+  templateUrl: './login-page.component.html'
+})
+export class LoginPageComponent {
+
+}

src/app/+login-page/login-page.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { LoginPageComponent } from './login-page.component';
+import { LoginPageRoutingModule } from './login-page-routing.module';
+
+@NgModule({
+  imports: [
+    LoginPageRoutingModule,
+    CommonModule,
+    SharedModule,
+  ],
+  declarations: [
+    LoginPageComponent
+  ]
+})
+export class LoginPageModule {
+
+}

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
       { path: 'collections', loadChildren: './+collection-page/collection-page.module#CollectionPageModule' },
       { path: 'items', loadChildren: './+item-page/item-page.module#ItemPageModule' },
       { path: 'search', loadChildren: './+search-page/search-page.module#SearchPageModule' },
+      { path: 'login', loadChildren: './+login-page/login-page.module#LoginPageModule' },
       { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
     ])
   ],

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 import { GLOBAL_CONFIG, ENV_CONFIG, GlobalConfig } from '../config';
 
 import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
+import { SharedModule } from './shared/shared.module';
 
 export function getConfig() {
   return ENV_CONFIG;
@@ -51,6 +52,7 @@ if (!ENV_CONFIG.production) {
 @NgModule({
   imports: [
     CommonModule,
+    SharedModule,
     HttpClientModule,
     AppRoutingModule,
     CoreModule.forRoot(),

src/app/header/header.component.html

@@ -12,6 +12,19 @@
           <a class="nav-link" routerLink="/home" routerLinkActive="active"><i class="fa fa-home fa-fw" aria-hidden="true"></i> {{ 'nav.home' | translate }}<span class="sr-only">(current)</span></a>
         </li>
       </ul>
+      <ul class="navbar-nav" [ngClass]="{'mr-auto': (windowService.isMobileView() | async)}">
+        <li *ngIf="!(windowService.isMobileView() | async)" class="nav-item dropdown" (click)="$event.stopPropagation();">
+          <div ngbDropdown placement="bottom-right" class="d-inline-block float-right" @fadeInOut>
+            <a href="#" id="dropdownLogin" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="caret"></span></a>
+            <div ngbDropdownMenu aria-labelledby="dropdownLogin">
+              <ds-login-form></ds-login-form>
+            </div>
+          </div>
+        </li>
+        <li *ngIf="(windowService.isMobileView() | async)" class="nav-item">
+          <a class="nav-link" routerLink="/login" routerLinkActive="active"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="sr-only">(current)</span></a>
+        </li>
+      </ul>
     </div>
   </nav>
 </header>

src/app/header/header.component.ts

@@ -5,6 +5,8 @@ import { Observable } from 'rxjs/Observable';
 import { HeaderState } from './header.reducer';
 import { HeaderToggleAction } from './header.actions';
 import { AppState } from '../app.reducer';
+import { HostWindowService } from '../shared/host-window.service';
+import { fadeInOut } from '../shared/animations/fade';
 
 const headerStateSelector = (state: AppState) => state.header;
 const navCollapsedSelector = createSelector(headerStateSelector, (header: HeaderState) => header.navCollapsed);
@@ -12,13 +14,17 @@ const navCollapsedSelector = createSelector(headerStateSelector, (header: Header
 @Component({
   selector: 'ds-header',
   styleUrls: ['header.component.scss'],
-  templateUrl: 'header.component.html'
+  templateUrl: 'header.component.html',
+  animations: [
+    fadeInOut
+  ]
 })
 export class HeaderComponent implements OnInit {
   public isNavBarCollapsed: Observable<boolean>;
 
   constructor(
-    private store: Store<AppState>
+    private store: Store<AppState>,
+    private windowService: HostWindowService
   ) {
   }
 

src/app/shared/host-window.service.ts

@@ -60,4 +60,10 @@ export class HostWindowService {
       .map((width) => width >= GridBreakpoint.XL)
       .distinctUntilChanged();
   }
+
+  isMobileView(): Observable<boolean> {
+    return this.getWidthObs()
+      .map((width) => width < GridBreakpoint.MD)
+      .distinctUntilChanged();
+  }
 }

src/app/shared/login-form/login-form.component.html

+<form class="form-login px-4 py-3">
+  <label for="inputEmail" class="sr-only">{{"login.form.email" | translate}}</label>
+  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+  <label for="inputPassword" class="sr-only">{{"login.form.password" | translate}}</label>
+  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+  <button class="btn btn-lg btn-primary btn-block mt-3" type="submit">{{"login.form.submit" | translate}}</button>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">New around here? Sign up</a>
+  <a class="dropdown-item" href="#">Forgot password?</a>
+</form>
+

src/app/shared/login-form/login-form.component.scss

+@import '../../../styles/variables.scss';
+
+.form-login {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+.form-login .checkbox {
+  font-weight: 400;
+}
+.form-login .form-control {
+  position: relative;
+  box-sizing: border-box;
+  height: auto;
+  padding: 10px;
+  font-size: 16px;
+}
+.form-login .form-control:focus {
+  z-index: 2;
+}
+.form-login input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.form-login input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+

src/app/shared/login-form/login-form.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-login-form',
+  styleUrls: ['./login-form.component.scss'],
+  templateUrl: './login-form.component.html'
+})
+export class LoginFormComponent {
+
+}

src/app/shared/shared.module.ts

@@ -41,6 +41,7 @@ import { SearchResultGridElementComponent } from './object-grid/search-result-gr
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
+import { LoginFormComponent } from './login-form/login-form.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -68,6 +69,7 @@ const COMPONENTS = [
   ComcolPageLogoComponent,
   ErrorComponent,
   LoadingComponent,
+  LoginFormComponent,
   ObjectListComponent,
   AbstractListableElementComponent,
   WrapperListElementComponent,