[PR #803] [MERGED] feat: add admin account page with logout and responsive address bar #775

New issue

Closed

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

kerem commented

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

Owner

📋 Pull Request Information

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

Base: main ← Head: feature/email

📝 Commits (1)

d7b8ac0 feat: add admin account page with logout and responsive address bar

📊 Changes

5 files changed (+83 additions, -6 deletions)

View changed files

📝 CHANGELOG.md (+1 -0)
📝 CHANGELOG_EN.md (+1 -0)
📝 frontend/src/components/AddressSelect.vue (+4 -3)
📝 frontend/src/views/Admin.vue (+75 -2)
📝 frontend/src/views/index/AddressBar.vue (+2 -1)

📄 Description

User description

Summary

This PR adds a new admin account page and improves the responsive layout of the address bar.

Changes

Admin Account Page

✅ Add new "Admin" tab in admin panel
✅ Display current login method (Admin Password / User Admin Permission / Disabled Password Check)
✅ Show logout button only for admin password login
✅ Complete logout flow: clear auth state, show confirmation dialog, redirect to home
✅ Support i18n (English/Chinese)

Responsive Address Bar

✅ Enable auto-wrap for address select component
✅ Use flexbox gap for consistent spacing
✅ Optimize flex layout for better responsiveness
✅ Prevent button text wrapping with white-space: nowrap

Other Improvements

✅ Update changelog (Chinese & English)
✅ Fix missing openSettings in state destructuring
✅ Use project standard n-modal component for logout confirmation

Test Plan

Test admin password login → can see and use logout button
Test user admin permission → cannot see logout button
Test responsive layout on different screen sizes
Test address bar auto-wrap when space is limited
Test i18n for both English and Chinese

Screenshots

N/A

Closes #802

🤖 Generated with Claude Code

PR Type

Enhancement, Bug fix

Description

Added admin account page with logout functionality for password login.
Improved responsive layout for address bar using flexbox and auto-wrap.
Enhanced i18n support for admin panel (English/Chinese).
Updated changelog to reflect new features and fixes.

Changes walkthrough 📝

Relevant files

Enhancement

AddressSelect.vue `Improved responsive layout for address selection` frontend/src/components/AddressSelect.vue Enabled auto-wrap for address row layout. Adjusted flex properties for address select and copy button. Added consistent spacing using flexbox `gap`. Prevented text wrapping for copy button.	+4/-3
Admin.vue `Added admin account page with logout functionality` frontend/src/views/Admin.vue Added admin account tab to display login method. Implemented logout functionality for admin password login. Added i18n support for admin panel (English/Chinese). Included modal confirmation for logout action.	+75/-2
AddressBar.vue `Improved layout for address bar components` frontend/src/views/index/AddressBar.vue Adjusted flex properties for address manage button. Prevented text wrapping for address manage button.	+2/-1

Documentation

CHANGELOG.md `Updated changelog for admin account page feature` CHANGELOG.md Documented addition of admin account page with logout functionality. Updated features section with new admin enhancements.	+1/-0
CHANGELOG_EN.md `Updated English changelog for admin account page feature` CHANGELOG_EN.md Documented addition of admin account page with logout functionality. Updated features section with new admin enhancements.	+1/-0

Need help?
Type /help how to ... in the comments thread for any questions about PR-Agent usage.
Check out the documentation for more information.

_{🔄 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/803 **Author:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Created:** 1/3/2026 **Status:** ✅ Merged **Merged:** 1/3/2026 **Merged by:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Base:** `main` ← **Head:** `feature/email` --- ### 📝 Commits (1) - [`d7b8ac0`](https://github.com/dreamhunter2333/cloudflare_temp_email/commit/d7b8ac0766f314159e86179eeafa5975cede31f2) feat: add admin account page with logout and responsive address bar ### 📊 Changes **5 files changed** (+83 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `CHANGELOG.md` (+1 -0) 📝 `CHANGELOG_EN.md` (+1 -0) 📝 `frontend/src/components/AddressSelect.vue` (+4 -3) 📝 `frontend/src/views/Admin.vue` (+75 -2) 📝 `frontend/src/views/index/AddressBar.vue` (+2 -1) </details> ### 📄 Description ### **User description** ## Summary This PR adds a new admin account page and improves the responsive layout of the address bar. ## Changes ### Admin Account Page - ✅ Add new "Admin" tab in admin panel - ✅ Display current login method (Admin Password / User Admin Permission / Disabled Password Check) - ✅ Show logout button only for admin password login - ✅ Complete logout flow: clear auth state, show confirmation dialog, redirect to home - ✅ Support i18n (English/Chinese) ### Responsive Address Bar - ✅ Enable auto-wrap for address select component - ✅ Use flexbox `gap` for consistent spacing - ✅ Optimize flex layout for better responsiveness - ✅ Prevent button text wrapping with `white-space: nowrap` ### Other Improvements - ✅ Update changelog (Chinese & English) - ✅ Fix missing `openSettings` in state destructuring - ✅ Use project standard `n-modal` component for logout confirmation ## Test Plan - [x] Test admin password login → can see and use logout button - [x] Test user admin permission → cannot see logout button - [x] Test responsive layout on different screen sizes - [x] Test address bar auto-wrap when space is limited - [x] Test i18n for both English and Chinese ## Screenshots N/A ## Related Issues Closes #802 🤖 Generated with [Claude Code](https://claude.com/claude-code) ___ ### **PR Type** Enhancement, Bug fix ___ ### **Description** - Added admin account page with logout functionality for password login. - Improved responsive layout for address bar using flexbox and auto-wrap. - Enhanced i18n support for admin panel (English/Chinese). - Updated changelog to reflect new features and fixes. ___ ### **Changes walkthrough** 📝 <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>AddressSelect.vue</strong><dd><code>Improved responsive layout for address selection</code>                  </dd></summary> <hr> frontend/src/components/AddressSelect.vue <li>Enabled auto-wrap for address row layout.<br> <li> Adjusted flex properties for address select and copy button.<br> <li> Added consistent spacing using flexbox <code>gap</code>.<br> <li> Prevented text wrapping for copy button. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/803/files#diff-004e3c7a9fc0dc8012a88f715228041a9a1af17001c2094ec0f655bbf957ef3c">+4/-3</a>      </td> </tr> <tr> <td> <details> <summary><strong>Admin.vue</strong><dd><code>Added admin account page with logout functionality</code>              </dd></summary> <hr> frontend/src/views/Admin.vue <li>Added admin account tab to display login method.<br> <li> Implemented logout functionality for admin password login.<br> <li> Added i18n support for admin panel (English/Chinese).<br> <li> Included modal confirmation for logout action. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/803/files#diff-78137b072a7fa52c6d503efb9a3d32c07da5073dd5ca32ac48b1402ac2481a55">+75/-2</a>    </td> </tr> <tr> <td> <details> <summary><strong>AddressBar.vue</strong><dd><code>Improved layout for address bar components</code>                              </dd></summary> <hr> frontend/src/views/index/AddressBar.vue <li>Adjusted flex properties for address manage button.<br> <li> Prevented text wrapping for address manage button. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/803/files#diff-dec14b20ddc8434fd20bd566ff79501b9b2ea8e44343e0135f694abc61342902">+2/-1</a>      </td> </tr> </table></td></tr><tr><td><strong>Documentation</strong></td><td><table> <tr> <td> <details> <summary><strong>CHANGELOG.md</strong><dd><code>Updated changelog for admin account page feature</code>                  </dd></summary> <hr> CHANGELOG.md <li>Documented addition of admin account page with logout functionality.<br> <li> Updated features section with new admin enhancements. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/803/files#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4ed">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>CHANGELOG_EN.md</strong><dd><code>Updated English changelog for admin account page feature</code>  </dd></summary> <hr> CHANGELOG_EN.md <li>Documented addition of admin account page with logout functionality.<br> <li> Updated features section with new admin enhancements. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/803/files#diff-77d2276dbbf8eb648363b81ea97049986b18e2cf1e90bd20fb5133ed5ff4fcae">+1/-0</a>      </td> </tr> </table></td></tr></tr></tbody></table> ___ > <details> <summary> Need help?</summary><li>Type <code>/help how to ...</code> in the comments thread for any questions about PR-Agent usage.</li><li>Check out the <a href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a> for more information.</li></details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>