diff --git a/packages/portal/package.json b/packages/portal/package.json
index eed40280..e1f1e156 100644
--- 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
index bd659283..862a1a64 100644
--- a/packages/portal/src/app/authentication/authentication.component.html
+++ b/packages/portal/src/app/authentication/authentication.component.html
@@ -2,11 +2,13 @@
Join with your favorite social media account
-
diff --git a/packages/portal/src/app/authentication/authentication.component.scss b/packages/portal/src/app/authentication/authentication.component.scss
index 6271962e..77cb5f64 100644
--- 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
index 8bccc79a..096b96ea 100644
--- 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
index e2120863..48ea67b0 100644
--- 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"
/>
+