79 lines
3.4 KiB
HTML
79 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}登录信息{% endblock %}
|
|
|
|
{% block content %}
|
|
<h2>🔐 登录信息</h2>
|
|
<form method="post" action="/login">
|
|
<div class="mb-3">
|
|
<label for="user" class="form-label" id="user-label">用户名</label>
|
|
<input type="text" class="form-control" id="user" name="user">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pw" class="form-label" id="pw-label">密码</label>
|
|
<input type="password" class="form-control" id="pw" name="pw">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="token" class="form-label">Token</label>
|
|
<input type="text" class="form-control" id="token" name="token" value="{{ token }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="scheme" class="form-label">协议</label>
|
|
<select class="form-select" id="scheme" name="scheme">
|
|
<option value="http" {% if scheme == 'http' %}selected{% endif %}>http</option>
|
|
<option value="https" {% if scheme == 'https' %}selected{% endif %}>https</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="url" class="form-label">服务器地址</label>
|
|
<input type="text" class="form-control" id="url" name="url" placeholder="127.0.0.1 或 plex.sample.com" value="{{ server_url }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="port" class="form-label">端口</label>
|
|
<input type="text" class="form-control" id="port" name="port" value="{{ port }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="library_name" class="form-label">音乐库</label>
|
|
<select class="form-select" id="library_name" name="library_name" {% if not music_libraries %}disabled{% endif %}>
|
|
{% if music_libraries %}
|
|
{% for library in music_libraries %}
|
|
<option value="{{ library }}" {% if selected_library == library %}selected{% endif %}>{{ library }}</option>
|
|
{% endfor %}
|
|
{% else %}
|
|
<option value="" selected>暂无可用的音乐库</option>
|
|
{% endif %}
|
|
</select>
|
|
<div class="form-text">仅显示音乐类型的库，可在连接成功后自动刷新。</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">连接</button>
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const tokenInput = document.getElementById('token');
|
|
const inputs = [document.getElementById('user'), document.getElementById('pw')];
|
|
const labels = [document.getElementById('user-label'), document.getElementById('pw-label')];
|
|
const fieldClasses = ['bg-body-secondary', 'text-body-secondary', 'text-decoration-line-through'];
|
|
|
|
function toggleCredFields() {
|
|
const inactive = tokenInput.value.trim() !== '';
|
|
inputs.forEach(el => {
|
|
el.readOnly = inactive;
|
|
el.tabIndex = inactive ? -1 : 0;
|
|
el.style.pointerEvents = inactive ? 'none' : '';
|
|
if (inactive && document.activeElement === el) {
|
|
el.blur();
|
|
}
|
|
fieldClasses.forEach(cls => el.classList.toggle(cls, inactive));
|
|
});
|
|
labels.forEach(el => {
|
|
['text-decoration-line-through', 'text-body-secondary'].forEach(cls => el.classList.toggle(cls, inactive));
|
|
});
|
|
}
|
|
|
|
tokenInput.addEventListener('input', toggleCredFields);
|
|
toggleCredFields();
|
|
});
|
|
</script>
|
|
{% endblock %}
|