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 - layout (string, optional): the name of the site to display on the login page.
7 -->
8 <#macro adminLoginPage title='' site_name='LUTECE' params='' deprecated...>
9 <@deprecatedWarning args=deprecated />
10 <#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')?number = 1> dir="rtl"</#if></#if></#local>
11 <#local logoUrl = (dskey('portal.site.site_property.logo_url')!)?has_content?then(dskey('portal.site.site_property.logo_url'), 'themes/admin/shared/images/logo-header-icon.png')>
12 <#local loginLayoutImg=dskey('portal.site.site_property.login.image')?trim />
13 </head>
14 <body class="antialiased d-flex flex-column" ${readMode!}<#if params!=''> ${params}</#if>>
15 <main id="login-page" class="page page-center">
16 <#if dskey('portal.site.site_property.bo.showXs.checkbox') == '0' >
17 <@div class="position-fixed top-0 w-100 d-block d-md-block d-lg-none m-0 p-0 overflow-hidden" params='style="z-index: 1050"'>
18 <@pageColumn class="p-0 m-0">
19 <@div class="d-flex align-items-center justify-content-center vh-100 ">
20 <@div class="container">
21 <@div class="card shadow-lg rounded-4 p-4 mt-3 mx-2 mw-30">
22 <@div class="card-body p-5 fs-6">
23 <@div class="text-center mb-4">
24 <@link href='/' target='_blank'>
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 <#if loginLayoutImg?trim !=''>
40 <div class="container py-4">
41 <div class="row align-items-center g-4">
42 <div class="col-lg">
43 </#if>
44 <#-- Content -->
45 <#assign containerClass><#if loginLayoutImg?trim =''> container-tight py-4<#else>toto</#if></#assign>
46 <@div class="container${containerClass}!''">
47 <@div class="text-center mb-4">
48 <@link href='.' target='_blank' class='admin-logo' >
49 <@span class="visually-hidden">#i18n{portal.admin.admin_login.gotoFO} ${site_name!} </@span>
50 <@img url='${logoUrl}' alt='${site_name!}' class='logo' params='aria-hidden="true" height="24" width="24"' />
51 </@link>
52 </@div>
53 <@div class="card card-md">
54 <@div class="card-body bg-white">
55 <h2 class="card-title text-center mb-4 pt-2">
56 #i18n{portal.admin.admin_login.welcome}
57 <span class="d-block">${site_name!}</span>
58 </h2>
59 <#nested>
60 </@div>
61 </@div>
62 </@div>
63 <p class="text-center text-white"><small>#i18n{portal.site.portal_footer.labelMadeBy} ${version}</small></p>
64 <#-- End content -->
65 <#if loginLayoutImg !='' && !loginLayoutImg?starts_with('DS') >
66 </div>
67 <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
68 <div class="bg-cover h-100 min-vh-100 w-100" style="background-image: url(${loginLayoutImg});background-size:70%; "></div>
69 </div>
70 </div>
71 </div>
72 </div>
73 </#if>
74 <#if dskey('portal.site.site_property.bo.showXsWarning.checkbox') == '1' >
75 <@initToast position='top-0 start-50 translate-middle-x' showAll=true >
76 <@addToast title='' content='#i18n{portal.site.message.showXsWarningMsg}' class='text-bg-warning d-block d-sm-block d-md-block d-lg-none' />
77 </@initToast>
78 </#if>
79 </main>
80 <script type="module">
81 import {
82 LutecePassword
83 } from './themes/shared/modules/lutecePassword.js';
84 import {
85 LuteceLogin
86 } from './themes/shared/modules/luteceLogin.js';
87
88 const login = new LuteceLogin();
89 const password = new LutecePassword();
90
91 document.addEventListener( "DOMContentLoaded", function(){
92 /* backGround image random */
93 const aImages = '#dskey{portal.site.site_property.layout.login.image}'.split(',');
94 const backImages = '#dskey{portal.site.site_property.back_images}'.split(',');
95 login.randomImages = aImages;
96 login.randomBgImages = backImages;
97 <#if loginLayoutImg != '' >
98 login.element = '.bg-cover';
99 </#if>
100 login.init( )
101 /* Password Toggler */
102 password.initPassToggler( );
103 });
104 </script>
105 <@coreAdminJSLinks />
106 </#macro>