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     * 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     * rememberusername - Remeber username?,
  37     * signupurl - Signup url,
  38     * cookieshelpiconformatted - Formatted html of cookies help icon,
  39     * errorformatted - Formatted error,
  40     * logourl - Flag, logo url,
  41     * sitename - Name of site.,
  42     * logintoken - Random token to protect login request.,
  43     * maintenance - Maintenance message
  44
  45     Example context (json):
  46     {
  47         "autofocusform": false,
  48         "canloginasguest": "1",
  49         "canloginbyemail": false,
  50         "cansignup": true,
  51         "cookieshelpicon": {
  52             "heading": "Cookies must be enabled in your browser",
  53             "text": "<div class=\"no-overflow\">Two cookies are used on this site. Both died..</div>",
  54             "icon": {
  55                 "attributes": [
  56                     {
  57                         "name": "class",
  58                         "value": "iconhelp"
  59                     },
  60                     {
  61                         "name": "alt",
  62                         "value": "Help with Cookies must be enabled in your browser"
  63                     },
  64                     {
  65                         "name": "title",
  66                         "value": "Help with Cookies must be enabled in your browser"
  67                     },
  68                     {
  69                         "name": "src",
  70                         "value": "http://localhost/stable_master/theme/image.php?theme=boost&component=core&image=help"
  71                     }
  72                 ]
  73             },
  74             "linktext": null,
  75             "title": "Help with Cookies must be enabled in your browser",
  76             "url": "http://localhost/stable_master/help.php?component=core&identifier=cookiesenabled&lang=en",
  77             "ltr": true
  78         },
  79         "error": "",
  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         "rememberusername": true,
  88         "signupurl": "http://localhost/stable_master/login/signup.php",
  89         "cookieshelpiconformatted": "",
  90         "errorformatted": "",
  91         "logourl": false,
  92         "sitename": "Beer & Chips",
  93         "logintoken": "randomstring",
  94         "maintenance": "For full access to this site, you need to login in as an admin."
  95     }
  96 }}
  97
  98 <div class="my-1 my-sm-5"></div>
  99 <div class="row justify-content-center">
 100 <div class="col-xl-6 col-sm-8 ">
 101 <div class="card">
 102     <div class="card-block">
 103         {{#logourl}}
 104             <h1 class="h2 card-header text-center" >
 105                 <span class="sr-only">{{sitename}}: {{#str}} login {{/str}}</span>
 106                 <img src="{{logourl}}" class="img-fluid" alt=""/>
 107             </h1>
 108         {{/logourl}}
 109         {{^logourl}}
 110             <h1 class="h2 card-header text-center" aria-label="{{sitename}}: {{#str}} login {{/str}}">{{sitename}}</h1>
 111         {{/logourl}}
 112         <div class="card-body">
 113             {{#cansignup}}
 114                 <div class="sr-only">
 115                     <a href="{{signupurl}}">{{#str}} tocreatenewaccount {{/str}}</a>
 116                 </div>
 117             {{/cansignup}}
 118
 119             {{#error}}
 120                 <div class="loginerrors mt-3">
 121                     <a href="#" id="loginerrormessage" class="accesshide">{{error}}</a>
 122                     <div class="alert alert-danger" role="alert" data-aria-autofocus="true">{{error}}</div>
 123                 </div>
 124             {{/error}}
 125
 126             <div class="row justify-content-md-center">
 127                 <div class="col-md-5">
 128                     <form class="mt-3" action="{{loginurl}}" method="post" id="login">
 129                         <input id="anchor" type="hidden" name="anchor" value="">
 130                         <script>document.getElementById('anchor').value = location.hash;</script>
 131                         <input type="hidden" name="logintoken" value="{{logintoken}}">
 132                         <div class="form-group">
 133                             <label for="username" class="sr-only">
 134                                 {{^canloginbyemail}}
 135                                     {{#str}} username {{/str}}
 136                                 {{/canloginbyemail}}
 137                                 {{#canloginbyemail}}
 138                                     {{#str}} usernameemail {{/str}}
 139                                 {{/canloginbyemail}}
 140                             </label>
 141                             <input type="text" name="username" id="username"
 142                                 class="form-control"
 143                                 value="{{username}}"
 144                                 placeholder="{{^canloginbyemail}}{{#cleanstr}}username{{/cleanstr}}{{/canloginbyemail}}{{#canloginbyemail}}{{#cleanstr}}usernameemail{{/cleanstr}}{{/canloginbyemail}}"
 145                                 autocomplete="username">
 146                         </div>
 147                         <div class="form-group">
 148                             <label for="password" class="sr-only">{{#str}} password {{/str}}</label>
 149                             <input type="password" name="password" id="password" value=""
 150                                 class="form-control"
 151                                 placeholder="{{#cleanstr}}password{{/cleanstr}}"
 152                                 autocomplete="current-password">
 153                         </div>
 154                         {{#rememberusername}}
 155                             <div class="rememberpass mt-3">
 156                                 <input type="checkbox" name="rememberusername" id="rememberusername" value="1" {{#username}}checked="checked"{{/username}} />
 157                                 <label for="rememberusername">{{#str}} rememberusername, admin {{/str}}</label>
 158                             </div>
 159                         {{/rememberusername}}
 160
 161                         <button type="submit" class="btn btn-primary btn-block mt-3" id="loginbtn">{{#str}}login{{/str}}</button>
 162                     </form>
 163                 </div>
 164
 165                 <div class="col-md-5">
 166                     <div class="forgetpass mt-3">
 167                         <p><a href="{{forgotpasswordurl}}">{{#str}}forgotten{{/str}}</a></p>
 168                     </div>
 169
 170                     <div class="mt-3">
 171                         {{#str}} cookiesenabled {{/str}}
 172                         {{{cookieshelpiconformatted}}}
 173                     </div>
 174                     {{#canloginasguest}}
 175                         <div class="mt-2">
 176                             <p>{{#str}}someallowguest{{/str}}</p>
 177                             <form action="{{loginurl}}" method="post" id="guestlogin">
 178                                 <input type="hidden" name="logintoken" value="{{logintoken}}">
 179                                 <input type="hidden" name="username" value="guest" />
 180                                 <input type="hidden" name="password" value="guest" />
 181                                 <button class="btn btn-secondary btn-block" type="submit" id="loginguestbtn">{{#str}}loginguest{{/str}}</button>
 182                             </form>
 183                         </div>
 184                     {{/canloginasguest}}
 185
 186                 {{#hasidentityproviders}}
 187                     <h2 class="h6 mt-2">{{#str}} potentialidps, auth {{/str}}</h2>
 188                     <div class="potentialidplist mt-3">
 189                         {{#identityproviders}}
 190                             <div class="potentialidp">
 191                                 <a href="{{url}}" title="{{name}}" class="btn btn-secondary btn-block">
 192                                     {{#iconurl}}
 193                                         <img src="{{iconurl}}" alt="" width="24" height="24"/>
 194                                     {{/iconurl}}
 195                                     {{name}}
 196                                 </a>
 197                             </div>
 198                         {{/identityproviders}}
 199                     </div>
 200                 {{/hasidentityproviders}}
 201                 </div>
 202             </div>
 203         </div>
 204     </div>
 205 </div>
 206 </div>
 207 </div>
 208
 209
 210 {{#hasinstructions}}
 211 <div class="row justify-content-center mt-3">
 212 <div class="col-xl-6 col-sm-8">
 213 <div class="card">
 214     <div class="card-body">
 215         <div class="card-title">
 216             <h2>{{#str}}firsttime{{/str}}</h2>
 217         </div>
 218         <div>
 219         {{{instructions}}}
 220         {{#cansignup}}
 221             <form class="mt-3" action="{{signupurl}}" method="get" id="signup">
 222                 <button type="submit" class="btn btn-secondary">{{#str}}startsignup{{/str}}</button>
 223             </form>
 224         {{/cansignup}}
 225         </div>
 226     </div>
 227 </div>
 228 </div>
 229 </div>
 230 {{/hasinstructions}}
 231
 232 {{#maintenance}}
 233     <div class="row justify-content-center mt-3">
 234         <div class="col-xl-6 col-sm-8">
 235             <div class="card">
 236                 <div class="card-body">
 237                     <div class="card-title">
 238                         <h2>{{#str}}sitemaintenance, core_admin{{/str}}</h2>
 239                     </div>
 240                     <div>
 241                         {{{maintenance}}}
 242                     </div>
 243                 </div>
 244             </div>
 245         </div>
 246     </div>
 247 {{/maintenance}}
 248 {{#js}}
 249     {{#error}}
 250         require(['jquery'], function($) {
 251             $('#loginerrormessage').focus();
 252         });
 253     {{/error}}
 254     {{^error}}
 255         {{#autofocusform}}
 256             require(['jquery'], function($) {
 257                 if ($('#username').val()) {
 258                     $('#password').focus();
 259                 } else {
 260                     $('#username').focus();
 261                 }
 262             });
 263         {{/autofocusform}}
 264     {{/error}}
 265     require(['core_form/submit'], function(Submit) {
 266         Submit.init("loginbtn");
 267         Submit.init("loginguestbtn");
 268     });
 269 {{/js}}