From c69b5583fcfa4d80f2604cf38adbd59f9f6775d0 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Sat, 5 Jul 2025 16:17:47 +0300
Subject: [PATCH] company members: - add hint about third-party authentication
 on login page; - add auth providers icons in Members table on company page

---
 .../app/components/company/company.component.css  | 15 ++++++++++++++-
 .../app/components/company/company.component.html | 14 +++++++++++++-
 .../app/components/company/company.component.ts   |  5 +++++
 .../src/app/components/login/login.component.html |  3 ++-
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css
index 27f77899d..6ed6fcb27 100644
--- a/frontend/src/app/components/company/company.component.css
+++ b/frontend/src/app/components/company/company.component.css
@@ -86,7 +86,7 @@
 }
 
 .company-member-cell_email {
-    max-width: 200px;
+    max-width: 216px;
 }
 
 @media (width <= 600px) {
@@ -96,6 +96,19 @@
     }
 }
 
+.company-member-cell_email-value {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.company-member-cell_email-icon {
+    flex-shrink: 0;
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+}
+
 .company-member-cell_name {
     max-width: 200px;
 }
diff --git a/frontend/src/app/components/company/company.component.html b/frontend/src/app/components/company/company.component.html
index c070d7743..e16379bba 100644
--- a/frontend/src/app/components/company/company.component.html
+++ b/frontend/src/app/components/company/company.component.html
@@ -84,7 +84,19 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
             class="company-member-cell company-member-cell_email"
             data-label="Email"
             attr.data-testid="company-member-email-{{i}}-cell">
-            <span>{{element.email}}</span>
+            <div class="company-member-cell_email-value">
+                <mat-icon *ngIf="element.externalRegistrationProvider === null"
+                    class="company-member-cell_email-icon"
+                    matTooltip="You registred with your email">
+                    mail_outline
+                </mat-icon>
+                <mat-icon *ngIf="element.externalRegistrationProvider !== null"
+                    class="company-member-cell_email-icon"
+                    [svgIcon]="authProviderIcons[currentUser.externalRegistrationProvider]"
+                    matTooltip="You registred with {{element.externalRegistrationProvider}}">
+                </mat-icon>
+                <span>{{element.email}}</span>
+            </div>
         </td>
         </ng-container>
 
diff --git a/frontend/src/app/components/company/company.component.ts b/frontend/src/app/components/company/company.component.ts
index 9797a639b..173bb8039 100644
--- a/frontend/src/app/components/company/company.component.ts
+++ b/frontend/src/app/components/company/company.component.ts
@@ -98,6 +98,11 @@ export class CompanyComponent {
     'USER': 'Member'
   }
 
+  public authProviderIcons = {
+    GOOGLE: 'google',
+    GITHUB: 'github',
+  }
+
   get whiteLabelSettings(): {logo: string, favicon: string, tabTitle: string} {
     return this._company.whiteLabelSettings || { logo: '', favicon: '', tabTitle	: '' };
   }
diff --git a/frontend/src/app/components/login/login.component.html b/frontend/src/app/components/login/login.component.html
index ec0dfa537..567c4893e 100644
--- a/frontend/src/app/components/login/login.component.html
+++ b/frontend/src/app/components/login/login.component.html
@@ -23,7 +23,8 @@ <h1 class="mat-headline-4 loginTitle">
                     To log in, please start by entering your email address and click next to continue.
                 </div>
                 <div *ngIf="userCompanies && userCompanies.length > 1 && !isCustomDomain" class="mat-body-1 login-header__directions">
-                    Please select the company or organization you wish to log into and click next to continue.
+                    Please select the company or organization you wish to log into and click next to continue. <br/>
+                    Don’t see your company? Try logging in with Google or GitHub if that’s how you signed up.
                 </div>
             </div>