2018-01-28 14:16:52 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
|
|
|
<title>{{ login.Title }}</title>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap -->
|
2019-04-22 17:43:56 +00:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.3.1/dist/sandstone/bootstrap.min.css"
|
|
|
|
|
integrity="sha256-qgpZ1V8XkWmm9APL5rLtRW+Tyhp+0TPKJm4JMprrSOw=" crossorigin="anonymous">
|
2018-01-28 14:16:52 +00:00
|
|
|
|
|
|
|
|
<style>
|
2019-04-22 17:43:56 +00:00
|
|
|
html, body {
|
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
2018-01-28 14:16:52 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-04-22 17:43:56 +00:00
|
|
|
{% verbatim %}
|
|
|
|
|
<div class="container h-100">
|
2018-01-28 14:16:52 +00:00
|
|
|
|
2019-04-22 17:43:56 +00:00
|
|
|
<div class="row h-100 justify-content-center align-items-center">
|
2018-01-28 14:16:52 +00:00
|
|
|
|
2019-04-22 17:43:56 +00:00
|
|
|
<div>
|
|
|
|
|
<div class="col-12 text-center mb-3">
|
|
|
|
|
<h1>{{ login.title }}</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card" style="width: 30rem;">
|
|
|
|
|
<div class="card-header" v-if="loginMethods.length > 1">
|
|
|
|
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<div class="input-group-prepend">
|
|
|
|
|
<div class="input-group-text">Login with</div>
|
|
|
|
|
</div>
|
|
|
|
|
<select class="form-control" v-model="active_method">
|
|
|
|
|
<option
|
|
|
|
|
:key="method.name"
|
|
|
|
|
:value="method.name"
|
|
|
|
|
v-for="method in loginMethods"
|
|
|
|
|
>
|
|
|
|
|
{{ method.label }}
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
2018-01-28 14:16:52 +00:00
|
|
|
</div>
|
2019-04-22 17:43:56 +00:00
|
|
|
|
|
|
|
|
</div> <!-- ./card-header -->
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
|
|
|
|
<div class="card-text">
|
|
|
|
|
<form action="/login" method="post">
|
|
|
|
|
|
|
|
|
|
<input type="hidden" name="go" :value="go">
|
|
|
|
|
<div
|
|
|
|
|
class="form-group"
|
|
|
|
|
:key="field.name"
|
|
|
|
|
v-for="field in activeFields"
|
|
|
|
|
>
|
|
|
|
|
<label :for="`${active_method}-${field.name}`" v-if="field.label">
|
|
|
|
|
{{ field.label }}
|
|
|
|
|
</label>
|
|
|
|
|
<input
|
|
|
|
|
:class="fieldClasses(field)"
|
|
|
|
|
:onclick="field.action"
|
|
|
|
|
:id="`${active_method}-${field.name}`"
|
|
|
|
|
:name="`${active_method}-${field.name}`"
|
|
|
|
|
:placeholder="field.placeholder"
|
|
|
|
|
:type="field.type"
|
|
|
|
|
:value="field.type == 'button' ? field.placeholder : ''"
|
|
|
|
|
/>
|
2018-01-28 14:16:52 +00:00
|
|
|
</div>
|
|
|
|
|
|
2019-04-22 17:43:56 +00:00
|
|
|
<div class="form-group text-center" v-if="needsLoginButton">
|
|
|
|
|
<button type="submit" class="btn btn-success btn-lg">Login</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2018-01-28 14:16:52 +00:00
|
|
|
|
2019-04-22 17:43:56 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2018-01-28 14:16:52 +00:00
|
|
|
|
|
|
|
|
</div> <!-- /.container -->
|
|
|
|
|
|
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
2019-04-15 23:38:03 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"
|
|
|
|
|
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
|
2018-01-28 14:16:52 +00:00
|
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
2019-04-22 17:43:56 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
|
|
|
|
|
integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"\
|
|
|
|
|
integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
|
2018-01-28 14:16:52 +00:00
|
|
|
|
2019-04-22 17:43:56 +00:00
|
|
|
{% endverbatim %}
|
2018-01-28 14:16:52 +00:00
|
|
|
<script>
|
2019-04-22 17:43:56 +00:00
|
|
|
function sortOrder(i, j) {
|
|
|
|
|
switch (true) {
|
|
|
|
|
case i < j:
|
|
|
|
|
return -1
|
|
|
|
|
case j < i:
|
|
|
|
|
return 1
|
|
|
|
|
default:
|
|
|
|
|
return 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
computed: {
|
|
|
|
|
activeFields() {
|
|
|
|
|
return this.available_methods[this.active_method]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
loginMethods() {
|
|
|
|
|
var res = []
|
|
|
|
|
|
|
|
|
|
for (name in this.available_methods) {
|
|
|
|
|
res.push({
|
|
|
|
|
name,
|
|
|
|
|
label: this.login.names[name],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
res.sort(function(i, j) { return sortOrder(i.name, j.name) })
|
|
|
|
|
|
|
|
|
|
return res
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
needsLoginButton() {
|
|
|
|
|
for (idx in this.activeFields) {
|
|
|
|
|
var field = this.activeFields[idx]
|
|
|
|
|
if (field.type == 'button') {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: {
|
|
|
|
|
active_method: '{{ login.DefaultMethod }}',
|
|
|
|
|
available_methods: {{ active_methods | to_json | safe }},
|
|
|
|
|
go: '{{ go }}',
|
|
|
|
|
login: {{ login | to_json | safe }},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
el: ".container",
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
fieldClasses(field) {
|
|
|
|
|
var classes = ['form-control']
|
|
|
|
|
|
|
|
|
|
if (field.type == 'button') {
|
|
|
|
|
classes.push('btn')
|
|
|
|
|
classes.push('btn-success')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return classes.join(' ')
|
|
|
|
|
}
|
|
|
|
|
},
|
2018-01-28 14:16:52 +00:00
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
