sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add language switching to admin and merchant frontends
Some checks failed
CI / ruff (push) Successful in 10s
Details
CI / pytest (push) Failing after 46m27s
Details
CI / validate (push) Successful in 23s
Details
CI / dependency-scanning (push) Successful in 29s
Details
CI / docs (push) Has been skipped
Details
CI / deploy (push) Has been skipped
Details

Browse Source 
- Add cookie to ADMIN resolution chain (cookie → user_pref → "en")
- Add explicit MERCHANT resolution (cookie → user_pref → "fr")
- Add language selector dropdown to admin and merchant headers
- Add languageSelector() function to merchant init-alpine.js
- Add flag-icons CSS and i18n.js setup to merchant base template
- Add compact flag-based language selector to both login pages
- Make lang attribute dynamic on all base and login templates
- Pass current_language to login route template context
- Update architecture doc with ADMIN/MERCHANT resolution priorities

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-02-24 10:26:57 +01:00
parent 0389294b1a
commit 6c78827c7f
11 changed files with 219 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/modules/tenancy/templates/tenancy/admin/login.html
View File

@@ -1,6 +1,6 @@
{# app/templates/admin/login.html #}
<!DOCTYPE html>
<html :class="{ 'dark': dark }" x-data="adminLogin()" lang="en">
<html :class="{ 'dark': dark }" x-data="adminLogin()" lang="{{ current_language|default('en') }}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,6 +9,12 @@
<link href="/static/shared/fonts/inter.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />
<!-- Flag Icons CSS (for language selector) with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/flag-icons.min.css') }}';"
/>
<style>
[x-cloak] { display: none !important; }
</style>
@@ -97,6 +103,23 @@
← Back to Platform
</a>
</p>
<!-- Language selector -->
<div class="flex items-center justify-center gap-3 mt-6" x-data="{
async setLang(lang) {
await fetch('/api/v1/platform/language/set', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({language: lang})
});
window.location.reload();
}
}">
<button @click="setLang('en')" class="fi fi-gb text-lg opacity-60 hover:opacity-100 transition-opacity" title="English"></button>
<button @click="setLang('fr')" class="fi fi-fr text-lg opacity-60 hover:opacity-100 transition-opacity" title="Français"></button>
<button @click="setLang('de')" class="fi fi-de text-lg opacity-60 hover:opacity-100 transition-opacity" title="Deutsch"></button>
<button @click="setLang('lb')" class="fi fi-lu text-lg opacity-60 hover:opacity-100 transition-opacity" title="Lëtzebuergesch"></button>
</div>
</div>
</div>
</div>

25
app/modules/tenancy/templates/tenancy/merchant/login.html
View File

@@ -1,7 +1,7 @@
{# app/modules/tenancy/templates/tenancy/merchant/login.html #}
{# Standalone login page - does NOT extend merchant/base.html #}
<!DOCTYPE html>
<html :class="{ 'dark': dark }" x-data="merchantLogin()" lang="en">
<html :class="{ 'dark': dark }" x-data="merchantLogin()" lang="{{ current_language|default('fr') }}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,6 +10,12 @@
<link href="/static/shared/fonts/inter.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', path='merchant/css/tailwind.output.css') }}" />
<!-- Flag Icons CSS (for language selector) with local fallback -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css"
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/flag-icons.min.css') }}';"
/>
<style>
[x-cloak] { display: none !important; }
</style>
@@ -128,6 +134,23 @@
</a>
</p>
</div>
<!-- Language selector -->
<div class="flex items-center justify-center gap-3 mt-6" x-data="{
async setLang(lang) {
await fetch('/api/v1/platform/language/set', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({language: lang})
});
window.location.reload();
}
}">
<button @click="setLang('en')" class="fi fi-gb text-lg opacity-60 hover:opacity-100 transition-opacity" title="English"></button>
<button @click="setLang('fr')" class="fi fi-fr text-lg opacity-60 hover:opacity-100 transition-opacity" title="Français"></button>
<button @click="setLang('de')" class="fi fi-de text-lg opacity-60 hover:opacity-100 transition-opacity" title="Deutsch"></button>
<button @click="setLang('lb')" class="fi fi-lu text-lg opacity-60 hover:opacity-100 transition-opacity" title="Lëtzebuergesch"></button>
</div>
</div>
</div>
</div>