MDL-69453 core_form: improve form UI icons and alignment
[moodle.git] / lib / form / templates / element-passwordunmask.mustache
CommitLineData
ca25005c
AN
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_form/element-passwordunmask
19
20 Moodle passwordunmask form element template.
21
22 The purpose of this template is to render a passwordunmask form element.
23
24 Classes required for JS:
25 * none
26
27 Data attributes required for JS:
28 * none
29
30 Context variables required for this template:
31 * element
32 * id
33 * name
34 * value
35 * size
36
37 Example context (json):
38 {
39 "element": {
40 "id": "example_password_unmask",
41 "name": "example",
42 "value": "Password1!",
43 "size": 40
44 }
45 }
46
47}}
48{{< core_form/element-template }}
49 {{$ element }}
50 <span data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
dfa707c9
RT
51 <span data-passwordunmask="editor">
52 <input type="hidden"
3778a922
AN
53 {{# element.frozen }}readonly{{/ element.frozen }}
54 {{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
55 id="{{ element.id }}"
56 value="{{ element.value }}"
3ec69c2e 57 class="form-control d-inline-block {{# error }}is-invalid{{/ error }}"
dfa707c9 58 data-size="{{ element.size }}"
3778a922 59 {{# error }}
521989ec 60 autofocus aria-describedby="{{ element.iderror }}"
3778a922
AN
61 {{/ error }}
62 {{{ attributes }}}
63 >
dfa707c9
RT
64 </span>
65 {{^ element.frozen }}
4d181caf 66 <a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">
dfa707c9
RT
67 {{/ element.frozen }}
68 <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
69 {{^ element.frozen }}
70 {{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
71 </a>
72 {{/ element.frozen }}
73 <a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
74 {{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
75 </a>
76 <span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
77 {{^ element.frozen }}
78 {{# str }} passwordunmaskinstructions, form {{/ str }}
79 {{/ element.frozen }}
80 </span>
ca25005c
AN
81 </span>
82 {{/ element }}
83{{/ core_form/element-template }}
2c3a6e24 84{{#js}}
ca25005c
AN
85require(['core_form/passwordunmask'], function(PasswordUnmask) {
86 new PasswordUnmask("{{ element.id }}");
2c3a6e24 87});
ca25005c 88{{/ js }}