fix(portal): update icons in login page Azure-Samples#292 (Azure-Samp…

…les#323) * style: added the logos on loginpage Azure-Samples#292 * style: add-logos-register-page-292 * Update index.html on requested Removed the material icons link sheet * Update authentication.component.scss Resolved the conflicts * Update package.json updatethe package version apollo angular --------- Co-authored-by: Wassim Chegham <github@wassim.dev>
altsang · Sep 12, 2023 · b1f661e · b1f661e
1 parent 432651c
commit b1f661e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 14 deletions.
diff --git a/packages/portal/package.json b/packages/portal/package.json
@@ -24,7 +24,11 @@
     "@angular/platform-browser": "^16.0.5",
     "@angular/platform-browser-dynamic": "^16.0.5",
     "@angular/router": "^16.0.5",
-    "apollo-angular": "^5.0.1",
+    "@fortawesome/angular-fontawesome": "^0.13.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "apollo-angular":  "^5.0.1",
     "graphql": "^16.6.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

diff --git a/packages/portal/src/app/authentication/authentication.component.html b/packages/portal/src/app/authentication/authentication.component.html
@@ -2,11 +2,13 @@
   <h1>Join with your favorite social media account</h1>
   <section>
     <!-- <img src="/assets/images/pic-purple.png" alt="Login background image" /> -->
-
     <nav>
-
       <a *ngFor="let provider of providers" mat-raised-button class="button btn__{{provider.id}}" [href]="loginWith(provider.id)">
-        Sign in with {{ provider.name }}
+        <div class="content">
+          <fa-icon size="xl" [icon]="provider.icon"></fa-icon>
+
+          <span class="text">Sign in with {{ provider.name }}</span>
+        </div>
       </a>
 
     </nav>

diff --git a/packages/portal/src/app/authentication/authentication.component.scss b/packages/portal/src/app/authentication/authentication.component.scss
@@ -24,9 +24,20 @@ section {
     width: 100%;
     max-width: 400px;
 
-    button {
+    a {
       width: 100%;
       margin: 10px 0;
+
+      .content {
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+
+        .text {
+          margin-left: 16px;
+        }
+      }
     }
   }
   img {

diff --git a/packages/portal/src/app/authentication/authentication.component.ts b/packages/portal/src/app/authentication/authentication.component.ts
@@ -1,32 +1,40 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit, inject } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
+import { DomSanitizer } from "@angular/platform-browser";
+import { MatIconRegistry, MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { ActivatedRoute, Router } from "@angular/router";
 import { AuthService } from "../shared/authentication/auth.service";
 import { TextBlockComponent } from "../shared/text-block/text-block.component";
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faApple, faFacebook, faGithub, faGoogle, faMicrosoft, faTwitter } from "@fortawesome/free-brands-svg-icons";
 
 @Component({
   selector: "app-authentication",
   templateUrl: "./authentication.component.html",
   styleUrls: ["./authentication.component.scss"],
-  imports: [CommonModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, TextBlockComponent],
+  imports: [CommonModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, TextBlockComponent, MatIconModule,FontAwesomeModule],
   standalone: true,
 })
 export class AuthenticationComponent implements OnInit {
-  redirectURL = "/home";
+  public constructor(iconRegistry: MatIconRegistry, santizer: DomSanitizer) {
+    for (const provider of this.providers) {
+      iconRegistry.addSvgIcon(provider.id, santizer.bypassSecurityTrustResourceUrl(`../assets/company-logos/${provider.id}.svg`));
+    }
+  }
 
+  redirectURL = "/home";
   providers = [
-    { name: "Microsoft", id: "microsoft" },
-    { name: "Facebook", id: "facebook" },
-    { name: "Google", id: "google" },
-    { name: "Twitter", id: "twitter" },
-    { name: "GitHub", id: "github" },
-    { name: "Apple", id: "apple" }
+    { name: "Microsoft", id: "microsoft", icon: faFacebook },
+    { name: "Facebook", id: "facebook", icon: faMicrosoft },
+    { name: "Google", id: "google", icon: faGoogle },
+    { name: "Twitter", id: "twitter", icon: faTwitter },
+    { name: "GitHub", id: "github", icon: faGithub },
+    { name: "Apple", id: "apple", icon: faApple }
   ];
-
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private authService = inject(AuthService);

diff --git a/packages/portal/src/index.html b/packages/portal/src/index.html
@@ -12,6 +12,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
     />
+
   </head>
   <body class="body mat-typography">
     <app-root class="app-wrapper"></app-root>