Implement and style Login page

Author: volodyakurpita

app/app.module.ts

@@ -1,32 +1,34 @@
-import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptModule } from "nativescript-angular/nativescript.module";
-
-import { AppRoutingModule } from "./app.routing";
-import { AppComponent } from "./app.component";
-import { CostModule } from "./tabs/cost/cost.module";
-
-import { TabsComponent } from "./tabs/tabs.component";
-import { CostsComponent } from "./tabs/cost/costs.component";
-
-@NgModule({
-    bootstrap: [
-        AppComponent
-    ],
-    imports: [
-        NativeScriptModule,
-        AppRoutingModule,
-        CostModule
-    ],
-    declarations: [
-        AppComponent,
-        TabsComponent,
-        CostsComponent
-    ],
-    providers: [
-    ],
-    schemas: [
-        NO_ERRORS_SCHEMA
-    ]
-})
-
-export class AppModule { }
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+
+import { AppRoutingModule } from "./app.routing";
+import { AppComponent } from "./app.component";
+import { CostModule } from "./tabs/cost/cost.module";
+
+import { TabsComponent } from "./tabs/tabs.component";
+import { CostsComponent } from "./tabs/cost/costs.component";
+import { LoginComponent} from "./login/login.component";
+
+@NgModule({
+    bootstrap: [
+        AppComponent
+    ],
+    imports: [
+        NativeScriptModule,
+        AppRoutingModule,
+        CostModule
+    ],
+    declarations: [
+        AppComponent,
+        TabsComponent,
+        CostsComponent,
+        LoginComponent
+    ],
+    providers: [
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+
+export class AppModule { }

app/app.routing.ts

@@ -1,21 +1,23 @@
-import { NgModule } from "@angular/core";
-import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Routes } from "@angular/router";
-
-import { TabsComponent } from "./tabs/tabs.component";
-import { CostsComponent } from "./tabs/cost/costs.component";
-import { CostDetailComponent } from "./tabs/cost/detail/cost-detail.component";
-import { CostEditComponent } from "./tabs/cost/edit/cost-edit.component";
-
-const routes: Routes = [
-    { path: '', component: TabsComponent },
-    // { path: "costs", component: CostsComponent },
-    { path: "cost/:id", component: CostDetailComponent },
-    { path: "cost-edit/:id", component: CostEditComponent }
-];
-
-@NgModule({
-    imports: [ NativeScriptRouterModule.forRoot(routes) ],
-    exports: [ NativeScriptRouterModule ]
-})
+import { NgModule } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { Routes } from "@angular/router";
+
+import { TabsComponent } from "./tabs/tabs.component";
+import { CostsComponent } from "./tabs/cost/costs.component";
+import { CostDetailComponent } from "./tabs/cost/detail/cost-detail.component";
+import { CostEditComponent } from "./tabs/cost/edit/cost-edit.component";
+import { LoginComponent } from "./login/login.component";
+
+const routes: Routes = [
+    { path: "", component: LoginComponent },
+    { path: 'tabs', component: TabsComponent },
+    //{ path: "costs", component: CostsComponent },
+    { path: "cost/:id", component: CostDetailComponent },
+    { path: "cost-edit/:id", component: CostEditComponent }
+];
+
+@NgModule({
+    imports: [ NativeScriptRouterModule.forRoot(routes) ],
+    exports: [ NativeScriptRouterModule ]
+})
 export class AppRoutingModule { }

app/login/login.component.css

@@ -0,0 +1,11 @@
+.login-view
+{
+   padding-left: 40;
+   padding-right: 40;
+}
+
+.btn-login
+{
+    background-color: #7ada2f;  
+    color: aliceblue;
+}

app/login/login.component.html

@@ -0,0 +1,16 @@
+<ActionBar title="Money Tracker " 
+            class="action-bar">
+</ActionBar>
+
+<StackLayout verticalAlignment="center" class="login-view" >
+        <StackLayout>
+            <Label text="Email" class="label font-weight-bold m-b-5"></Label>
+            <TextField keyboardType="email"autocorrect="false"></TextField>
+        </StackLayout>
+        <StackLayout class="input-field">
+            <Label text="Password" class="label font-weight-bold m-b-5"></Label>
+            <TextField secure="true"></TextField>
+        </StackLayout>
+        <Button class="btn-login" text="Login" (tap)="login()"></Button>
+        <Label [nsRouterLink]="['/register']" text="Not a member? Register here." class="text-center footnote"></Label>
+</StackLayout>

app/login/login.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+import * as ApplicationSettings from "application-settings";
+ 
+@Component({
+    moduleId: module.id,
+    selector: "ns-login",
+    templateUrl: "login.component.html",
+    styleUrls: ["login.component.css"]
+})
+export class LoginComponent implements OnInit {
+ 
+    public input: any;
+ 
+    public constructor(private router: RouterExtensions) {
+        this.input = {
+            "email": "",
+            "password": ""
+        }
+    }
+ 
+    public ngOnInit() {
+        //if(ApplicationSettings.getBoolean("authenticated", false)) {
+           // this.router.navigate(["/secure"], { clearHistory: true });
+        //}
+    }
+ 
+    public login() {
+         this.router.navigate(["/tabs"], { clearHistory: true });
+    }
+}