Azure-Samples · cilwerner · Sep 5, 2023 · Sep 5, 2023 · Sep 5, 2023
diff --git a/angular-spa/angular.json b/angular-spa/angular.json
@@ -21,7 +21,11 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json"
+            "tsConfig": "tsconfig.app.json",
+            "styles": [
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ]
           },
           "configurations": {
             "development": {

diff --git a/angular-spa/package-lock.json b/angular-spa/package-lock.json
diff --git a/angular-spa/package.json b/angular-spa/package.json
@@ -20,6 +20,7 @@
     "@angular/router": "~12.2.0",
     "@azure/msal-angular": "^2.1.1",
     "@azure/msal-browser": "^2.22.0",
+    "bootstrap": "^5.3.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

diff --git a/angular-spa/src/app/app.component.html b/angular-spa/src/app/app.component.html
@@ -1,7 +1,13 @@
-<a href="/">Home</a> |
-<a [routerLink]="['profile']">View Profile</a> |
-<button *ngIf="!loginDisplay" (click)="login()">Login</button>
-<button *ngIf="loginDisplay" (click)="logout()">Logout</button>
+<a class="navbar navbar-dark bg-primary " variant="dark" href="/">
+	<a class="navbar-brand" > Microsoft Identity Platform </a>
+		<a>
+			<button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
+			<button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Signout</button>
+		</a>
+</a>
+	<a class="profileButton">
+		<a [routerLink]="['profile']" class="btn btn-secondary" *ngIf="loginDisplay">View Profile</a> 
+	</a>
 <div class="container">
 	<router-outlet></router-outlet>
 </div>
diff --git a/angular-spa/src/app/app.module.ts b/angular-spa/src/app/app.module.ts
@@ -23,13 +23,11 @@ export function MSALInstanceFactory(): IPublicClientApplication {
   return new PublicClientApplication({
     auth: {
       // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
-      clientId: '',
-
+      clientId: "Enter_the_Application_Id_Here",
       // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
-      authority: '',
-
+      authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
       // Must be the same redirectUri as what was provided in your AD app registration.
-      redirectUri: ''
+      redirectUri: "http://localhost:4200",
     },
     cache: {
       cacheLocation: BrowserCacheLocation.LocalStorage,

diff --git a/angular-spa/src/app/home/home.component.html b/angular-spa/src/app/home/home.component.html
@@ -1,5 +1,6 @@
-<div>
-    <p>This sample demonstrates how to configure MSAL for Angular to login, logout, protect a route, and acquire an access token for a protected API (Microsoft Graph).</p>
-
-    <p>View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
+<div class="title">
+    <h5>
+        Welcome to the Microsoft Authentication Library For Javascript - Angular SPAx
+    </h5>
+    <p >View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
 </div>
diff --git a/angular-spa/src/app/profile/profile.component.html b/angular-spa/src/app/profile/profile.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="profile">
     <p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p>
     <p><strong>Display Name:</strong> {{profile?.displayName}}</p>
     <p><strong>Given Name:</strong> {{profile?.givenName}}</p>

diff --git a/angular-spa/src/index.html b/angular-spa/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Angular 12 - MSAL Example</title>
+    <title>MSAL For Javascript - Angular SPA</title>
   </head>
   <body>
     <app-root></app-root>

diff --git a/angular-spa/src/styles.css b/angular-spa/src/styles.css
@@ -0,0 +1,35 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.app {
+  text-align: center;
+  padding: 8px;
+}
+
+.title{
+  text-align: center;
+  padding: 18px;
+}
+
+
+.profile{
+  text-align: center;
+  padding: 18px;
+}
+
+.profileButton{
+  display: flex;
+  justify-content: center;
+  padding: 18px;
+}