mirror of
https://github.com/hrfee/jellyfin-accounts.git
synced 2024-12-23 01:20:12 +00:00
201 lines
11 KiB
HTML
201 lines
11 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">
|
|
<button type="submit" class="btn btn-outline-primary" id="submitButton">
|
|
<span id="createAccount">Create Account</span>
|
|
</button>
|
|
</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);
|
|
};
|
|
}
|
|
});
|
|
function toggleSpinner () {
|
|
var submitButton = document.getElementById('submitButton');
|
|
var oldSpan = document.getElementById('createAccount');
|
|
var newSpan = document.createElement('span');
|
|
newSpan.id = 'createAccount';
|
|
if (document.getElementById('createAccountSpinner')) {
|
|
newSpan.appendChild(document.createTextNode('Create Account'));
|
|
submitButton.disabled = false;
|
|
} else {
|
|
var spinner = document.createElement('span');
|
|
spinner.id = 'createAccountSpinner';
|
|
spinner.classList.add('spinner-border', 'spinner-border-sm');
|
|
spinner.setAttribute('role', 'status');
|
|
spinner.setAttribute('aria-hidden', 'true');
|
|
var text = document.createTextNode(' Creating...');
|
|
newSpan.appendChild(spinner);
|
|
newSpan.appendChild(text);
|
|
submitButton.disabled = true;
|
|
}
|
|
submitButton.replaceChild(newSpan, oldSpan);
|
|
};
|
|
$("form").submit(function() {
|
|
toggleSpinner();
|
|
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){
|
|
toggleSpinner();
|
|
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>
|