mirror of
https://github.com/hrfee/jellyfin-accounts.git
synced 2024-12-23 01:20:12 +00:00
Harvey Tindall
68a459023c
Added option email/no_username to disable username input on form, and instead use the provided email address as the username. Also added missing 'packaging' dep from pevious update.
190 lines
10 KiB
HTML
190 lines
10 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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#603cba">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="stylesheet" href="{{ css_href }}" integrity="{{ css_integrity }}" crossorigin="{{ css_crossorigin }}">
|
|
<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="{% if username %}inputEmail{% else %}inputUsername{% endif %}" name="{% if username %}email{% else %}username{% endif %}" placeholder="Email" value="{{ email }}" required>
|
|
</div>
|
|
{% if username %}
|
|
<div class="form-group">
|
|
<label for="inputUsername">Username</label>
|
|
<input type="username" class="form-control" id="inputUsername" name="username" placeholder="Username" required>
|
|
</div>
|
|
{% endif %}
|
|
<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>
|
|
{% if validate %}
|
|
<div class="col-sm" id="requirementBox">
|
|
<div class="card bg-light mb-3 requirementBox">
|
|
<div class="card-header">Password Requirements</div>
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
{% for key, value in requirements.items() %}
|
|
<li id="{{ key }}" class="list-group-item list-group-item-danger">
|
|
<div> {{ value }}</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var code = window.location.href.split('/').pop();
|
|
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;
|
|
{% if not username %}
|
|
send['email'] = send['username'];
|
|
{% endif %}
|
|
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>
|