Proyectos de Subversion Moodle

Rev

Rev 669 | Rev 672 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
669 ariadna 1
{{!
2
    This file is part of Moodle - http://moodle.org/
3
 
4
    Moodle is free software: you can redistribute it and/or modify
5
    it under the terms of the GNU General Public License as published by
6
    the Free Software Foundation, either version 3 of the License, or
7
    (at your option) any later version.
8
 
9
    Moodle is distributed in the hope that it will be useful,
10
    but WITHOUT ANY WARRANTY; without even the implied warranty of
11
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
    GNU General Public License for more details.
13
 
14
    You should have received a copy of the GNU General Public License
15
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16
}}
17
{{!
18
    @template core/loginform
19
 
20
    Moodle template for the login page.
21
 
22
    Context variables required for this template:
23
    * autofocusform: Auto focus on form ?,
24
    * canloginasguest - Is guest login allowed?,
25
    * canloginbyemail - Is login by email allowed?,
26
    * cansignup - Signup allowed?,
27
    * cookieshelpicon - cookies help icon details
28
    * error - Any errors in the form?,
29
    * forgotpasswordurl - Forgot password url,
30
    * hasidentityproviders - Flag, set to true to hide identity providers,
31
    * hasinstructions - Flag, set to true to show instructions,
32
    * identityproviders - List of identiy providers,
33
    * instructions - Instructions,
34
    * instructionsformat - Format of instructions,
35
    * loginurl - Login url,
36
    * signupurl - Signup url,
37
    * errorformatted - Formatted error,
38
    * logourl - Flag, logo url,
39
    * sitename - Name of site.,
40
    * logintoken - Random token to protect login request.,
41
    * maintenance - Maintenance message
42
 
43
    Example context (json):
44
    {
45
        "autofocusform": false,
46
        "canloginasguest": "1",
47
        "canloginbyemail": false,
48
        "cansignup": true,
49
        "cookieshelpicon": {
50
            "heading": "Cookies must be enabled in your browser",
51
            "text": "<div class=\"no-overflow\">Two cookies are used on this site. Both died..</div>",
52
            "icon": {
53
                "attributes": [
54
                    {
55
                        "name": "class",
56
                        "value": "iconhelp"
57
                    },
58
                    {
59
                        "name": "alt",
60
                        "value": "Help with Cookies must be enabled in your browser"
61
                    },
62
                    {
63
                        "name": "title",
64
                        "value": "Help with Cookies must be enabled in your browser"
65
                    },
66
                    {
67
                        "name": "src",
68
                        "value": "http://localhost/stable_master/theme/image.php?theme=space&component=core&image=help"
69
                    }
70
                ]
71
            },
72
            "linktext": null,
73
            "title": "Help with Cookies must be enabled in your browser",
74
            "url": "http://localhost/stable_master/help.php?component=core&identifier=cookiesenabled&lang=en",
75
            "ltr": true
76
        },
77
        "error": "",
78
        "forgotpasswordurl": "http://localhost/stable_master/login/forgot_password.php",
79
        "hasidentityproviders": false,
80
        "hasinstructions": true,
81
        "identityproviders": [],
82
        "instructions": "For full access to this site, you first need to create an account.",
83
        "instructionsformat": "1",
84
        "loginurl": "http://localhost/stable_master/login/index.php",
85
        "signupurl": "http://localhost/stable_master/login/signup.php",
86
        "cookieshelpiconformatted": "",
87
        "errorformatted": "",
88
        "logourl": false,
89
        "sitename": "Beer & Chips",
90
        "logintoken": "randomstring",
91
        "maintenance": "For full access to this site, you need to login in as an admin.",
92
        "languagemenu": "Choose language"
93
    }
94
 
95
 
96
}}
97
 
98
<div class="rui-login-layout
99
        {{#loginlayoutimg}}rui-login-layout-img{{/loginlayoutimg}}
100
        {{^loginlayoutimg}}rui-login-layout-simple{{/loginlayoutimg}}
101
        {{#loginlogooutside}}rui-login--logo-outsite{{/loginlogooutside}}
102
        {{#loginlayout1}}rui-login-layout--1{{/loginlayout1}}
103
        {{#loginlayout2}}rui-login-layout--2{{/loginlayout2}}
104
        {{#loginlayout3}}rui-login-layout--3{{/loginlayout3}}
105
        {{#loginlayout4}}rui-login-layout--4{{/loginlayout4}}
106
        {{#loginlayout5}}rui-login-layout--5{{/loginlayout5}}
107
        ">
108
 
109
 
110
    {{#cansignup}}
111
        {{#customsignupoutside}}
112
            <div class="rui-login-top-btn">
113
                <form action="{{signupurl}}" method="get" id="signup">
114
                    {{#stringca}}<span class="rui-login-calabel mr-2">{{{stringca}}}</span>{{/stringca}} <button type="submit" class="btn-link--clean">{{#str}}startsignup{{/str}}</button>
115
                </form>
116
            </div>
117
        {{/customsignupoutside}}
118
    {{/cansignup}}
119
 
120
 
121
    {{#loginlayoutimg}}
122
        <div class="rui-login-wrapper">
123
            <div class="rui-login-top-wrapper">
124
    {{/loginlayoutimg}}
125
 
126
    {{#loginlogooutside}}
127
        <div class="rui-login-logo-container my-6">
128
            {{#loginlayoutimg}}
129
                <div class="rui-login-top">
130
            {{/loginlayoutimg}}
131
            <div>
132
                {{#customloginlogo}}
133
                    <a href="{{{ config.wwwroot }}}" class="text-decoration-none"><img src="{{customloginlogo}}" title="{{sitename}}" alt="{{sitename}}" class="rui-login-logo img-fluid" /></a>
134
                {{/customloginlogo}}
135
 
136
                {{^customloginlogo}}
137
                    {{#logourl}}
138
                        <a href="{{{ config.wwwroot }}}"><img src="{{logourl}}" title="{{sitename}}" alt="{{sitename}}" class="rui-login-logo img-fluid" /></a>
139
                    {{/logourl}}
140
 
141
                    {{^logourl}}
142
                        <a href="{{{ config.wwwroot }}}" class="text-decoration-none">
143
                            <h1 class="rui-login-logo-name">{{sitename}}</h1>
144
                        </a>
145
                    {{/logourl}}
146
                {{/customloginlogo}}
147
            </div>
148
            {{#loginlayoutimg}}
149
        </div>{{/loginlayoutimg}}
150
</div>
151
{{/loginlogooutside}}
152
 
153
{{#loginhtmlcontent1}}
154
    <div class="rui-login-html-1">
155
        {{{loginhtmlcontent1}}}
156
    </div>
157
{{/loginhtmlcontent1}}
158
 
159
{{#loginlayoutimg}}
160
    </div>
161
    </div>
162
{{/loginlayoutimg}}
163
 
164
{{#loginlayoutimg}}
165
    <div class="rui-login-wrapper row no-gutters align-items-center justify-content-center w-100">
166
        <div class="rui-login-container row no-gutters">
167
 
168
{{/loginlayoutimg}}
169
 
170
<div class="rui-login-box">
171
    <div class="rui-login-content">
172
        {{#cansignup}}
173
            <div class="sr-only">
174
                <a href="{{signupurl}}">{{#str}} tocreatenewaccount {{/str}}</a>
175
            </div>
176
        {{/cansignup}}
177
 
178
        <div class="rui-loginpage-intro">
179
            {{^loginlogooutside}}
180
                <div class="rui-loginpage-intro-logo {{#customlogindmlogo}}dark-mode-logo{{/customlogindmlogo}} ">
181
                    {{#customloginlogo}}
182
                        <a href="{{{ config.wwwroot }}}" class="text-decoration-none">
183
                            <h2><img src="{{customloginlogo}}" title="{{sitename}}" alt="{{sitename}}" class="rui-login-logo img-fluid" /></h2>
184
                            {{#customlogindmlogo}}<h2><img src="{{customlogindmlogo}}" alt="{{sitename}}" class="rui-custom-dmlogo ml-2 img-fluid" /></h2>{{/customlogindmlogo}}
185
                        </a>
186
                    {{/customloginlogo}}
187
 
188
                    {{^customloginlogo}}
189
                        {{#logourl}}
190
                            <a href="{{{ config.wwwroot }}}" class="text-decoration-none">
191
                                <h2><img src="{{logourl}}" title="{{sitename}}" alt="{{sitename}}" class="rui-login-logo img-fluid" /></h2>
192
                            </a>
193
                        {{/logourl}}
194
 
195
                        {{^logourl}}
196
                            <a href="{{{ config.wwwroot }}}" class="text-decoration-none">
197
                                <h2>{{sitename}}</h2>
198
                            </a>
199
                        {{/logourl}}
200
                    {{/customloginlogo}}
201
                </div>
202
            {{/loginlogooutside}}
203
 
204
            {{#loginintrotext}}
205
                <div class="rui-loginpage-intro-content mb-3 text-center">
206
                    {{{loginintrotext}}}
207
                </div>
208
            {{/loginintrotext}}
209
 
210
        </div>
211
 
212
        {{#error}}
213
            <div class="loginerrors mt-3">
214
                <a href="#" id="loginerrormessage" class="accesshide">{{error}}</a>
215
                <div class="alert alert-danger" role="alert" data-aria-autofocus="true">{{error}}</div>
216
            </div>
217
        {{/error}}
218
 
219
        {{#loginidprovtop}}
220
            {{#hasidentityproviders}}
221
                <div class="rui-potentialidplist login-identityproviders mt-3 text-center">
222
                    <p class="small text-center">{{#str}} potentialidps, auth {{/str}}</p>
223
                    <div class="row no-gutters mt-1">
224
                        {{#identityproviders}}
225
                            <a class="btn btn-secondary login-identityprovider-btn rui-potentialidp w-100 mt-1" href="{{url}}">
226
                                {{#iconurl}}
227
                                    <img src="{{iconurl}}" alt="" width="24" height="24"/>
228
                                {{/iconurl}}
229
                                {{name}}
230
                            </a>
231
                        {{/identityproviders}}
232
                    </div>
233
                    <hr class="hr-small" />
234
                </div>
235
            {{/hasidentityproviders}}
236
        {{/loginidprovtop}}
237
 
238
        <div class="container-fluid login-page">
239
            <div class="row no-gutters">
240
                <!-- Columna para la imagen -->
241
                <div class="col-md-6 image-section">
242
                    <!-- Puedes usar una imagen como fondo o colocar una imagen dentro -->
670 ariadna 243
                    <img src="ruta/de/tu/imagen.jpg" alt="Imagen" class="img-fluid full-height-img">
669 ariadna 244
                </div>
245
 
246
                <!-- Columna para el formulario de login -->
247
                <div class="col-md-6 login-section d-flex justify-content-center align-items-center">
248
                    <div class="card">
249
                        <div class="card-body">
250
                            <!-- Aquí va tu formulario de inicio de sesión -->
670 ariadna 251
 
669 ariadna 252
                        </div>
253
                    </div>
254
                </div>
255
            </div>
256
        </div>
257
 
258
 
670 ariadna 259
        <div class="rui-login-form">
669 ariadna 260
 
670 ariadna 261
            <form action="{{loginurl}}" method="post" id="login">
262
                <input id="anchor" type="hidden" name="anchor" value="">
263
                <script>
264
                    document.getElementById('anchor').value = location.hash;
265
                </script>
266
                <input type="hidden" name="logintoken" value="{{logintoken}}">
267
                <div class="form-group mb-2 form-control--username-box">
268
                    <label for="username" class="sr-only">
269
                        {{^canloginbyemail}}
270
                            {{#str}} username {{/str}}
271
                        {{/canloginbyemail}}
272
                        {{#canloginbyemail}}
273
                            {{#str}} usernameemail {{/str}}
274
                        {{/canloginbyemail}}
275
                    </label>
276
                    <input type="text" name="username" id="username" {{!
277
                !}}class="form-control form-control--username" {{!
278
                !}}value="{{username}}" {{!
279
                !}}placeholder="{{^canloginbyemail}}{{#cleanstr}}username{{/cleanstr}}{{/canloginbyemail}}{{!
280
                !}}{{#canloginbyemail}}{{#cleanstr}}usernameemail{{/cleanstr}}{{/canloginbyemail}}" {{!
281
                !}}autocomplete="username">
282
                </div>
283
                <div class="form-group my-1 form-control--password-box">
284
                    <label for="password" class="sr-only">{{#str}} password {{/str}}</label>
285
                    <input type="password" name="password" id="password" value="" {{!
286
                !}}class="form-control form-control--password" {{!
287
                !}}placeholder="{{#cleanstr}}password{{/cleanstr}}" {{!
288
                !}}autocomplete="current-password">
289
                    <button class="rui-show-password-btn rui-show-password-btn--hidden border-0" id="togglePassword" tabindex="0" type="button" role="button" aria-checked="false">
290
                        <svg class="showpassword-icon--off" width="24" height="24" fill="none" viewBox="0 0 24 24">
291
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12C19.25 13 17.5 18.25 12 18.25C6.5 18.25 4.75 13 4.75 12C4.75 11 6.5 5.75 12 5.75C17.5 5.75 19.25 11 19.25 12Z"></path>
292
                            <circle cx="12" cy="12" r="2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
293
                        </svg>
294
                        <svg class="showpassword-icon--on" width="24" height="24" fill="none" viewBox="0 0 24 24">
295
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698"></path>
296
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 4.75L4.75 19.25"></path>
297
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409"></path>
298
                        </svg>
299
                    </button>
300
                </div>
301
                {{^hideforgotpassword}}
302
                    <div class="w-100 text-center">
303
                        <a class="rui-login-forgot-btn" href="{{forgotpasswordurl}}">{{#str}}forgotten{{/str}}</a>
304
                    </div>
305
                {{/hideforgotpassword}}
306
                {{{logininfobox}}}
307
                {{#recaptcha}}
308
                    <div class="login-form-recaptcha form-group">
309
                        {{{recaptcha}}}
310
                    </div>
311
                {{/recaptcha}}
312
                <button type="submit" class="btn btn-lg btn-primary btn-block mt-3" id="loginbtn">{{#str}}login{{/str}}</button>
313
            </form>
314
        </div><!-- .rui-login-form -->
315
 
669 ariadna 316
        {{^loginidprovtop}}
317
            {{#hasidentityproviders}}
318
                <hr class="hr-small" />
319
                <div class="rui-potentialidplist login-identityproviders mt-3 text-center">
320
                    <p class="small text-center">{{#str}} potentialidps, auth {{/str}}</p>
321
                    <div class="row no-gutters mt-1">
322
                        {{#identityproviders}}
323
                            <a class="btn btn-secondary login-identityprovider-btn rui-potentialidp w-100 mt-1" href="{{url}}">
324
                                {{#iconurl}}
325
                                    <img src="{{iconurl}}" alt="" width="24" height="24"/>
326
                                {{/iconurl}}
327
                                {{name}}
328
                            </a>
329
                        {{/identityproviders}}
330
                    </div>
331
                </div>
332
            {{/hasidentityproviders}}
333
        {{/loginidprovtop}}
334
 
335
        <div class="rui-login-additional-btns">
336
            {{#canloginasguest}}
337
            <hr class="hr-small" />
338
                <div class="rui-canloginasguest mt-2" title="{{#str}}someallowguest{{/str}}">
339
                    <p class="small text-center">{{#str}}someallowguest{{/str}}</p>
340
                    <form action="{{loginurl}}" method="post" id="guestlogin">
341
                        <input type="hidden" name="logintoken" value="{{logintoken}}">
342
                        <input type="hidden" name="username" value="guest" />
343
                        <input type="hidden" name="password" value="guest" />
344
                        <button class="btn btn-sm btn-outline-secondary w-100" type="submit" id="loginguestbtn">{{#str}}loginguest{{/str}}</button>
345
                    </form>
346
                </div>
347
            {{/canloginasguest}}
348
        </div><!-- .rui-additional-btns -->
349
 
350
        {{#cansignup}}
351
            {{^customsignupoutside}}
352
                <div class="rui-login-createaccount my-4 text-center">
353
                    {{#canloginasguest}}<hr class="hr-small" />{{/canloginasguest}}
354
                    <form action="{{signupurl}}" method="get" id="signup">
355
                        {{#stringca}}
356
                            <p class="small">{{{stringca}}}</p>
357
                        {{/stringca}}
358
                        <button type="submit" class="btn btn-info w-100">{{#str}}startsignup{{/str}}</button>
359
                    </form>
360
                </div>
361
            {{/customsignupoutside}}
362
        {{/cansignup}}
363
 
364
        {{#loginhtmlblockbottom}}
365
            <div class="rui-login-bottom-block">
366
                {{{loginhtmlblockbottom}}}
367
            </div>
368
        {{/loginhtmlblockbottom}}
369
 
370
        {{#instructions}}
371
            <div class="rui-hasinstructions-desc alert alert-info">
372
                {{{instructions}}}
373
            </div><!-- .rui-hasinstructions-desc -->
374
        {{/instructions}}
375
 
376
        {{^loginlayoutimg}}
377
            {{#loginhtmlcontent3}}
378
                <div class="rui-login-html-3">
379
                    {{{loginhtmlcontent3}}}
380
                </div>
381
            {{/loginhtmlcontent3}}
382
 
383
            {{#loginfootercontent}}
384
                <div class="rui-login-footer-content text-center mb-2">
385
                    <hr class="hr-small" />
386
                    {{{loginfootercontent}}}
387
                </div>
388
            {{/loginfootercontent}}
389
        {{/loginlayoutimg}}
390
    </div><!-- .rui-login-content -->
391
 
392
</div><!-- .rui-login-box -->
393
 
394
 
395
{{#maintenance}}
396
    <div class="rui-maintenance alert alert-warning wrapper-md my-4 p-5">
397
        <h2>{{#str}}sitemaintenance, core_admin{{/str}}</h2>
398
        <div class="rui-maintenance-desc">
399
            {{{maintenance}}}
400
        </div>
401
    </div>
402
{{/maintenance}}
403
 
404
{{#loginlayoutimg}}
405
    <div class="rui-login-bg-container" style="background-image: url('{{loginbg}}');" alt="{{#str}}messagecontentimage, message{{/str}}">
406
        {{#loginhtmlcontent2}}
407
            <div class="rui-login-additional-content">
408
                {{{loginhtmlcontent2}}}
409
            </div>
410
        {{/loginhtmlcontent2}}
411
    </div>
412
{{/loginlayoutimg}}
413
 
414
{{#loginlayoutimg}}
415
    </div>
416
    </div>
417
{{/loginlayoutimg}}
418
 
419
{{#loginlayoutimg}}
420
    <div class="rui-login-wrapper">
421
        {{#loginhtmlcontent3}}
422
            <div class="rui-login-footer rui-login-footer-content">
423
                {{{loginhtmlcontent3}}}
424
            </div>
425
        {{/loginhtmlcontent3}}
426
 
427
        {{#loginfootercontent}}
428
            <div class="rui-login-footer text-center">
429
                {{{loginfootercontent}}}
430
            </div>
431
        {{/loginfootercontent}}
432
 
433
    </div>
434
{{/loginlayoutimg}}
435
 
436
<button type="button" class="btn btn-xs btn-dark btn--cookie" {{!
437
        }} data-modal="alert" {{!
438
        }} data-modal-title-str='["cookiesenabled", "core"]' {{!
439
        }} data-modal-content-str='["cookiesenabled_help_html", "core"]' {{!
440
        }}>
441
    <svg width="20" height="20" fill="none" viewBox="0 0 24 24">
442
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path>
443
        <circle cx="12" cy="9" r="1" fill="currentColor"></circle>
444
        <circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
445
    </svg>
446
 
447
    <span class="ml-1">{{#str}}cookiesnotice{{/str}}</span></button>
448
 
449
</div><!-- .login layout -->
450
 
451
{{#js}}
452
    {{^error}}
453
        {{#autofocusform}}
454
            var userNameField = document.getElementById('username');
455
            if (userNameField.value.length == 0) {
456
                userNameField.focus();
457
            } else {
458
                document.getElementById('password').focus();
459
            }
460
        {{/autofocusform}}
461
    {{/error}}
462
    {{#error}}
463
        document.getElementById('loginerrormessage').focus();
464
    {{/error}}
465
    require(['core_form/submit'], function(Submit) {
466
        Submit.init("loginbtn");
467
        {{#canloginasguest}}
468
            Submit.init("loginguestbtn");
469
        {{/canloginasguest}}
470
    });
471
{{/js}}
472
<script>
473
    const togglePassword = document.querySelector("#togglePassword");
474
    const password = document.querySelector("#password");
475
 
476
    togglePassword.addEventListener("click", function() {
477
        // toggle the type attribute
478
        const type = password.getAttribute("type") === "password" ? "text" : "password";
479
        password.setAttribute("type", type);
480
 
481
        // toggle the icon
482
        this.classList.toggle("rui-show-password-btn--hidden");
483
    });
484
</script>
485
 
486
{{{logincustomfooterhtml}}}