adminLoginPage.ftl
1 <#-- Macro: adminLoginPage
2 Description: Generates the login page for the admin dashboard, with a custom background image and site name. The macro includes a script that randomly selects a background image from a list of images.
3 Parameters:
4 - title (string, optional): the title to display on the login page.
5 - site_name (string, optional): the name of the site to display on the login page.
6 -->
7 <#macro adminLoginPage title='' site_name='LUTECE' params='' deprecated...>
8 <@deprecatedWarning args=deprecated />
9 <#local readMode><#if dskey('portal.site.site_property.layout.readmode.checkbox')?trim?starts_with('DS')><#else><#if dskey('portal.site.site_property.layout.readmode.checkbox') = '1'> dir="rtl"</#if></#if></#local>
10 <#assign logoUrl = (dskey('portal.site.site_property.logo_url')!)?has_content?then(dskey('portal.site.site_property.logo_url'), 'themes/admin/shared/images/logo-header.svg')>
11 <#local loginLayoutImg=dskey('portal.site.site_property.login.image')?trim />
12 </head>
13 <body class="lutece-login" data-bs-theme="light" ${readMode!}<#if params!=''> ${params}</#if>>
14 <main>
15 <#if dskey('portal.site.site_property.bo.showXsWarning.checkbox') == '0' >
16 <@div class="position-fixed top-0 w-100 d-block d-md-block d-lg-none m-0 p-0 bg-body overflow-hidden" params='style="z-index: 1050"'>
17 <@pageColumn class="p-0 m-0">
18 <@div class="d-flex align-items-center justify-content-center vh-100 ">
19 <@div class="container">
20 <@div class="card shadow-lg rounded-4 p-4 mt-3 mx-auto mw-30">
21 <@div class="card-body p-5 fs-6">
22 <@div class="text-center mb-4">
23 <@link href='/' target='_blank'>
24 <img src="${dskey('portal.site.site_property.logo_url')}" height="40" alt="Logo" aria-hidden="true" >
25 <span class="visually-hidden">${site_name!'Lutece'}</span>
26 </@link>
27 </@div>
28 <@div class='d-flex flex-column align-items-center'>
29 <h2 class="h1 mb-4 text-center">#i18n{portal.admin.admin_login.welcome} ${site_name!}</h2>
30 <i class="ti ti-device-mobile-off" style="font-size:120px !important"></i>
31 </@div>
32 </@div>
33 </@div>
34 </@div>
35 </@div>
36 </@pageColumn>
37 </@div>
38 </#if>
39 <#assign pageClass><#if !dskey('portal.site.site_property.bo.showXs.checkbox')?trim?starts_with('DS')><#if dskey('portal.site.site_property.bo.showXs.checkbox')?number == 0>d-none d-lg-block d-lg-flex<#else>d-block d-lg-flex</#if><#else>d-none d-lg-block d-lg-flex</#if></#assign>
40 <@pageContainer class=pageClass>
41 <@pageColumn id="lutece-login-block" class="border-end p-0" height="full">
42 <@div class="d-flex align-items-center justify-content-evenly vh-100 me-md-5">
43 <@div class="container-tight">
44 <@div class="card rounded-4 py-2 py-md-5 mx-3 mx-md-5 mw-30">
45 <@div class="px-2 px-md-5 fs-6">
46 <@div class="text-center mb-4">
47 <@link href="." params='aria-label="#i18n{portal.admin.admin_login.buttonConnect} ${site_name!}"'>
48 <@img url="${logoUrl}" alt="${site_name!}" params='height="35" aria-hidden="true"' />
49 </@link>
50 </@div>
51 <h1 class="mb-5 text-center">#i18n{portal.admin.admin_login.welcome} ${site_name!}</h1>
52 <#nested>
53 </@div>
54 </@div>
55 <@p class='text-center text-muted mt-5'>
56 <#if version?contains("SNAPSHOT")>
57 <@tag color="warning"><i class="ti ti-alert-triangle-filled"></i> Version ${version}</@tag>
58 <#else>
59 <@tag color="success"><i class="ti ti-discount-check"></i> Version ${version}</@tag>
60 </#if>
61 </@p>
62 </@div>
63 </@div>
64 </@pageColumn>
65 <#if loginLayoutImg?trim != ''>
66 <@pageColumn id="lutece-advert" class="p-0 d-none d-xxl-block bg-login-adv">
67 <@div class="d-flex align-items-center justify-content-evenly vh-100 fw-bold text-white">
68 <@div class="fadeInTop border-0 border-none bg-transparent">
69 <h1 class="fs-1 text-center">#i18n{portal.admin.admin_login.title}</h1>
70 <p class="text-center">#i18n{portal.admin.admin_login.description}</p>
71 <figure class="d-flex justify-content-center">
72 <@img url=loginLayoutImg params='aria-hidden="true" style="max-width:1000px;"'/>
73 </figure>
74 </@div>
75 </@div>
76 </@pageColumn>
77 </#if>
78 </@pageContainer>
79 </main>
80 <script type="module">
81 import { LutecePassword } from './themes/shared/modules/lutecePassword.js';
82 const passwordC = new LutecePassword();
83 const savedTheme = localStorage.getItem('lutece-corporate-theme');
84 document.addEventListener("DOMContentLoaded", function() {
85 /* Password Toggler */
86 passwordC.initPassToggler();
87 });
88 if ( savedTheme ) {
89 document.body.setAttribute('data-bs-theme', savedTheme);
90 }
91 </script>
92 </#macro>