Initial Commit - NG UI
* Roboto and font-awesome fonts are added in package.json
* Replace Nginx alpine varient to stable
* Devops files are added
* Docker file aligned as per community reviews
* Enhancement - NS primitive, Azure inclusion and domain name
* RWD changes
Change-Id: If543efbf127964cbd8f4be4c5a67260c91407fd9
Signed-off-by: kumaran.m <kumaran.m@tataelxsi.co.in>
diff --git a/src/app/login/LoginComponent.html b/src/app/login/LoginComponent.html
new file mode 100644
index 0000000..296d51b
--- /dev/null
+++ b/src/app/login/LoginComponent.html
@@ -0,0 +1,57 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="login-container">
+ <div class="wrap-login">
+ <div class="login-logo">
+ <img src="assets/images/logo.png" alt="Logo">
+ </div>
+ <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form" autocomplete="off">
+ <div class="wrap-input">
+ <input autocomplete="off" class="input-control" type="text" formControlName="userName" placeholder="{{ 'PAGE.LOGIN.USERNAME' | translate }}"
+ />
+ <span class="input-icon">
+ <i class="fa fa-user" aria-hidden="true"></i>
+ </span>
+ </div>
+ <div *ngIf="submitted && loginForm.controls['userName'].errors" class="input-validation-msg">
+ <div *ngIf="loginForm.controls['userName'].errors.required">{{'PAGE.LOGIN.USERNAMEVALIDMESSAGE' | translate}}</div>
+ </div>
+ <div class="wrap-input">
+ <input autocomplete="off" class="input-control" type="password" formControlName="password" placeholder="{{ 'PAGE.LOGIN.PASSWORD' | translate }}"
+ />
+ <span class="input-icon">
+ <i class="fa fa-lock" aria-hidden="true"></i>
+ </span>
+ </div>
+ <div *ngIf="submitted && loginForm.controls['password'].errors" class="input-validation-msg">
+ <div *ngIf="loginForm.controls['password'].errors.required">{{'PAGE.LOGIN.PASSWORDVALIDMESSAGE' | translate}}</div>
+ </div>
+ <button type="submit" class="submit-btn">
+ <i class="fa fa-arrow-right" aria-hidden="true"></i>
+ </button>
+ <div class="signup-text-center">
+ <span class="caret">{{'PAGE.LOGIN.SIGNINMSG' | translate}}</span>
+ </div>
+
+ </form>
+ </div>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
+<div class="login-footer">
+ <a href="https://osm.etsi.org" target="_blank">{{'OSMSOURCEMANO' | translate}} {{sharedService.osmVersion}}</a>
+</div>
diff --git a/src/app/login/LoginComponent.scss b/src/app/login/LoginComponent.scss
new file mode 100644
index 0000000..28ac159
--- /dev/null
+++ b/src/app/login/LoginComponent.scss
@@ -0,0 +1,156 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+@import "../../assets/scss/mixins/mixin";
+@import "../../assets/scss/variable";
+
+.login-container {
+ @include wh-value(100%, 100vh);
+ @include flexbox(flex, center, null, null, center, null);
+ @include background(url("../../assets/images/login_background.jpg"), null, cover, no-repeat, center);
+ background-attachment: fixed;
+ flex-wrap: wrap;
+ .wrap-login {
+ @include background(
+ linear-gradient(
+ to left bottom,
+ #00c0ef,
+ #00b3f9,
+ #3ea3fd,
+ #7190f8,
+ #9c78e8,
+ #a86cdd,
+ #b25fd1,
+ #bb51c3,
+ #b151c4,
+ #a652c6,
+ #9b53c6,
+ #9053c7
+ ),
+ null,
+ null,
+ null,
+ null
+ );
+ @include roundedCorners(15);
+ @include flexbox(flex, space-between, null, null, null, null);
+ @include position_value(relative, null, null, null, null);
+ @include box-shadow(0px, 3px, 10px, 0px, rgba($black, 0.5));
+ @include padding-value(20, 30, 20, 30);
+ flex-wrap: wrap;
+ color: $white;
+ overflow: visible;
+ .login-logo {
+ @include flexbox(flex, center, null, null, center, null);
+ @include position_value(absolute, -80px, null, null, 95px);
+ @include box-shadow(1px, 2px, 0px, 0px, $cerise-pink);
+ @include margin-value(0, 0, 10, 0);
+ @include wh-value(160px, 150px);
+ @include background(null, $white, null, null, null);
+ @include roundedCornersPercentage(50%);
+ img {
+ @include wh-value(130px, auto);
+ @include position_value(null, 50px, null, null, null);
+ }
+ }
+ .login-form {
+ @include wh-value(290px, null);
+ @include padding-value(70, 0, 0, 0);
+ text-align: center;
+ .wrap-input {
+ @include position_value(relative, null, null, null, null);
+ @include wh-value(100%, null);
+ @include margin-value(0, 0, 10, 0);
+ z-index: 1;
+ .input-control {
+ @include font(null, 15px, null);
+ @include line-height(1.5);
+ @include wh-value(100%, 42px);
+ @include padding-value(0, 30, 0, 65);
+ @include flexbox(block, null, null, null, null, null);
+ @include roundedCorners(25);
+ @include border(all, 0, solid, $gray-80);
+ @include background(null, $white, null, null, null);
+ &:focus + .input-icon {
+ color: $cerise-pink;
+ @include padding-value(0, 0, 0, 25);
+ }
+ }
+ .input-icon {
+ @include font(null, 13px, null);
+ @include flexbox(flex, null, null, null, center, null);
+ @include position_value(absolute, null, null, 0, 0);
+ @include wh-value(100%, 100%);
+ @include padding-value(0, 0, 0, 35);
+ @include roundedCorners(25);
+ @include transition(all, 0.5s, null, null);
+ pointer-events: none;
+ color: $gray-600;
+ }
+ }
+ .submit-btn {
+ @include background(null, $white, null, null, null);
+ @include roundedCornersPercentage(50%);
+ @include border(all, 0, solid, $gray-80);
+ @include transition(all, 0.3s, null, null);
+ @include box-shadow(1px, 5px, 5px, 0px, rgba($black, 0.3), inset);
+ cursor: pointer;
+ @include font(null, 25px, null);
+ @include wh-value(60px, 60px);
+ @include margin-value(0, 0, 10, 0);
+ @include padding-value(0, 0, 0, 0);
+ color: $cerise-pink;
+ &:hover {
+ @include box-shadow(1px, 5px, 10px, 0px, rgba($black, 0.3));
+ }
+ .fa {
+ @include transition(all, 0.4s, null, null);
+ @include flexbox(block, null, null, null, null, null);
+ @include padding-value(18, 18, 18, 18);
+ &:hover {
+ transform: scale(1.2);
+ }
+ }
+ }
+ .input-validation-msg {
+ @include roundedCorners(25);
+ @include background(null, $cerise-pink, null, null, null);
+ @include margin-value(0, 0, 10, 0);
+ @include padding-value(1, 0, 1, 15);
+ @include font(null, 11px, null);
+ color: $white;
+ text-align: left;
+ }
+ }
+ }
+}
+.login-footer {
+ @include flexbox(flex, space-between, null, null, center, null);
+ @include position_value(fixed, null, null, 0px, null);
+ @include background(null, $purple, null, null, null);
+ @include wh-value(100%, 40px);
+ @include padding-value(0, 10, 0, 10);
+ color: $white;
+ opacity: 0.9;
+ a {
+ @include font(null, null, bold);
+ color: $white;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/login/LoginComponent.ts b/src/app/login/LoginComponent.ts
new file mode 100644
index 0000000..2f4f67e
--- /dev/null
+++ b/src/app/login/LoginComponent.ts
@@ -0,0 +1,131 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Login component
+ */
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, Injector, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthenticationService } from 'AuthenticationService';
+import { RestService } from 'RestService';
+import { Observable } from 'rxjs';
+import { SharedService } from 'SharedService';
+import { isNullOrUndefined } from 'util';
+
+/**
+ * Creating component
+ * @Component takes LoginComponent.html as template url
+ */
+@Component({
+ selector: 'app-login',
+ templateUrl: './LoginComponent.html',
+ styleUrls: ['./LoginComponent.scss']
+})
+/** Exporting a class @exports LoginComponent */
+export class LoginComponent implements OnInit {
+ /** Invoke service injectors @public */
+ public injector: Injector;
+
+ /** contains loginform group information @public */
+ public loginForm: FormGroup;
+
+ /** submitted set to boolean state @public */
+ public submitted: boolean = false;
+
+ /** contains return URL link @public */
+ public returnUrl: string;
+
+ /** Observable Hold the value of subscription @public */
+ public isLoggedIn$: Observable<boolean>;
+
+ /** contains access token information @public */
+ public accessToken: string;
+
+ /** Utilizes rest service for any CRUD operations @public */
+ public restService: RestService;
+
+ /** Check the loading results @public */
+ public isLoadingResults: boolean = false;
+
+ /** Give the message for the loading @public */
+ public message: string = 'PLEASEWAIT';
+
+ /** Contains all methods related to shared @public */
+ public sharedService: SharedService;
+
+ /** Utilizes auth service for any auth operations @private */
+ private authService: AuthenticationService;
+
+ /** contians form builder module @private */
+ private formBuilder: FormBuilder;
+
+ /** Holds teh instance of AuthService class of type AuthService @private */
+ private router: Router;
+
+ // creates instance of login component
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.restService = this.injector.get(RestService);
+ this.authService = this.injector.get(AuthenticationService);
+ this.formBuilder = this.injector.get(FormBuilder);
+ this.router = this.injector.get(Router);
+ this.sharedService = this.injector.get(SharedService);
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is instantiate
+ */
+ public ngOnInit(): void {
+ this.isLoggedIn$ = this.authService.isLoggedIn;
+ if (this.isLoggedIn$) {
+ this.router.navigate(['/']).catch(() => {
+ // Catch Navigation Error
+ });
+ }
+ this.loginForm = this.formBuilder.group({
+ userName: ['', [Validators.required]],
+ password: ['', [Validators.required]]
+ });
+ this.returnUrl = isNullOrUndefined(localStorage.getItem('returnUrl')) ? '/' : localStorage.getItem('returnUrl');
+ }
+
+ /**
+ * called on form submit @private onSubmit
+ */
+ public onSubmit(): void {
+ this.submitted = true;
+ if (this.loginForm.invalid) {
+ return;
+ }
+ this.isLoadingResults = true;
+ this.sharedService.cleanForm(this.loginForm);
+ this.authService.login(this.loginForm.value.userName, this.loginForm.value.password).subscribe(
+ (data: {}) => {
+ this.isLoadingResults = false;
+ this.router.navigate([this.returnUrl]).catch(() => {
+ // Catch Navigation Error
+ });
+ localStorage.removeItem('returnUrl');
+ }, (err: HttpErrorResponse) => {
+ this.isLoadingResults = false;
+ this.restService.handleError(err, 'post');
+ });
+ }
+}