-
Notifications
You must be signed in to change notification settings - Fork 150
/
login.xhtml
132 lines (107 loc) · 4.41 KB
/
login.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
template="/passwordless/login-template.xhtml">
<f:metadata>
<f:viewAction action="#{authenticator.prepareAuthenticationForStep}" if="#{not identity.loggedIn}" />
</f:metadata>
<ui:define name="pageTitle">#{msgs['pwdless.pageTitle']}</ui:define>
<ui:define name="maincontent">
<section class="pa4 shadow-4 bg-blank gray mw-20r cust-section">
<h2 class="f3 dark-blue2">#{msgs['casa.login.panel_title']}</h2>
<h:messages class="list dark-red tc pv2 ph0 ma0 f6" />
<div id="panel_list" class="pt4 w5 dn">
<span class="dark-blue2">#{msgs['pwdless.choose']}</span>
<ul id="list" class="list-group f7-cust pv3 pointer">
</ul>
<div align="center" class="pb3">
<a href="javascript:hidelist()" class="f7-cust green hover-green">#{msgs['pwdless.other']}</a>
</div>
</div>
<h:form id="loginForm" class="pt3 w5 dn">
<div class="relative mt4 pb2">
<h:inputText id="username" value="#{credentials.username}" styleClass="focused-text w-100 pb1 dark-gray" />
<label class="focused-label-big">#{msgs['pwdless.username']}</label>
</div>
<div class="mt5 flex justify-end">
<input id="cancel" class="f7-cust bw0 br1 ph4 pv2 bg-orange2 white hover-bg-orange2 hover-white btn cust-misc-button mr2 dn"
onclick="showlist()" type="button" value="#{msgs['casa.cancel']}" />
<h:commandButton class="f7-cust bw0 br1 ph4 pv2 bg-bsgreen-success white hover-bsgreen-success hover-white btn cust-primary-button"
id="loginButton" value="#{msgs['login.login']}" action="#{authenticator.authenticate}" />
</div>
</h:form>
</section>
<script>
//<![CDATA[
let duration = 500
function showlist() {
$("#loginForm").slideUp(duration, function() {
$("#panel_list").slideDown(duration, function() {
})
})
}
function hidelist() {
$("#panel_list").slideUp(duration, function() {
$("#loginForm").slideDown(duration, function() {
})
})
}
function choose(uid) {
var form = document.forms.loginForm
form["loginForm:username"].value = uid
form["loginForm:loginButton"].click()
}
function storedCredsWorkaround() {
//Needed when browser pre-fills usr/pwd due to JSF issue with required attribute (see above)
let user = document.getElementById("loginForm:username")
if ($(user).val()) {
$(user).focus()
$(user).blur()
}
}
//This is needed since JSF does not allow to set required attribute
$(".focused-text").attr("required", "true")
let loginHint = '${identity.getWorkingParameter('loginHint')}'
if (loginHint.length > 0) {
//Populate input text
$("#loginForm\\:username").val(loginHint)
}
let users = '${identity.getWorkingParameter('users')}'
users = (users.length > 0) ? JSON.parse(users) : [ ]
if (users.length > 0) {
//Populate list
let li = ''
for (let user of users) {
div = '<div class="flex justify-between">'
div = div + '<span class="dark-gray">' + user.uid + '</span>'
if (user.displayName.length > 0) {
div = div + '<span>(' + user.displayName + ')</span>'
}
div = div + '</div>'
li = li + '<li class="list-group-item hover-bg-light-gray gray hover-dark-gray pt2" onClick="javascript:choose(\''
li = li + user.uid + '\')">'
li = li + div
li = li + '</li>'
}
$("#list").append(li)
$("#cancel").removeClass("dn")
$("#panel_list").removeClass("dn")
} else {
$("#loginForm").removeClass("dn")
if (loginHint.length == 0) {
storedCredsWorkaround()
}
}
// ]]>
</script>
<!-- Sample markup for list:
<li class="list-group-item hover-bg-light-gray gray hover-dark-gray pt2" onClick="javascript:choose('0')">
<div class="flex justify-between">
<span>Item 1</span>
<span>Your Item 1</span>
</div>
</li>
-->
</ui:define>
</ui:composition>