Merge branch 'release/1.0.0'

CHANGELOG.md

@@ -0,0 +1,13 @@
+<a name="1.0.0"></a>
+# 1.0.0 (2016-10-10)
+
+
+### Features
+
+* **jwt:** provide login, home and shared module cb72080
+* **routing:** provide app routing module 57bc688
+* **styling:** configure bootstrap 6449ddd
+* **styling:** configure font-awesome 4c496bc
+
+
+

README.md

@@ -1,8 +1,28 @@
 # Crudular
 
+[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)
+
 This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.17.
 
+It uses the following npm packages (version numbers current as of 2016-10-10):
+
+- [Bootstrap 4.0.0-alpha.4](https://www.npmjs.com/package/bootstrap): Used for the SCSS styling of the application
+- [Font-Awesome 4.6.3](https://www.npmjs.com/package/font-awesome): Used as the glyphicon font of the application
+- [Moment 2.15.1](https://www.npmjs.com/package/moment): Used for date/time manipulation *(Note: The npm package already includes the types for moment so you do not need to add it with `npm install @types/moment --save-dev`)*
+
+It follows the [Official Angular Styleguide](https://angular.io/styleguide).
+
+## Features
+
+The application provides the following features:
+
+- Provide a login view to authenticate with a remote api
+- Manage a JWT authenticity token to use for calls of protected remote api methods
+- Provide a home view showing the user information about his JWT token
+- Provide a dynamic authentication-based navigation
+
 ## Development server
+
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
@@ -26,6 +46,38 @@ Before running the tests make sure you are serving the app via `ng serve`.
 
 Run `ng github-pages:deploy` to deploy to Github Pages.
 
+## Commit Message Format
+
+This project follows the [angular commit-message convention](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md).
+
+## Versioning
+
+This project follows the [Semantic Versioning 2.0.0](http://semver.org/) specification.
+
+## Bumping Version Number
+
+If you follow semantic versioning and use the [angular commit-message convention](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md), you can use the following npm task to get the appropiate next version number
+
+```bash
+$ npm run bump-version
+```
+
+## Releasing
+
+You can use the following workflow to ease your release process:
+
+*Note: The following scripts use the npm-packages [conventional-github-releaser](https://github.com/conventional-changelog/conventional-github-releaser), [conventional-recommended-bump](https://github.com/conventional-changelog/conventional-recommended-bump) and [standard-changelog](https://github.com/conventional-changelog/standard-changelog). Make sure you install them first by running: `npm install -g conventional-github-releaser conventional-recommended-bump standard-changelog`. Furthermore, [gitflow](https://github.com/nvie/gitflow) is partially used for the following commands*
+
+0. Given your project was initialized with `$ git flow init` and your current branch being `develop` is ready to be released, do the following
+1. Get your next-version number:`$ npm run bump-version`
+2. Start your next-release: `$ git flow release start <next-version-from-step-1>`
+3. Bump the version number in your `package.json` with the version from step 1
+4. Generate your `CHANGELOG.md`: `$ npm run changelog`
+5. Make your release commit: `$ git add --all && git commit -m 'chore(release): <next-version-from-step-1>'`
+6. Finish your release: `$ git flow release finish <next-version-from-step-1>`
+7. Push your branches and tags to GitHub: `$ git push origin master && git push origin develop && git push origin --tags`
+8. Draft and publish your GitHub Relase: `$ npm run github-release`
+
 ## Further help
 
 To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular-cli.json

@@ -15,9 +15,16 @@
       "prefix": "cru",
       "mobile": false,
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "../node_modules/bootstrap/scss/bootstrap.scss",
+        "../node_modules/font-awesome/scss/font-awesome.scss"
+      ],
+      "scripts": [
+        "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/tether/dist/js/tether.js",
+        "../node_modules/bootstrap/dist/js/bootstrap.js",
+        "../node_modules/moment/moment.js"
       ],
-      "scripts": [],
       "environments": {
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",

package.json

@@ -1,14 +1,17 @@
 {
   "name": "crudular",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
     "start": "ng serve",
     "lint": "tslint \"src/**/*.ts\"",
     "test": "ng test",
     "pree2e": "webdriver-manager update",
-    "e2e": "protractor"
+    "e2e": "protractor",
+    "bump-version": "conventional-recommended-bump",
+    "changelog": "standard-changelog",
+    "github-release": "conventional-github-releaser -p angular -r 0"
   },
   "private": true,
   "dependencies": {
@@ -20,7 +23,10 @@
     "@angular/platform-browser": "~2.0.0",
     "@angular/platform-browser-dynamic": "~2.0.0",
     "@angular/router": "~3.0.0",
+    "bootstrap": "^4.0.0-alpha.4",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.6.3",
+    "moment": "^2.15.1",
     "rxjs": "5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.23"

src/app/app.component.html

@@ -1,3 +1,4 @@
-<h1>
-  {{title}}
-</h1>
+<div class="container">
+  <cru-navigation></cru-navigation>
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.ts

@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
 
+import { environment } from '../environments/environment';
+
 @Component({
   selector: 'cru-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'cru works!';
+
+  constructor() {
+    console.log(JSON.stringify(environment));
+  }
+
 }

src/app/app.module.ts

@@ -1,18 +1,33 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 
+import { HomeModule } from './home/home.module';
+import { LoginModule } from './login/login.module';
+import { SharedModule } from './shared/shared.module';
+import { AppRoutingModule } from './app.routing';
+
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
+    // @angular/platform-browser
     BrowserModule,
+    // @angular/forms
     FormsModule,
-    HttpModule
+    // @angular/http
+    HttpModule,
+    // app.routing
+    AppRoutingModule,
+    // shared/shared.module
+    SharedModule,
+    // home/home.module
+    HomeModule,
+    // login/login.module
+    LoginModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HomeRoutes } from './home/';
+import { LoginRoutes } from './login/';
+
+const AppRoutes: Routes = [
+  ...HomeRoutes,
+  ...LoginRoutes
+];
+
+/**
+ * This module provides all the routes of the application. Any feature routes are imported through their respective
+ * module and added to the `AppRoutes` array.
+ */
+@NgModule({
+  imports: [RouterModule.forRoot(AppRoutes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }

src/app/home/home.component.html

@@ -0,0 +1,18 @@
+<div class="card">
+  <div class="card-header">
+    <h2><i class="fa fa-flask" aria-hidden="true"></i> Hello.</h2>
+  </div>
+  <div class="card-block">
+    <h4 class="card-title">Good day to you {{ user }}</h4>
+    <p class="card-text"><i class="fa fa-ticket" aria-hidden="true"></i> Your encoded token is:</p>
+    <div class="jumbotron">
+      <p id="wordwrap">
+        {{ token }}
+      </p>
+    </div>
+    <a href="https://jwt.io/#debugger"><img src="http://jwt.io/assets/badge.svg" /></a>
+  </div>
+  <div class="card-footer">
+    <p><i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/thedondope/crudular">TheDonDope/crudular</a></p>
+  </div>
+</div>

src/app/home/home.component.scss

@@ -0,0 +1,3 @@
+#wordwrap {
+  word-wrap: break-word;
+}

src/app/home/home.component.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('Component: Home', () => {
+  it('should create an instance', () => {
+    let component = new HomeComponent();
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AuthenticationService } from '../shared/';
+
+/**
+ * This class represents the lazy loaded HomeComponent.
+ */
+@Component({
+  selector: 'cru-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  currentUser: any;
+  user: string;
+  token: string;
+
+  /**
+   * Creates a new LoginComponent with the injected AuthenticationService.
+   * @param {AuthenticationService} authenticationService - The injected AuthenticationService.
+   * @constructor
+   */
+  constructor(private authenticationService: AuthenticationService) { }
+
+  /**
+   * Initialises the component.
+   */
+  ngOnInit() {
+    this.currentUser = JSON.parse(this.authenticationService.getCurrentUser());
+    this.user = this.currentUser.username;
+    this.token = this.currentUser.token;
+  }
+
+}

src/app/home/home.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared/shared.module';
+import { HomeComponent } from './index';
+
+@NgModule({
+  imports: [CommonModule, SharedModule],
+  declarations: [HomeComponent],
+  exports: [HomeComponent]
+})
+export class HomeModule { }

src/app/home/home.routing.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+import { AuthenticationGuard } from '../shared/';
+import { HomeComponent } from './home.component';
+
+export const HomeRoutes: Routes = [
+  { path: '', component: HomeComponent, canActivate: [AuthenticationGuard] }
+];

src/app/home/index.ts

@@ -0,0 +1,2 @@
+export * from './home.component';
+export * from './home.routing';

src/app/login/index.ts

@@ -0,0 +1,2 @@
+export * from './login.component';
+export * from './login.routing';

src/app/login/login.component.html

@@ -0,0 +1,42 @@
+<div class="card">
+  <div class="card-header">
+    <h2><i class="fa fa-sign-in" aria-hidden="true"></i> Login.</h2>
+  </div>
+  <div class="card-block">
+    <div class="alert alert-danger" role="alert" [hidden]="!canShowLoginFailedMessage">
+        {{ loginFailedMessage }}
+    </div>
+    <form (ngSubmit)="login()" #loginForm="ngForm">
+      <fieldset class="form-group">
+        <label class="form-control-label" for="username">Username</label>
+        <div class="input-group">
+          <div class="input-group-addon">
+            <i class="fa fa-fw fa-user"></i>
+          </div>
+          <input autofocus class="form-control" name="username" placeholder="Username" required type="text"
+            [(ngModel)]="user.username" #username="ngModel"/>
+        </div>
+        <div [hidden]="username.valid || username.pristine">
+          <small class="text-help has-danger">Username is required</small>
+        </div>
+      </fieldset>
+      <fieldset class="form-group">
+        <label class="form-control-label" for="password">Password</label>
+        <div class="input-group">
+          <div class="input-group-addon">
+            <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
+          </div>
+          <input class="form-control" name="password" placeholder="Password" required type="password"
+            [(ngModel)]="user.password" #password="ngModel"/>
+        </div>
+        <div [hidden]="password.valid || password.pristine">
+          <small class="text-help has-danger">Password is required</small>
+        </div>
+      </fieldset>
+      <button class="btn btn-primary" type="submit" [disabled]="!loginForm.form.valid"><i class="fa fa-fw fa-unlock" aria-hidden="true"></i> Login</button>
+    </form>
+  </div>
+  <div class="card-footer">
+    <p><i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/thedondope/crudular">TheDonDope/crudular</a></p>
+  </div>
+</div>

src/app/login/login.component.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { LoginComponent } from './login.component';
+
+describe('Component: Login', () => {
+  it('should create an instance', () => {
+    let component = new LoginComponent();
+    expect(component).toBeTruthy();
+  });
+});