[PR #825] [MERGED] feat(oauth2): add SVG icon support for OAuth2 providers #787

New issue

Closed

opened 2026-02-26 21:32:57 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 21:32:57 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825
Author: @dreamhunter2333
Created: 2/1/2026
Status: ✅ Merged
Merged: 2/1/2026
Merged by: @dreamhunter2333

Base: main ← Head: feature/email

📝 Commits (1)

a24aa26 feat(oauth2): add SVG icon support for OAuth2 providers

📊 Changes

6 files changed (+59 additions, -3 deletions)

View changed files

📝 frontend/src/models/index.ts (+1 -0)
📝 frontend/src/store/index.js (+1 -1)
📝 frontend/src/views/admin/UserOauth2Settings.vue (+37 -0)
📝 frontend/src/views/user/UserLogin.vue (+16 -0)
📝 worker/src/models/index.ts (+1 -0)
📝 worker/src/user_api/settings.ts (+3 -2)

📄 Description

User description

Summary

Add optional icon field to UserOauth2Settings type for SVG icons
Include preset SVG icons for GitHub, Linux Do, and Authentik templates
Render icons on OAuth2 login buttons in user login page
Add icon configuration UI with live preview in admin panel

Changes

worker/src/models/index.ts - Add icon?: string field
frontend/src/models/index.ts - Add icon?: string field
worker/src/user_api/settings.ts - Return icon in API response
frontend/src/store/index.js - Update type annotation
frontend/src/views/admin/UserOauth2Settings.vue - Add icon config UI
frontend/src/views/user/UserLogin.vue - Render OAuth icons

Test plan

Create new OAuth2 config with template (GitHub/Linux Do/Authentik) and verify icon is auto-filled
Verify icon preview displays correctly in admin panel
Verify login page shows icons on OAuth buttons
Test backward compatibility with existing configs (no icon field)

🤖 Generated with Claude Code

PR Type

Enhancement

Description

Added optional icon field to UserOauth2Settings for SVG icons.
Integrated preset SVG icons for GitHub, Linux Do, and Authentik templates.
Updated UI to display and configure OAuth2 icons in admin panel.
Rendered OAuth2 icons on login buttons in the user login page.

Diagram Walkthrough

flowchart LR
  A["Add `icon` field to UserOauth2Settings"] -- "API integration" --> B["Return icon in API response"]
  A -- "UI integration" --> C["Admin panel: Configure and preview icons"]
  A -- "UI integration" --> D["User login page: Render icons on buttons"]
  C -- "Preset icons" --> E["GitHub, Linux Do, Authentik"]

File Walkthrough

Relevant files

Enhancement

UserOauth2Settings.vue `Add and preview OAuth2 icons in admin panel` frontend/src/views/admin/UserOauth2Settings.vue Added `icon` and `iconPreview` fields for OAuth2 settings. Introduced `OAUTH2_ICONS` with preset SVG icons for providers. Updated UI to configure and preview OAuth2 icons. Styled icon preview with `.oauth2-icon-preview` class.	+37/-0
UserLogin.vue `Display OAuth2 icons on login buttons` frontend/src/views/user/UserLogin.vue Rendered OAuth2 icons on login buttons using `item.icon`. Styled icons with `.oauth2-icon` class for consistent display.	+16/-0
index.ts Extend `UserOauth2Settings` with `icon` field frontend/src/models/index.ts Added optional `icon` field to `UserOauth2Settings` type.	+1/-0
index.ts Extend `UserOauth2Settings` with `icon` field worker/src/models/index.ts Added optional `icon` field to `UserOauth2Settings` type.	+1/-0
settings.ts Include `icon` in OAuth2 API response worker/src/user_api/settings.ts Included `icon` in OAuth2 settings API response. Handled optional `icon` field in API logic.	+3/-2
index.js Update `oauth2ClientIDs` type annotation for icons frontend/src/store/index.js Updated type annotation for `oauth2ClientIDs` to include optional `icon`.	+1/-1

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825 **Author:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Created:** 2/1/2026 **Status:** ✅ Merged **Merged:** 2/1/2026 **Merged by:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Base:** `main` ← **Head:** `feature/email` --- ### 📝 Commits (1) - [`a24aa26`](https://github.com/dreamhunter2333/cloudflare_temp_email/commit/a24aa26ec60a8f192d87eb9ee7bb6ab4459a793a) feat(oauth2): add SVG icon support for OAuth2 providers ### 📊 Changes **6 files changed** (+59 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/models/index.ts` (+1 -0) 📝 `frontend/src/store/index.js` (+1 -1) 📝 `frontend/src/views/admin/UserOauth2Settings.vue` (+37 -0) 📝 `frontend/src/views/user/UserLogin.vue` (+16 -0) 📝 `worker/src/models/index.ts` (+1 -0) 📝 `worker/src/user_api/settings.ts` (+3 -2) </details> ### 📄 Description ### **User description** ## Summary - Add optional `icon` field to UserOauth2Settings type for SVG icons - Include preset SVG icons for GitHub, Linux Do, and Authentik templates - Render icons on OAuth2 login buttons in user login page - Add icon configuration UI with live preview in admin panel ## Changes - `worker/src/models/index.ts` - Add `icon?: string` field - `frontend/src/models/index.ts` - Add `icon?: string` field - `worker/src/user_api/settings.ts` - Return icon in API response - `frontend/src/store/index.js` - Update type annotation - `frontend/src/views/admin/UserOauth2Settings.vue` - Add icon config UI - `frontend/src/views/user/UserLogin.vue` - Render OAuth icons ## Test plan - [ ] Create new OAuth2 config with template (GitHub/Linux Do/Authentik) and verify icon is auto-filled - [ ] Verify icon preview displays correctly in admin panel - [ ] Verify login page shows icons on OAuth buttons - [ ] Test backward compatibility with existing configs (no icon field) 🤖 Generated with [Claude Code](https://claude.ai/code) ___ ### **PR Type** Enhancement ___ ### **Description** - Added optional `icon` field to `UserOauth2Settings` for SVG icons. - Integrated preset SVG icons for GitHub, Linux Do, and Authentik templates. - Updated UI to display and configure OAuth2 icons in admin panel. - Rendered OAuth2 icons on login buttons in the user login page. ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Add `icon` field to UserOauth2Settings"] -- "API integration" --> B["Return icon in API response"] A -- "UI integration" --> C["Admin panel: Configure and preview icons"] A -- "UI integration" --> D["User login page: Render icons on buttons"] C -- "Preset icons" --> E["GitHub, Linux Do, Authentik"] ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>UserOauth2Settings.vue</strong><dd><code>Add and preview OAuth2 icons in admin panel</code>                            </dd></summary> <hr> frontend/src/views/admin/UserOauth2Settings.vue <ul><li>Added <code>icon</code> and <code>iconPreview</code> fields for OAuth2 settings.<br> <li> Introduced <code>OAUTH2_ICONS</code> with preset SVG icons for providers.<br> <li> Updated UI to configure and preview OAuth2 icons.<br> <li> Styled icon preview with <code>.oauth2-icon-preview</code> class.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825/files#diff-5ded2f107f7fd8a04eb55462a9cb55b85bee3afc56fc45f8ba6a4bcf90755ebb">+37/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>UserLogin.vue</strong><dd><code>Display OAuth2 icons on login buttons</code>                                        </dd></summary> <hr> frontend/src/views/user/UserLogin.vue <ul><li>Rendered OAuth2 icons on login buttons using <code>item.icon</code>.<br> <li> Styled icons with <code>.oauth2-icon</code> class for consistent display.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825/files#diff-682df0c783a2d925a33928df3ff3e1d30af7937055f95cb3fcb0d26c156e228c">+16/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Extend `UserOauth2Settings` with `icon` field</code>                        </dd></summary> <hr> frontend/src/models/index.ts - Added optional `icon` field to `UserOauth2Settings` type. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825/files#diff-c27b6b2795955789411e9958ddb12e04fa93ef3951047ea65a1542771341a7b1">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Extend `UserOauth2Settings` with `icon` field</code>                        </dd></summary> <hr> worker/src/models/index.ts - Added optional `icon` field to `UserOauth2Settings` type. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825/files#diff-430bcc4ffa98738e7419c774a53ba2ce8b5127a36b3741e89bf36b95a56f02bc">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>settings.ts</strong><dd><code>Include `icon` in OAuth2 API response</code>                                        </dd></summary> <hr> worker/src/user_api/settings.ts <ul><li>Included <code>icon</code> in OAuth2 settings API response.<br> <li> Handled optional <code>icon</code> field in API logic.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825/files#diff-0e41b1cd8b40c15de837bee6cf774f29499e490f0b565b0f5556b549f7344dd3">+3/-2</a>      </td> </tr> <tr> <td> <details> <summary><strong>index.js</strong><dd><code>Update `oauth2ClientIDs` type annotation for icons</code>              </dd></summary> <hr> frontend/src/store/index.js <ul><li>Updated type annotation for <code>oauth2ClientIDs</code> to include optional <code>icon</code>.</ul> </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/825/files#diff-0c36ce15651c51795b411359e8caaf5af7960c82674b4f2015b8dd5f480fde2c">+1/-1</a>      </td> </tr> </table></td></tr></tr></tbody></table> </details> ___ --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>