121 lines
5.2 KiB
HTML
121 lines
5.2 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}添加用户 - 图书管理系统{% endblock %}
|
||
|
||
{% block head %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/user-form.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="user-form-container">
|
||
<div class="page-header">
|
||
<h1>添加用户</h1>
|
||
<div class="actions">
|
||
<a href="{{ url_for('user.user_list') }}" class="btn btn-secondary">
|
||
<i class="fas fa-arrow-left"></i> 返回用户列表
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-card">
|
||
<form id="addUserForm" method="POST" action="{{ url_for('user.add_user') }}">
|
||
{% if error %}
|
||
<div class="alert alert-danger">{{ error }}</div>
|
||
{% endif %}
|
||
|
||
<div class="form-group required">
|
||
<label for="username">用户名</label>
|
||
<input type="text" id="username" name="username" class="form-control" required
|
||
placeholder="请输入用户名（3-20个字符）" minlength="3" maxlength="20">
|
||
<small class="form-text text-muted">用户名将用于登录，不可重复</small>
|
||
</div>
|
||
|
||
<div class="form-group required">
|
||
<label for="password">密码</label>
|
||
<div class="password-field">
|
||
<input type="password" id="password" name="password" class="form-control" required
|
||
placeholder="请输入密码（至少6位）" minlength="6">
|
||
<button type="button" class="toggle-password">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
<small class="form-text text-muted">密码至少包含6个字符</small>
|
||
</div>
|
||
|
||
<div class="form-group required">
|
||
<label for="confirm_password">确认密码</label>
|
||
<div class="password-field">
|
||
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required
|
||
placeholder="请再次输入密码" minlength="6">
|
||
<button type="button" class="toggle-password">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
<small id="password-match-message" class="form-text"></small>
|
||
</div>
|
||
|
||
<div class="form-group required">
|
||
<label for="email">电子邮箱</label>
|
||
<div class="input-with-button">
|
||
<input type="email" id="email" name="email" class="form-control" required
|
||
placeholder="请输入有效的电子邮箱">
|
||
<button type="button" id="sendVerificationCode" class="btn btn-outline-primary">
|
||
发送验证码
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group required">
|
||
<label for="verification_code">验证码</label>
|
||
<input type="text" id="verification_code" name="verification_code" class="form-control" required
|
||
placeholder="请输入邮箱验证码" maxlength="6">
|
||
<small class="form-text text-muted">请输入发送到邮箱的6位验证码</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="nickname">昵称</label>
|
||
<input type="text" id="nickname" name="nickname" class="form-control"
|
||
placeholder="请输入昵称（选填）" maxlength="64">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="phone">手机号码</label>
|
||
<input type="tel" id="phone" name="phone" class="form-control"
|
||
placeholder="请输入手机号码（选填）" maxlength="20">
|
||
</div>
|
||
|
||
<div class="form-group required">
|
||
<label for="role_id">用户角色</label>
|
||
<select id="role_id" name="role_id" class="form-control" required>
|
||
{% for role in roles %}
|
||
<option value="{{ role.id }}">{{ role.role_name }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<small class="form-text text-muted">默认为普通用户，请根据需要选择合适的角色</small>
|
||
</div>
|
||
|
||
<div class="form-group required">
|
||
<label for="status">账号状态</label>
|
||
<select id="status" name="status" class="form-control" required>
|
||
<option value="1" selected>正常</option>
|
||
<option value="0">禁用</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="fas fa-save"></i> 保存用户
|
||
</button>
|
||
<button type="reset" class="btn btn-secondary">
|
||
<i class="fas fa-undo"></i> 重置表单
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/user-add.js') }}"></script>
|
||
{% endblock %}
|