feat: redesign admin panel & profile page, optimize Dockerfile, remove rootless

- Completely redesign admin.html matching OxiCloud design system
- Create standalone profile.html page with avatar, details & password change
- Optimize Dockerfile: 3-stage build, non-root user, OCI labels, layer cache
- Add .dockerignore to reduce build context
- Remove redundant Dockerfile.rootless & rootless-compose.yml
- Redesign login language selector as compact dropdown with search
- Fix CI/CD workflows (ci.yml, docker-build.yml, docker-publish.yml)
- Update app.js to navigate to profile page instead of modal
This commit is contained in:
Dionisio
2026-02-11 14:09:40 +01:00
parent 3050955f9c
commit 1e8a7dd5bb
14 changed files with 957 additions and 759 deletions
+17 -33
View File
@@ -28,44 +28,28 @@
<div class="auth-logo-text">OxiCloud</div>
</div>
<!-- Auto-detected language banner -->
<div class="lang-autodetected" id="lang-autodetected" style="display: none;">
<i class="fas fa-magic"></i>
<span id="lang-autodetected-text">We detected your language</span>
</div>
<h2 class="auth-title" id="language-title">Welcome to OxiCloud</h2>
<p class="language-subtitle" id="language-subtitle">Please select your language</p>
<!-- Popular languages shown as cards -->
<div class="language-options" id="language-options">
<!-- Populated dynamically by auth.js -->
<!-- Single selected language box with inline dropdown -->
<div class="lang-picker" id="lang-picker">
<div class="lang-picker-selected" id="lang-picker-selected" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false">
<span class="lang-picker-flag" id="lang-picker-flag">🇬🇧</span>
<span class="lang-picker-name" id="lang-picker-name">English</span>
<i class="fas fa-chevron-down lang-picker-arrow"></i>
</div>
<div class="lang-picker-dropdown" id="lang-picker-dropdown" role="listbox">
<div class="lang-picker-search">
<i class="fas fa-search"></i>
<input type="text" id="lang-picker-search-input" placeholder="Search language..." autocomplete="off">
</div>
<div class="lang-picker-list" id="lang-picker-list">
<!-- Populated dynamically by auth.js -->
</div>
</div>
</div>
<!-- "More languages" link -->
<button type="button" class="lang-more-btn" id="lang-more-btn">
<i class="fas fa-globe"></i>
<span id="lang-more-text">More languages...</span>
</button>
<button type="button" class="auth-button" id="language-continue" disabled>Continue</button>
</div>
<!-- Modal: All languages with search -->
<div class="lang-modal-overlay" id="lang-modal-overlay" style="display: none;">
<div class="lang-modal">
<div class="lang-modal-header">
<h3 id="lang-modal-title">Select language</h3>
<button type="button" class="lang-modal-close" id="lang-modal-close">&times;</button>
</div>
<div class="lang-modal-search">
<i class="fas fa-search"></i>
<input type="text" id="lang-search-input" placeholder="Search language..." autocomplete="off">
</div>
<div class="lang-modal-list" id="lang-modal-list">
<!-- Populated dynamically -->
</div>
</div>
<button type="button" class="auth-button" id="language-continue">Continue</button>
</div>
<div class="auth-panel" id="login-panel" style="display: none;">