TEMP_spec_system_noad/templates/user_management.html

{% extends "base.html" %}

{% block title %}帳號管理{% endblock %}

{% block content %}
<h2 class="mb-4">帳號管理</h2>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}

<div class="card mb-4">
  <div class="card-header bg-primary text-white">
    <i class="bi bi-person-plus-fill"></i> 新增帳號
  </div>
  <div class="card-body">
    <form action="{{ url_for('admin.create_user') }}" method="post" class="row g-3">
      <div class="col-md-4">
        <label for="new-username" class="form-label">帳號</label>
        <input type="text" class="form-control" id="new-username" name="username" placeholder="例如：user@example.com" required>
      </div>
      <div class="col-md-3">
        <label for="new-name" class="form-label">姓名</label>
        <input type="text" class="form-control" id="new-name" name="name" required>
      </div>
      <div class="col-md-3">
        <label for="new-password" class="form-label">密碼</label>
        <input type="password" class="form-control" id="new-password" name="password" minlength="6" required>
        <div class="form-text">至少 6 碼。</div>
      </div>
      <div class="col-md-2">
        <label for="new-role" class="form-label">角色</label>
        <select class="form-select" id="new-role" name="role">
          <option value="viewer" selected>檢視 (Viewer)</option>
          <option value="editor">編輯 (Editor)</option>
          <option value="admin">管理 (Admin)</option>
        </select>
      </div>
      <div class="col-12 text-end">
        <button type="submit" class="btn btn-success">
          <i class="bi bi-check-lg"></i> 建立帳號
        </button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-header bg-secondary text-white">
    <i class="bi bi-people-fill"></i> 現有帳號
  </div>
  <div class="card-body">
    {% if users %}
    <div class="table-responsive">
      <table class="table table-striped table-hover align-middle">
        <thead>
          <tr>
            <th>ID</th>
            <th>帳號</th>
            <th>姓名</th>
            <th>角色</th>
            <th>上次登入</th>
            <th>重設密碼</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
          <tr {% if user.id == current_user.id %}class="table-warning"{% endif %}>
            <td>{{ user.id }}</td>
            <td>
              {{ user.username }}
              {% if user.id == current_user.id %}
                <span class="badge bg-info ms-1">目前使用者</span>
              {% endif %}
            </td>
            <td>
              <input type="text" class="form-control form-control-sm" name="name" value="{{ user.name }}" form="update-user-{{ user.id }}" required>
            </td>
            <td>
              <select name="role" class="form-select form-select-sm" form="update-user-{{ user.id }}">
                <option value="viewer" {% if user.role == 'viewer' %}selected{% endif %}>檢視</option>
                <option value="editor" {% if user.role == 'editor' %}selected{% endif %}>編輯</option>
                <option value="admin" {% if user.role == 'admin' %}selected{% endif %}>管理</option>
              </select>
            </td>
            <td>
              {% if user.last_login %}
                {{ user.last_login|taiwan_time('%Y-%m-%d %H:%M') }}
              {% else %}
                <span class="text-muted">從未登入</span>
              {% endif %}
            </td>
            <td>
              <input type="password" class="form-control form-control-sm" name="password" placeholder="留空不變" form="update-user-{{ user.id }}" minlength="6">
            </td>
            <td class="text-nowrap">
              <form id="update-user-{{ user.id }}" action="{{ url_for('admin.update_user', user_id=user.id) }}" method="post" class="d-inline"></form>
              <button type="submit" class="btn btn-outline-primary btn-sm me-1" form="update-user-{{ user.id }}">
                <i class="bi bi-save"></i> 儲存
              </button>
              {% if user.id != current_user.id %}
              <form action="{{ url_for('admin.delete_user', user_id=user.id) }}" method="post" class="d-inline" onsubmit="return confirm('確定要刪除 {{ user.username }} 嗎？此動作無法復原。');">
                <button type="submit" class="btn btn-outline-danger btn-sm">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
              {% else %}
              <button type="button" class="btn btn-outline-secondary btn-sm" disabled title="無法刪除自己的帳號">
                <i class="bi bi-shield-lock"></i>
              </button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="alert alert-info">
      <i class="bi bi-info-circle"></i> 目前尚無帳號紀錄。
    </div>
    {% endif %}
  </div>
</div>

<div class="card mt-4">
  <div class="card-header">
    <i class="bi bi-info-circle"></i> 角色說明
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-4">
        <h6><span class="badge bg-secondary"><i class="bi bi-eye-fill"></i> 檢視 (Viewer)</span></h6>
        <ul class="small mb-0">
          <li>登入系統</li>
          <li>檢視暫規清單</li>
          <li>下載已核准的 PDF 檔案</li>
          <li>查看歷史紀錄</li>
        </ul>
      </div>
      <div class="col-md-4">
        <h6><span class="badge bg-warning text-dark"><i class="bi bi-pencil-fill"></i> 編輯 (Editor)</span></h6>
        <ul class="small mb-0">
          <li>包含 Viewer 權限</li>
          <li>建立暫規申請</li>
          <li>編輯暫規內容</li>
          <li>展延與終止暫規</li>
          <li>下載 Word 編輯檔</li>
        </ul>
      </div>
      <div class="col-md-4">
        <h6><span class="badge bg-danger"><i class="bi bi-shield-fill"></i> 管理 (Admin)</span></h6>
        <ul class="small mb-0">
          <li>包含 Editor 權限</li>
          <li>核准待審暫規</li>
          <li>管理帳號與角色</li>
          <li>刪除暫規</li>
          <li>系統設定維護</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}