Some tweaks

src-ui/src/app/app.module.ts

@@ -191,6 +191,7 @@ import {
   folderFill,
   funnel,
   gear,
+  google,
   grid,
   gripVertical,
   hash,
@@ -201,6 +202,7 @@ import {
   link,
   listTask,
   listUl,
+  microsoft,
   nodePlus,
   pencil,
   people,
@@ -295,6 +297,7 @@ const icons = {
   folderFill,
   funnel,
   gear,
+  google,
   grid,
   gripVertical,
   hash,
@@ -305,6 +308,7 @@ const icons = {
   link,
   listTask,
   listUl,
+  microsoft,
   nodePlus,
   pencil,
   people,

src-ui/src/app/components/manage/mail/mail.component.html

@@ -13,8 +13,16 @@
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
       <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Account</ng-container>
     </button>
-    <a class="btn btn-sm btn-outline-primary ms-2" [href]="gmailOAuthUrl" i18n>Connect with Gmail</a>
-    <a class="btn btn-sm btn-outline-primary ms-2" [href]="outlookOAuthUrl" i18n>Connect with Outlook</a>
+    @if (gmailOAuthUrl) {
+      <a class="btn btn-sm btn-outline-secondary ms-2" [href]="gmailOAuthUrl">
+        <i-bs name="google"></i-bs>&nbsp;<ng-container i18n>Connect Gmail Account</ng-container>
+      </a>
+    }
+    @if (outlookOAuthUrl) {
+      <a class="btn btn-sm btn-outline-secondary ms-2" [href]="outlookOAuthUrl">
+        <i-bs name="microsoft"></i-bs>&nbsp;<ng-container i18n>Connect Outlook Account</ng-container>
+      </a>
+    }
   </h4>
   <ul class="list-group">
     <li class="list-group-item">

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -38,7 +38,7 @@ export class MailComponent
   oAuthAccoundId: number
 
   public get gmailOAuthUrl(): string {
-    return this.settingsService.get(SETTINGS_KEYS.GOOGLE_OAUTH_URL)
+    return this.settingsService.get(SETTINGS_KEYS.GMAIL_OAUTH_URL)
   }
 
   public get outlookOAuthUrl(): string {
@@ -94,12 +94,20 @@ export class MailComponent
 
     this.route.queryParamMap.subscribe((params) => {
       if (params.get('oauth_success')) {
-        this.oAuthAccoundId = parseInt(params.get('account_id'))
-        if (this.mailAccounts.length > 0) {
-          this.editMailAccount(
-            this.mailAccounts.find(
-              (account) => account.id === this.oAuthAccoundId
+        const success = params.get('oauth_success') === '1'
+        if (success) {
+          this.toastService.showInfo($localize`OAuth2 authentication success`)
+          this.oAuthAccoundId = parseInt(params.get('account_id'))
+          if (this.mailAccounts.length > 0) {
+            this.editMailAccount(
+              this.mailAccounts.find(
+                (account) => account.id === this.oAuthAccoundId
+              )
             )
+          }
+        } else {
+          this.toastService.showError(
+            $localize`OAuth2 authentication failed, see logs for details`
           )
         }
       }

src-ui/src/app/data/ui-settings.ts

@@ -64,7 +64,7 @@ export const SETTINGS_KEYS = {
   SEARCH_DB_ONLY: 'general-settings:search:db-only',
   SEARCH_FULL_TYPE: 'general-settings:search:more-link',
   EMPTY_TRASH_DELAY: 'trash_delay',
-  GOOGLE_OAUTH_URL: 'google_oauth_url',
+  GMAIL_OAUTH_URL: 'gmail_oauth_url',
   OUTLOOK_OAUTH_URL: 'outlook_oauth_url',
 }
 
@@ -245,7 +245,7 @@ export const SETTINGS: UiSetting[] = [
     default: 30,
   },
   {
-    key: SETTINGS_KEYS.GOOGLE_OAUTH_URL,
+    key: SETTINGS_KEYS.GMAIL_OAUTH_URL,
     type: 'string',
     default: '',
   },