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,