lib/templates/loginform.mustache

   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     * info - Info notification to display,
  30     * forgotpasswordurl - Forgot password url,
  31     * hasidentityproviders - Flag, set to true to hide identity providers,
  32     * hasinstructions - Flag, set to true to show instructions,
  33     * identityproviders - List of identiy providers,
  34     * instructions - Instructions,
  35     * instructionsformat - Format of instructions,
  36     * loginurl - Login url,
  37     * signupurl - Signup url,
  38     * errorformatted - Formatted error,
  39     * logourl - Flag, logo url,
  40     * sitename - Name of site.,
  41     * logintoken - Random token to protect login request.,
  42     * maintenance - Maintenance message
  43
  44     Example context (json):
  45     {
  46         "autofocusform": false,
  47         "canloginasguest": "1",
  48         "canloginbyemail": false,
  49         "cansignup": true,
  50         "cookieshelpicon": {
  51             "heading": "Cookies must be enabled in your browser",
  52             "text": "<div class=\"no-overflow\">Two cookies are used on this site. Both died..</div>",
  53             "icon": {
  54                 "attributes": [
  55                     {
  56                         "name": "class",
  57                         "value": "iconhelp"
  58                     },
  59                     {
  60                         "name": "alt",
  61                         "value": "Help with Cookies must be enabled in your browser"
  62                     },
  63                     {
  64                         "name": "title",
  65                         "value": "Help with Cookies must be enabled in your browser"
  66                     },
  67                     {
  68                         "name": "src",
  69                         "value": "http://localhost/stable_master/theme/image.php?theme=boost&component=core&image=help"
  70                     }
  71                 ]
  72             },
  73             "linktext": null,
  74             "title": "Help with Cookies must be enabled in your browser",
  75             "url": "http://localhost/stable_master/help.php?component=core&identifier=cookiesenabled&lang=en",
  76             "ltr": true
  77         },
  78         "error": "",
  79         "info": "",
  80         "forgotpasswordurl": "http://localhost/stable_master/login/forgot_password.php",
  81         "hasidentityproviders": false,
  82         "hasinstructions": true,
  83         "identityproviders": [],
  84         "instructions": "For full access to this site, you first need to create an account.",
  85         "instructionsformat": "1",
  86         "loginurl": "http://localhost/stable_master/login/index.php",
  87         "signupurl": "http://localhost/stable_master/login/signup.php",
  88         "cookieshelpiconformatted": "",
  89         "errorformatted": "",
  90         "logourl": false,
  91         "sitename": "Beer & Chips",
  92         "logintoken": "randomstring",
  93         "maintenance": "For full access to this site, you need to login in as an admin.",
  94         "languagemenu": "Choose language",
  95         "togglepassword": true,
  96         "smallscreensonly": true
  97     }
  98 }}
  99
 100 <div class="loginform">
 101     {{#logourl}}
 102         <div id="loginlogo" class="login-logo">
 103             <img id="logoimage" src="{{logourl}}" class="img-fluid" alt="{{sitename}}"/>
 104             <h1 class="login-heading sr-only">{{#str}} loginto, core, {{sitename}} {{/str}}</h1>
 105         </div>
 106     {{/logourl}}
 107     {{^logourl}}
 108         <h1 class="login-heading mb-4">{{#str}} loginto, core, {{sitename}} {{/str}}</h1>
 109     {{/logourl}}
 110     {{#maintenance}}
 111         <div class="alert alert-danger login-maintenance">
 112             {{{maintenance}}}
 113         </div>
 114     {{/maintenance}}
 115     {{#error}}
 116         <a href="#" id="loginerrormessage" class="sr-only">{{error}}</a>
 117         <div class="alert alert-danger" role="alert">{{error}}</div>
 118     {{/error}}
 119     {{#info}}
 120         <a href="#" id="logininfomessage" class="sr-only">{{info}}</a>
 121         <div class="alert alert-info" role="alert">{{info}}</div>
 122     {{/info}}
 123     {{#cansignup}}
 124         <a href="{{signupurl}}" class="sr-only">{{#str}} tocreatenewaccount {{/str}}</a>
 125     {{/cansignup}}
 126     <form class="login-form" action="{{loginurl}}" method="post" id="login">
 127         <input id="anchor" type="hidden" name="anchor" value="">
 128         <script>document.getElementById('anchor').value = location.hash;</script>
 129         <input type="hidden" name="logintoken" value="{{logintoken}}">
 130         <div class="login-form-username mb-3">
 131             <label for="username" class="sr-only">
 132                 {{^canloginbyemail}}
 133                     {{#str}} username {{/str}}
 134                 {{/canloginbyemail}}
 135                 {{#canloginbyemail}}
 136                     {{#str}} usernameemail {{/str}}
 137                 {{/canloginbyemail}}
 138             </label>
 139             <input type="text" name="username" id="username" {{!
 140                 !}}class="form-control form-control-lg" {{!
 141                 !}}value="{{username}}" {{!
 142                 !}}placeholder="{{^canloginbyemail}}{{#cleanstr}}username{{/cleanstr}}{{/canloginbyemail}}{{!
 143                 !}}{{#canloginbyemail}}{{#cleanstr}}usernameemail{{/cleanstr}}{{/canloginbyemail}}" {{!
 144                 !}}autocomplete="username">
 145         </div>
 146         <div class="login-form-password mb-3">
 147             <label for="password" class="sr-only">{{#str}} password {{/str}}</label>
 148             <input type="password" name="password" id="password" value="" {{!
 149                 !}}class="form-control form-control-lg" {{!
 150                 !}}placeholder="{{#cleanstr}}password{{/cleanstr}}" {{!
 151                 !}}autocomplete="current-password">
 152         </div>
 153         {{#recaptcha}}
 154             <div class="login-form-recaptcha mb-3">
 155                 {{{recaptcha}}}
 156             </div>
 157         {{/recaptcha}}
 158         <div class="login-form-submit mb-3">
 159             <button class="btn btn-primary btn-lg" type="submit" id="loginbtn">{{#str}}login{{/str}}</button>
 160         </div>
 161         <div class="login-form-forgotpassword mb-3">
 162             <a href="{{forgotpasswordurl}}">{{#str}}forgotaccount{{/str}}</a>
 163         </div>
 164     </form>
 165     {{#hasidentityproviders}}
 166         <div class="login-divider"></div>
 167         <div class="login-identityproviders">
 168             <h2 class="login-heading">{{#str}} potentialidps, auth {{/str}}</h2>
 169             {{#identityproviders}}
 170                 <a class="btn login-identityprovider-btn btn-block" href="{{url}}">
 171                     {{#iconurl}}
 172                         <img src="{{iconurl}}" alt="" width="24" height="24"/>
 173                     {{/iconurl}}
 174                     {{name}}
 175                 </a>
 176             {{/identityproviders}}
 177         </div>
 178     {{/hasidentityproviders}}
 179     {{#hasinstructions}}
 180         <div class="login-divider"></div>
 181         <div class="login-instructions {{#cansignup}}mb-3{{/cansignup}}">
 182             <h2 class="login-heading">{{#str}}firsttime{{/str}}</h2>
 183             {{{instructions}}}
 184         </div>
 185     {{/hasinstructions}}
 186     {{#cansignup}}
 187         <div class="login-signup">
 188             <a class="btn btn-secondary" href="{{signupurl}}">{{#str}}startsignup{{/str}}</a>
 189         </div>
 190     {{/cansignup}}
 191     {{#canloginasguest}}
 192         <div class="login-divider"></div>
 193         <h2 class="login-heading">{{#str}}someallowguest{{/str}}</h2>
 194         <form action="{{loginurl}}" method="post" id="guestlogin">
 195             <input type="hidden" name="logintoken" value="{{logintoken}}">
 196             <input type="hidden" name="username" value="guest" />
 197             <input type="hidden" name="password" value="guest" />
 198             <button class="btn btn-secondary" type="submit" id="loginguestbtn">{{#str}}loginguest{{/str}}</button>
 199         </form>
 200     {{/canloginasguest}}
 201     <div class="login-divider"></div>
 202     <div class="d-flex">
 203         {{#languagemenu}}
 204             <div class="login-languagemenu">
 205                 {{>core/action_menu}}
 206             </div>
 207             <div class="divider border-left align-self-center mx-3"></div>
 208         {{/languagemenu}}
 209         <button type="button" class="btn btn-secondary" {{!
 210         }} data-modal="alert"{{!
 211         }} data-modal-title-str='["cookiesenabled", "core"]' {{!
 212         }} data-modal-content-str='["cookiesenabled_help_html", "core"]'{{!
 213         }}>{{#str}}cookiesnotice{{/str}}</button>
 214     </div>
 215 </div>
 216
 217 {{#js}}
 218     {{^error}}
 219         {{#autofocusform}}
 220             require(['core_form/events'], function(FormEvent) {
 221                 function autoFocus() {
 222                     const userNameField = document.getElementById('username');
 223                     if (userNameField.value.length == 0) {
 224                         userNameField.focus();
 225                     } else {
 226                         document.getElementById('password').focus();
 227                     }
 228                 }
 229                 autoFocus();
 230                 window.addEventListener(FormEvent.eventTypes.fieldStructureChanged, autoFocus);
 231             });
 232         {{/autofocusform}}
 233     {{/error}}
 234     {{#error}}
 235         document.getElementById('loginerrormessage').focus();
 236     {{/error}}
 237     {{#togglepassword}}
 238         require(['core/togglesensitive'], function(ToggleSensitive) {
 239             ToggleSensitive.init("password", {{smallscreensonly}});
 240         });
 241     {{/togglepassword}}
 242     require(['core_form/submit'], function(Submit) {
 243         Submit.init("loginbtn");
 244         {{#canloginasguest}}
 245             Submit.init("loginguestbtn");
 246         {{/canloginasguest}}
 247     });
 248 {{/js}}