diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 7b3d31c3e0..f93c0e933e 100644
--- a/resources/i18n/en.json
+++ b/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"
+ }
}
}
diff --git a/src/app/+login-page/login-page-routing.module.ts b/src/app/+login-page/login-page-routing.module.ts
new file mode 100644
index 0000000000..4e932c50ce
--- /dev/null
+++ b/src/app/+login-page/login-page-routing.module.ts
@@ -0,0 +1,13 @@
+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 { }
diff --git a/src/app/+login-page/login-page.component.html b/src/app/+login-page/login-page.component.html
new file mode 100644
index 0000000000..5a37df9d2a
--- /dev/null
+++ b/src/app/+login-page/login-page.component.html
@@ -0,0 +1,5 @@
+
+

+
{{"login.form.header" | translate}}
+
+
diff --git a/src/app/+login-page/login-page.component.scss b/src/app/+login-page/login-page.component.scss
new file mode 100644
index 0000000000..b71eee7ee1
--- /dev/null
+++ b/src/app/+login-page/login-page.component.scss
@@ -0,0 +1,15 @@
+.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;
+}
diff --git a/src/app/+login-page/login-page.component.ts b/src/app/+login-page/login-page.component.ts
new file mode 100644
index 0000000000..14bb443a4e
--- /dev/null
+++ b/src/app/+login-page/login-page.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ds-login-page',
+ styleUrls: ['./login-page.component.scss'],
+ templateUrl: './login-page.component.html'
+})
+export class LoginPageComponent {
+
+}
diff --git a/src/app/+login-page/login-page.module.ts b/src/app/+login-page/login-page.module.ts
new file mode 100644
index 0000000000..4d3f726c40
--- /dev/null
+++ b/src/app/+login-page/login-page.module.ts
@@ -0,0 +1,19 @@
+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 {
+
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index dc442cd485..c11881800e 100644
--- a/src/app/app-routing.module.ts
+++ b/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 },
])
],
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c2728941d0..0db1a0a1eb 100755
--- a/src/app/app.module.ts
+++ b/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(),
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 0cdb443b8a..ac76ea1dab 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -12,6 +12,19 @@
{{ 'nav.home' | translate }}(current)
+
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 624ae209dd..4be64221dc 100644
--- a/src/app/header/header.component.ts
+++ b/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;
constructor(
- private store: Store
+ private store: Store,
+ private windowService: HostWindowService
) {
}
diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
index 6fa5a6b32b..02214f57e1 100644
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -60,4 +60,10 @@ export class HostWindowService {
.map((width) => width >= GridBreakpoint.XL)
.distinctUntilChanged();
}
+
+ isMobileView(): Observable {
+ return this.getWidthObs()
+ .map((width) => width < GridBreakpoint.MD)
+ .distinctUntilChanged();
+ }
}
diff --git a/src/app/shared/login-form/login-form.component.html b/src/app/shared/login-form/login-form.component.html
new file mode 100644
index 0000000000..6dcc4d1a5c
--- /dev/null
+++ b/src/app/shared/login-form/login-form.component.html
@@ -0,0 +1,11 @@
+
+
diff --git a/src/app/shared/login-form/login-form.component.scss b/src/app/shared/login-form/login-form.component.scss
new file mode 100644
index 0000000000..e6226bc015
--- /dev/null
+++ b/src/app/shared/login-form/login-form.component.scss
@@ -0,0 +1,32 @@
+@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;
+}
+
diff --git a/src/app/shared/login-form/login-form.component.ts b/src/app/shared/login-form/login-form.component.ts
new file mode 100644
index 0000000000..39fb3a8936
--- /dev/null
+++ b/src/app/shared/login-form/login-form.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ds-login-form',
+ styleUrls: ['./login-form.component.scss'],
+ templateUrl: './login-form.component.html'
+})
+export class LoginFormComponent {
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ca13067851..2f5a266d9f 100644
--- a/src/app/shared/shared.module.ts
+++ b/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,