jellyfin-accounts/data/templates/form.html
Harvey Tindall e8ad3f98d6 added option to send invite to an address
The admin page now has the option to send an invite to an email address.
Since there are now two email types (invites and pw resets), the new
sections have been added to config.ini, and email_template and
email_plaintext have been renamed to email_html and email_text
respectively.
2020-04-19 22:35:51 +01:00

176 lines
9.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js" integrity="sha256-E8KRdFk/LTaaCBoQIV/rFNc0s3ICQQiOHFT4Cioifa8=" crossorigin="anonymous"></script>
<style>
.pageContainer {
margin: 20%;
}
@media (max-width: 1100px) {
.pageContainer {
margin: 2%;
}
}
.contactBox {
color: grey;
}
#container {
margin-top: 5%;
margin-bottom: 5%;
}
</style>
<title>Create Jellyfin Account</title>
</head>
<body>
<div class="modal fade" id="successBox" tabindex="-1" role="dialog" aria-labelledby="successBox" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="successTitle">Success!</h5>
</div>
<div class="modal-body" id="successBody">
<p>{{ successMessage }}</p>
</div>
<div class="modal-footer">
<a href="{{ jfLink }}" class="btn btn-primary">Continue</a>
</div>
</div>
</div>
</div>
<div class="pageContainer">
<h1>
Create Account
</h1>
<p>{{ helpMessage }}</p>
<p class="contactBox">{{ contactMessage }}</p>
<div class="container" id="container">
<div class="row" id="cardContainer">
<div class="col-sm" id="accountForm">
<div class="card bg-light mb-3">
<div class="card-header">Details</div>
<div class="card-body">
<form action="#" method="POST">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" value="{{ email }}" required>
</div>
<div class="form-group">
<label for="inputUsername">Username</label>
<input type="username" class="form-control" id="inputUsername" name="username" placeholder="Username" required>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
</div>
<div class="btn-group" role="group" aria-label="Button & Error" id="errorBox">
<input type="submit" class="btn btn-outline-primary" value="Create Account">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var code = window.location.href.split('/').pop();
$.ajax('/getRequirements', {
data : JSON.stringify({ 'code': code }),
contentType : 'application/json',
type : 'POST',
crossDomain : true,
complete : function(response){
var data = response['responseJSON'];
if (Object.keys(data).length > 1) {
var col = document.createElement('div');
col.classList.add('col-sm');
col.id = 'requirementBox';
var card = document.createElement('div');
card.classList.add('card', 'bg-light', 'mb-3', 'requirementBox');
// card.setAttribute('style', 'max-width: 18rem;');
var header = document.createElement('div');
header.classList.add('card-header');
header.appendChild(document.createTextNode('Password Requirements'));
card.appendChild(header);
var body = document.createElement('div');
body.classList.add('card-body');
var listGroup = document.createElement('ul');
listGroup.classList.add('list-group');
listGroup.id = 'requirements';
for (var key in data) {
if (data.hasOwnProperty(key)) {
var criterion = document.createElement('li');
criterion.id = key;
criterion.classList.add('list-group-item', 'list-group-item-danger');
var text = document.createElement('div');
text.appendChild(document.createTextNode(' ' + data[key]));
criterion.appendChild(text);
listGroup.appendChild(criterion);
};
};
body.appendChild(listGroup);
card.appendChild(body);
col.appendChild(card);
document.getElementById('cardContainer').appendChild(col);
};
}
});
$("form").submit(function() {
var send = $("form").serializeObject();
send['code'] = code;
send = JSON.stringify(send);
$.ajax('/newUser', {
data : send,
contentType : 'application/json',
type : 'POST',
crossDomain : true,
complete : function(response){
var data = response['responseJSON'];
if ('error' in data) {
var text = document.createTextNode(data['error']);
// <div class="alert alert-danger" id="errorBox"></div>
var error = document.createElement('button');
error.classList.add('btn', 'btn-outline-danger');
error.setAttribute('disabled', '');
error.appendChild(text);
document.getElementById('errorBox').appendChild(error);
} else {
var valid = true
for (var key in data) {
if (data.hasOwnProperty(key)) {
var criterion = document.getElementById(key);
if (criterion) {
if (data[key] == false) {
valid = false;
if (criterion.classList.contains('list-group-item-success')) {
criterion.classList.remove('list-group-item-success');
criterion.classList.add('list-group-item-danger');
};
} else {
if (criterion.classList.contains('list-group-item-danger')) {
criterion.classList.remove('list-group-item-danger');
criterion.classList.add('list-group-item-success');
};
};
};
};
};
if (valid == true) {
$('#successBox').modal('show');
};
}
}
});
return false;
});
</script>
</body>
</html>