Fixed the styling on the Angular sample app

angular-sample-spa/README.md

@@ -1,6 +1,6 @@
-# IBM Cloud AppID React Sample App
+# IBM Cloud App ID Angular Sample App
 
-The IBM Cloud App ID SDK can be used with React to create a secure single-page application. You will need an IBM Cloud App ID instance with a single-page application created. Use the client ID and discovery endpoint from your application credentials to initialize the App ID instance.
+The IBM Cloud App ID SDK can be used with Angular to create a secure single-page application. You will need an IBM Cloud App ID instance with a single-page application created. Use the client ID and discovery endpoint from your application credentials to initialize the App ID instance.
 
 ## Prerequisites
 * Node.js version 8 or later
@@ -14,9 +14,9 @@ The IBM Cloud App ID SDK can be used with React to create a secure single-page a
 ```
 git clone https://github.com/ibm-cloud-security/appid-sample-code-snippets.git
 ```
-2. Navigate to application workspace folder.
+2. Navigate to the workspace folder of the application.
 ```
-cd angular-sample-app
+cd angular-sample-spa
 ```
 3. Install dependencies for the application.
 ```
@@ -26,84 +26,6 @@ npm install
 ```
 ng serve
 ```
-
-The app will automatically reload if you change any of the source files.
-
-## Detailed instructions on Creating you application
-
-
-1. Install the Angular CLI
-```
-npm install -g @angular/cli
-```
-2. Create a workspace and initial application and go to the workspace folder
-```
-ng new angular-sample-spa
-cd angular-sample-spa
-```
-3. Install the IBM Cloud AppID SDK dependency using npm
-```
-npm install ibmcloud-appid-js
-```
-
-4. In the src directory, go to the app folder and import App ID in the `app.component.ts` file, with the following code:
-```
-import AppID from 'ibmcloud-appid-js';
-```
-5. In the AppComponent class initialize the states of the variables to be used in the application
-```
-userName = '';
-errorMessage = '';
-buttonStyle = 'show';
-messageStyle = 'hide';
-errorStyle = 'hide'
-```
-6. Create a loginAction function which when triggered will start the authentication flow and use tokens to get the user's information. 
-```
-async onLoginClick() {
-    const appID = new AppID();
-    try {
-      await appID.init({
-        clientId: '<CLIENT_ID>',
-        discoveryEndpoint: '<WELLKNOWN_ENDPOINT>
-      });
-      const tokens = await appID.signin();
-      const decodeIDTokens = tokens.idTokenPayload;
-      this.userName = decodeIDTokens.name;
-      this.buttonStyle = 'hide';
-      this.messageStyle = 'show';
-      this.errorStyle = 'hide';    
-    } catch (e) {
-      this.errorStyle = 'show';
-      this.errorMessage = e.message;
-    }
-}
-```
-7. In the `app.component.html` file, clear all the content in it and add the HTML and CSS code for the application.
-```
-<style>
-  .hide {
-    display: none;
-  }
-  .show {
-    display: block;
-  }
-</style>
-
-<button
-  [ngClass]="buttonStyle"
-  style="background-color: #4178BE; width: 270px;
-  height: 40px;color: #FFFFFF;font-size: 14px;border: none; margin-left: 10px;"
-  id="login"
-  (click)="onLoginClick()">Login with IBM Cloud App ID
-</button>
-<p [ngClass]="messageStyle" style="margin-left: 10px;" id="welcomeNameID">Hi {{userName}}! You are now authenticated </p>
-<div [ngClass]="errorStyle" id="error" style="margin-left: 10px; color: red;">{{errorMessage}}</div>
-```
-8. Save all the files and in your terminal, run the following command to access your app from http://localhost:4200.
-```
-ng serve
-```
-9. Make sure you register your redirect_uri (in this case http://localhost:3000/*) with App ID to ensure that only authorized clients are allowed to participate in the authorization workflow. This can be done on the App ID dashboard under the Manage Authentication tab in the Authentication Settings. Click [here](https://cloud.ibm.com/docs/services/appid?topic=appid-managing-idp#add-redirect-uri) for more details.
+5. Make sure you register your redirect_uri (in this case http://localhost:4200/*) with App ID to ensure that only authorized clients are allowed to participate in the authorization workflow. This can be done on the App ID dashboard under the Manage Authentication tab in the Authentication Settings. Click [here](https://cloud.ibm.com/docs/services/appid?topic=appid-managing-idp#add-redirect-uri) for more details.
 
 Well done! You successfully integrated IBM Cloud App ID's SDK for SPA into an Angular application.

angular-sample-spa/src/app/app.component.html

@@ -1,18 +1,2 @@
-<style>
-  .hide {
-    display: none;
-  }
-  .show {
-    display: block;
-  }
-</style>
-
-<button
-  [ngClass]="buttonStyle"
-  style="background-color: #4178BE; width: 270px;
-	height: 40px;color: #FFFFFF;font-size: 14px;border: none; margin-left: 10px;"
-  id="login"
-  (click)="onLoginClick()">Login with IBM Cloud App ID
-</button>
-<p [ngClass]="messageStyle" style="margin-left: 10px;" id="welcomeNameID">Hi {{userName}}! You are now authenticated </p>
-<div [ngClass]="errorStyle" id="error" style="margin-left: 10px; color: red;">{{errorMessage}}</div>
+<app-welcome (changeState)="onChangeState($event)"></app-welcome>
+<app-home [displayState]="displayStateStatus" [userName]="userNameStatus"></app-home>

angular-sample-spa/src/app/app.component.ts

@@ -1,33 +1,14 @@
 import { Component } from '@angular/core';
-import AppID from 'ibmcloud-appid-js';
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  userName = '';
-  errorMessage = '';
-  buttonStyle = 'show';
-  messageStyle = 'hide';
-  errorStyle = 'hide';
-  async onLoginClick() {
-    const appID = new AppID();
-    try {
-      await appID.init({
-        clientId: '<SPA_CLIENT_ID>',
-        discoveryEndpoint: '<WELL_KNOWN_ENDPOINT>'
-      });
-      const tokens = await appID.signin();
-      const decodeIDTokens = tokens.idTokenPayload;
-      this.userName = decodeIDTokens.name;
-      this.buttonStyle = 'hide';
-      this.messageStyle = 'show';
-      this.errorStyle = 'hide';
-    } catch (e) {
-      this.errorStyle = 'show';
-      this.errorMessage = e.message;
+  displayStateStatus = 'hide';
+  userNameStatus = '';
+  onChangeState(value) {
+    this.displayStateStatus = 'show';
+    this.userNameStatus = value.userName;
     }
-  }
 }

angular-sample-spa/src/app/app.module.ts

@@ -2,10 +2,14 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { WelcomeComponent } from './welcome/welcome.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    WelcomeComponent
   ],
   imports: [
     BrowserModule

angular-sample-spa/src/app/home/home.component.html

@@ -0,0 +1,8 @@
+<div [ngClass]="displayState">
+  <div class="welcome-display">
+    <img alt="App ID Logo" class="logo-icon" src="../../assets/app_id_icon.svg">
+    <p>{{userName}}</p>
+    <p>You've made your first authentication.</p>
+  </div>
+ </div>
+

angular-sample-spa/src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular-sample-spa/src/app/home/home.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent {
+  @Input() displayState: string;
+  @Input() userName: string;
+}
+

angular-sample-spa/src/app/welcome/welcome.component.css

@@ -0,0 +1,3 @@
+
+
+

angular-sample-spa/src/app/welcome/welcome.component.html

@@ -0,0 +1,14 @@
+<div id="welcome" [ngClass]="style">
+  <div class="welcome-display">
+    <div>
+      <img alt="App ID Logo" class="logo-icon" src="../../assets/app_id_icon.svg">
+      <p>
+        Welcome to the<br>
+        IBM Cloud App ID SPA SDK<br>
+        Sample App
+      </p>
+    </div>
+    <button id="login" [ngClass]='buttonDisplay' (click)="onLoginClick()">Login</button>
+    <div [ngClass]="errorStyle" id="error">{{errorMessage}}</div>
+  </div>
+</div>

angular-sample-spa/src/app/welcome/welcome.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WelcomeComponent } from './welcome.component';
+
+describe('WelcomeComponent', () => {
+  let component: WelcomeComponent;
+  let fixture: ComponentFixture<WelcomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular-sample-spa/src/app/welcome/welcome.component.ts

@@ -0,0 +1,40 @@
+import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import AppID from 'ibmcloud-appid-js';
+@Component({
+  selector: 'app-welcome',
+  templateUrl: './welcome.component.html',
+  styleUrls: ['./welcome.component.css']
+})
+export class WelcomeComponent implements OnInit {
+  style = 'show';
+  buttonDisplay = 'show';
+  errorStyle = 'hide';
+  errorMessage = '';
+  appid = new AppID();
+  @Output() changeState = new EventEmitter();
+  async ngOnInit() {
+    try {
+      await this.appid.init({
+        clientId: '<CLIENT_ID>',
+        discoveryEndpoint: '<WELL_KNOWN_ENDPOINT>'
+      });
+    } catch (e) {
+      this.errorMessage = e.message;
+      this.errorStyle = 'show';
+    }
+  }
+  async onLoginClick() {
+    try {
+      this.buttonDisplay = 'hide';
+      const tokens = await this.appid.signin();
+      const decodeIDTokens = tokens.idTokenPayload;
+      const userName = 'Hi ' + decodeIDTokens.name + ', Congratulations!';
+      this.style = 'hide';
+      this.changeState.emit({userName});
+    } catch (e) {
+      this.errorMessage = e.message;
+      this.errorStyle = 'show';
+      this.buttonDisplay = 'show';
+    }
+  }
+}

angular-sample-spa/src/styles.css

@@ -0,0 +1,7 @@
+body {margin: 0;padding: 0;max-width: 100%;overflow-x: hidden;}
+.hide {display: none;}
+.show {display: block;}
+.welcome-display {display: block;font-family: 'IBMPlexSans-Light', sans-serif;font-size: 1.5vw;text-align: center;margin: 10% auto 0;}
+.logo-icon {width: 70px;height: 70px;}
+#login {font-family: 'IBMPlexSans-Medium', sans-serif;font-size: 14px;color: #FFFFFF;text-align: center;background-color: #4178BE;border: none;cursor: pointer;width: 158px;height: 40px;margin: 20px auto 0;}
+#error {padding-top: 20px;font-size: 14px;color: red;}

react-sample-app/README.md

@@ -1,4 +1,4 @@
-# IBM Cloud AppID React Sample App
+# IBM Cloud App ID React Sample App
 
 The IBM Cloud App ID SDK can be used with React to create a secure single-page application. You will need an IBM Cloud App ID instance with a single-page application created. Use the client ID and discovery endpoint from your application credentials to initialize the App ID instance.
 
@@ -22,14 +22,11 @@ cd react-sample-app
 ```
 npm install
 ```
-
 4. Start the development server. Navigate to http://localhost:3000 to access your application.
 ```
 npm start
 ```
 
-The app will automatically reload if you change any of the source files.
-
 ## Detailed instructions on Creating your app
 
 1. Set up a frontend build pipeline using create-react-app. Then move into the project directory.