127 lines
5.3 KiB
HTML
127 lines
5.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Add Account - KTVManager{% endblock %}
|
|
|
|
{% block head_content %}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
|
|
<style>
|
|
/* Hide the spinner by default */
|
|
#loadingSpinner {
|
|
display: none;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block sub_nav %}
|
|
<!-- Sub-navigation for Accounts -->
|
|
<div class="bg-light py-2">
|
|
<div class="container">
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/accounts">List Accounts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/accounts/add">Add Account</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>Add Account</h1>
|
|
<div>
|
|
<form action="/accounts/add" method="POST" onsubmit="showLoading()">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" class="form-control" id="username" name="username" value="{{ username }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="text" class="form-control" id="password" name="password" value="{{ password }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="stream">Stream Name</label>
|
|
<input type="text" class="form-control" id="stream" name="stream" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="submitButton">
|
|
<span class="spinner-border spinner-border-sm" id="loadingSpinner" role="status" aria-hidden="true"></span>
|
|
<span id="buttonText">Add Account</span>
|
|
</button>
|
|
</form>
|
|
{% if text_input_enabled %}
|
|
<hr>
|
|
<h2>Load Details Via Text</h2>
|
|
<div class="form-group">
|
|
<label for="accountDetails">Paste Account Details</label>
|
|
<textarea class="form-control" id="accountDetails" rows="4" data-shared-text="{{ shared_text }}"></textarea>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
|
|
<script>
|
|
function showLoading() {
|
|
document.getElementById("submitButton").disabled = true;
|
|
document.getElementById("loadingSpinner").style.display = "inline-block";
|
|
document.getElementById("buttonText").textContent = "Working...";
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var streamInput = document.getElementById("stream");
|
|
var awesomplete;
|
|
fetch('/get_stream_names')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
awesomplete = new Awesomplete(streamInput, {
|
|
list: data
|
|
});
|
|
|
|
streamInput.addEventListener('awesomplete-selectcomplete', function(event) {
|
|
this.value = event.text.value;
|
|
});
|
|
|
|
const accountDetailsTextarea = document.getElementById('accountDetails');
|
|
if (accountDetailsTextarea) {
|
|
accountDetailsTextarea.addEventListener('input', function() {
|
|
const text = this.value;
|
|
const lines = text.split('\n');
|
|
|
|
const streamName = lines[0] ? lines[0].trim() : '';
|
|
const usernameLine = lines.find(line => line.toUpperCase().startsWith('USER:'));
|
|
const passwordLine = lines.find(line => line.toUpperCase().startsWith('PASS:'));
|
|
|
|
if (usernameLine) {
|
|
document.getElementById('username').value = usernameLine.substring(5).trim();
|
|
}
|
|
if (passwordLine) {
|
|
document.getElementById('password').value = passwordLine.substring(5).trim();
|
|
}
|
|
|
|
if (streamName) {
|
|
streamInput.value = streamName;
|
|
awesomplete.evaluate();
|
|
if (awesomplete.ul.children.length > 0) {
|
|
awesomplete.goto(0);
|
|
awesomplete.select();
|
|
}
|
|
}
|
|
});
|
|
|
|
const sharedText = accountDetailsTextarea.dataset.sharedText;
|
|
|
|
if (sharedText && sharedText !== 'None') {
|
|
accountDetailsTextarea.value = sharedText;
|
|
const event = new Event('input', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
});
|
|
accountDetailsTextarea.dispatchEvent(event);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|