This repository has been archived by the owner on Jan 24, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from SUSE/suse
Suse Customizations
- Loading branch information
Showing
13 changed files
with
405 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { SuseModule } from './custom/suse.module'; | ||
|
||
@NgModule({ | ||
imports: [ | ||
SuseModule, | ||
] | ||
}) | ||
export class CustomModule { } |
39 changes: 39 additions & 0 deletions
39
custom-src/frontend/app/custom/suse-login/suse-login.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<div class="suse-login"> | ||
<div class="suse-login__header"> | ||
<div class="suse-login__title">SUSE Stratos</div> | ||
</div> | ||
<div class="suse-login__content"> | ||
<div class="suse-login__intro"> | ||
<h1 class="suse-login__headline">SUSE Stratos<br>Cloud Foundry<br>Console</h1> | ||
<p class="suse-login__tagline">Use SUSE Stratos to develop, compose, and manage Cloud Foundry workloads.</p> | ||
</div> | ||
<div class="suse-login__box" [ngClass]="{'suse-login__busy': busy$ | async }"> | ||
<div class="suse-login__form-title">Sign in</div> | ||
<div class="suse-login__form-outer"> | ||
<form class="suse-login__form" name="loginForm" (ngSubmit)="login()" #loginForm="ngForm"> | ||
<mat-form-field> | ||
<input matInput required [(ngModel)]="username" name="username" placeholder="Username"> | ||
</mat-form-field> | ||
<mat-form-field> | ||
<input matInput required type="password" [(ngModel)]="password" name="password" placeholder="Password"> | ||
</mat-form-field> | ||
<button class="suse-login__submit" color="primary" *ngIf="!loggedIn" type="submit" mat-button mat-raised-button [disabled]="!loginForm.valid">Login</button> | ||
</form> | ||
</div> | ||
<div class="suse-login__loading"> | ||
<mat-progress-bar mode="indeterminate"></mat-progress-bar> | ||
</div> | ||
<div class="suse-login__message" [ngClass]="{'suse-login__message--show': !!message, 'suse-login__message-error': this.error}"> | ||
{{ message }} | ||
</div> | ||
</div> | ||
</div> | ||
<div class="suse-login__footer"> | ||
<div class="suse-login__copyright"> | ||
<span *ngIf="config.copyright" [innerHTML]="config.copyright"></span> | ||
</div> | ||
<div class="suse-login__logo"> | ||
<a href="https://www.suse.com" target="_blank"><img src="/assets/custom/suse_logo.png"></a> | ||
</div> | ||
</div> | ||
</div> |
145 changes: 145 additions & 0 deletions
145
custom-src/frontend/app/custom/suse-login/suse-login.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,145 @@ | ||
@import '../../../sass/custom/suse-colors'; | ||
.suse-login { | ||
align-items: center; | ||
background-color: $suse-blue; | ||
border-bottom: 10px solid $suse-primary; | ||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
height: 100%; | ||
&__header, | ||
&__content, | ||
&__footer { | ||
align-items: center; | ||
display: flex; | ||
flex-direction: row; | ||
} | ||
&__header { | ||
background-color: $suse-secondary; | ||
color: $suse-text; | ||
flex: 0 0 60px; | ||
font-size: 24px; | ||
font-weight: 500; | ||
justify-content: center; | ||
width: 100%; | ||
} | ||
&__content { | ||
align-items: flex-start; | ||
color: $suse-text; | ||
flex: 1; | ||
margin-top: 100px; | ||
overflow-y: auto; | ||
width: 90%; | ||
} | ||
&__footer { | ||
flex: 0 0 auto; | ||
width: 90%; | ||
padding: 20px 0; | ||
} | ||
&__title { | ||
width: 90%; | ||
} | ||
&__copyright { | ||
color: $suse-text-gray; | ||
flex: 1; | ||
} | ||
&__logo { | ||
img { | ||
width: 79px; | ||
} | ||
} | ||
&__intro { | ||
flex: 1; | ||
margin-right: 24px; | ||
} | ||
&__box { | ||
display: flex; | ||
flex: 1; | ||
flex-direction: column; | ||
justify-content: center; | ||
margin-left: 24px; | ||
height: 260px; | ||
} | ||
&__form { | ||
display: flex; | ||
flex-direction: column; | ||
.mat-form-field:not(.mat-form-field-invalid).mat-form-field-appearance-legacy { | ||
.mat-form-field-label { | ||
color: $suse-text-gray; | ||
} | ||
.mat-form-field-underline { | ||
background-color: $suse-text-gray; | ||
} | ||
} | ||
} | ||
&__submit.mat-raised-button { | ||
&.mat-primary[disabled] { | ||
color: $suse-button-gray; | ||
} | ||
margin-top: 24px; | ||
} | ||
&__headline { | ||
color: $suse-primary; | ||
font-size: 52px; | ||
font-weight: 300; | ||
margin: 0; | ||
} | ||
&__tagline { | ||
color: $suse-text-gray; | ||
font-size: 18px; | ||
font-weight: 300; | ||
line-height: 1.5; | ||
margin: 24px 0; | ||
} | ||
&__form-outer { | ||
$cubic: cubic-bezier(.215, .61, .355, 1); | ||
$time: 250ms; | ||
height: 200px; | ||
max-width: 400px; | ||
opacity: 1; | ||
transition: height $time $cubic 100ms, opacity $time * 2 $cubic $time + 50ms; | ||
} | ||
&__form-title { | ||
color: $suse-text; | ||
font-size: 30px; | ||
font-weight: 300; | ||
margin-bottom: 24px; | ||
} | ||
&__loading { | ||
display: none; | ||
max-width: 400px; | ||
} | ||
&__busy { | ||
.suse-login__form-title { | ||
display: none; | ||
} | ||
.suse-login__form-outer { | ||
height: 0; | ||
opacity: 0; | ||
} | ||
.suse-login__loading { | ||
display: block; | ||
} | ||
} | ||
&__message { | ||
font-size: 18px; | ||
font-weight: 300; | ||
height: 20px; | ||
padding-top: 20px; | ||
} | ||
} | ||
|
||
@media(max-width: 768px) { | ||
.suse-login { | ||
&__intro { | ||
display: none; | ||
} | ||
&__box { | ||
margin: 0; | ||
} | ||
&__content { | ||
max-width: 400px; | ||
width: 80%; | ||
} | ||
} | ||
} |
25 changes: 25 additions & 0 deletions
25
custom-src/frontend/app/custom/suse-login/suse-login.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { SuseLoginComponent } from './suse-login.component'; | ||
|
||
describe('SuseLoginComponent', () => { | ||
let component: SuseLoginComponent; | ||
let fixture: ComponentFixture<SuseLoginComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ SuseLoginComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(SuseLoginComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
23 changes: 23 additions & 0 deletions
23
custom-src/frontend/app/custom/suse-login/suse-login.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { Component, Inject, ViewEncapsulation } from '@angular/core'; | ||
import { Router } from '@angular/router'; | ||
import { Store } from '@ngrx/store'; | ||
import { Customizations, CustomizationsMetadata } from '../../core/customizations.types'; | ||
import { LoginPageComponent } from '../../features/login/login-page/login-page.component'; | ||
import { AppState } from '../../store/app-state'; | ||
|
||
@Component({ | ||
selector: 'app-suse-login', | ||
templateUrl: './suse-login.component.html', | ||
styleUrls: ['./suse-login.component.scss'], | ||
encapsulation: ViewEncapsulation.None | ||
}) | ||
export class SuseLoginComponent extends LoginPageComponent { | ||
|
||
constructor( | ||
store: Store<AppState>, | ||
router: Router, | ||
@Inject(Customizations) public config: CustomizationsMetadata | ||
) { | ||
super(store, router); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Router } from '@angular/router'; | ||
import { CoreModule } from '../core/core.module'; | ||
import { Customizations, CustomizationsMetadata } from '../core/customizations.types'; | ||
import { MDAppModule } from '../core/md.module'; | ||
import { SharedModule } from '../shared/shared.module'; | ||
import { SuseLoginComponent } from './suse-login/suse-login.component'; | ||
import { AboutModule } from '../features/about/about.module'; | ||
|
||
const SuseCustomizations: CustomizationsMetadata = { | ||
copyright: '© 2018 SUSE', | ||
hasEula: true, | ||
}; | ||
|
||
@NgModule({ | ||
imports: [ | ||
CoreModule, | ||
SharedModule, | ||
MDAppModule, | ||
], | ||
declarations: [ | ||
SuseLoginComponent | ||
], | ||
entryComponents: [ | ||
SuseLoginComponent | ||
], | ||
providers: [ | ||
{ provide: Customizations, useValue: SuseCustomizations } | ||
], | ||
}) | ||
export class SuseModule { | ||
|
||
static init = false; | ||
|
||
constructor(private router: Router) { | ||
// Only update the routes once | ||
if (!SuseModule.init) { | ||
// Override the component used for the login route | ||
const routeConfig = [...router.config]; | ||
const loginRoute = routeConfig.find(r => r.path === 'login') || {}; | ||
loginRoute.component = SuseLoginComponent; | ||
router.resetConfig(routeConfig); | ||
SuseModule.init = true; | ||
} | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.