mirror of
https://github.com/hrfee/jellyfin-accounts.git
synced 2024-12-22 17:10:11 +00:00
Harvey Tindall
ade935da4e
Now uses a customized bootstrap that looks something like Jellyfin. Some small ui changes were needed. This be overridden by downloading bs5's css and using the custom_css option if you don't like it. sass file is included for your own modification. Changes made to master have been added also.
191 lines
10 KiB
HTML
191 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">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" type="text/css" href="{{ css_file }}">
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
.pageContainer {
|
|
margin: 5% 20% 5% 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">
|
|
<div class="card mb-3">
|
|
<div class="card-header">Details</div>
|
|
<div class="card-body">
|
|
<form action="#" method="POST" id="accountForm">
|
|
<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" style="margin-top: 1rem;">
|
|
<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 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 src="serialize.js"></script>
|
|
<script>
|
|
var successBox = new bootstrap.Modal(document.getElementById('successBox'));
|
|
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);
|
|
};
|
|
document.getElementById('accountForm').onsubmit = function() {
|
|
toggleSpinner();
|
|
var send = serializeForm('accountForm');
|
|
send['code'] = code;
|
|
{% if not username %}
|
|
send['email'] = send['username'];
|
|
{% endif %}
|
|
send = JSON.stringify(send);
|
|
var req = new XMLHttpRequest();
|
|
req.open("POST", "/newUser", true);
|
|
req.responseType = 'json';
|
|
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
|
req.onreadystatechange = function() {
|
|
if (this.readyState == 4) {
|
|
toggleSpinner();
|
|
var data = this.response;
|
|
if ('error' in data) {
|
|
var text = document.createTextNode(data['error']);
|
|
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.show();
|
|
};
|
|
};
|
|
};
|
|
};
|
|
req.send(send);
|
|
return false;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|