Skip to content

Commit 5253e4e

Browse files
OwenRichards1OwenRichards1
authored
creating-styling (#89)
1 parent d3e407c commit 5253e4e

File tree

9 files changed

+102
-16
lines changed

9 files changed

+102
-16
lines changed

‎angular-spa/angular.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@
2121
"index": "src/index.html",
2222
"main": "src/main.ts",
2323
"polyfills": "src/polyfills.ts",
24-
"tsConfig": "tsconfig.app.json"
24+
"tsConfig": "tsconfig.app.json",
25+
"styles": [
26+
"src/styles.css",
27+
"node_modules/bootstrap/dist/css/bootstrap.min.css"
28+
]
2529
},
2630
"configurations": {
2731
"development": {

‎angular-spa/package-lock.json‎

Lines changed: 41 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular-spa/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@angular/router": "~12.2.0",
2121
"@azure/msal-angular": "^2.1.1",
2222
"@azure/msal-browser": "^2.22.0",
23+
"bootstrap": "^5.3.1",
2324
"rxjs": "~6.6.0",
2425
"tslib": "^2.3.0",
2526
"zone.js": "~0.11.4"

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
<a href="/">Home</a> |
2-
<a [routerLink]="['profile']">View Profile</a> |
3-
<button *ngIf="!loginDisplay" (click)="login()">Login</button>
4-
<button *ngIf="loginDisplay" (click)="logout()">Logout</button>
1+
<a class="navbar navbar-dark bg-primary " variant="dark" href="/">
2+
<a class="navbar-brand" > Microsoft Identity Platform </a>
3+
<a>
4+
<button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
5+
<button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Signout</button>
6+
</a>
7+
</a>
8+
<a class="profileButton">
9+
<a [routerLink]="['profile']" class="btn btn-secondary" *ngIf="loginDisplay">View Profile</a>
10+
</a>
511
<div class="container">
612
<router-outlet></router-outlet>
713
</div>

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,11 @@ export function MSALInstanceFactory(): IPublicClientApplication {
2323
return new PublicClientApplication({
2424
auth: {
2525
// 'Application (client) ID' of app registration in Azure portal - this value is a GUID
26-
clientId: '',
27-
26+
clientId: "Enter_the_Application_Id_Here",
2827
// Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
29-
authority: '',
30-
28+
authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
3129
// Must be the same redirectUri as what was provided in your AD app registration.
32-
redirectUri: ''
30+
redirectUri: "http://localhost:4200",
3331
},
3432
cache: {
3533
cacheLocation: BrowserCacheLocation.LocalStorage,

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<div>
2-
<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>
3-
4-
<p>View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
1+
<div class="title">
2+
<h5>
3+
Welcome to the Microsoft Authentication Library For Javascript - Angular SPAx
4+
</h5>
5+
<p >View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
56
</div>

‎angular-spa/src/app/profile/profile.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div>
1+
<div class="profile">
22
<p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p>
33
<p><strong>Display Name:</strong> {{profile?.displayName}}</p>
44
<p><strong>Given Name:</strong> {{profile?.givenName}}</p>

‎angular-spa/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Angular 12 - MSAL Example</title>
5+
<title>MSAL For Javascript - Angular SPA</title>
66
</head>
77
<body>
88
<app-root></app-root>

‎angular-spa/src/styles.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}
14+
15+
.app {
16+
text-align: center;
17+
padding: 8px;
18+
}
19+
20+
.title{
21+
text-align: center;
22+
padding: 18px;
23+
}
24+
25+
26+
.profile{
27+
text-align: center;
28+
padding: 18px;
29+
}
30+
31+
.profileButton{
32+
display: flex;
33+
justify-content: center;
34+
padding: 18px;
35+
}

0 commit comments

Comments
 (0)