You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
248 lines
11 KiB
248 lines
11 KiB
{% extends "settings_page.html" %}
|
|
|
|
{% block header_script_files %}
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block settings_pane %}
|
|
|
|
<div id="app">
|
|
<user ref="user" v-bind:user="user"></user>
|
|
<modals v-bind:user="user"></modals>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
|
|
Vue.component('user', {
|
|
props: ['user'],
|
|
template: `
|
|
<div>
|
|
<div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
|
|
<div class="row w-100 m-0 p-3">
|
|
<div class="col-sm-12 col-md-6 text-center text-md-start text-white ">
|
|
<h2>[[ user.username ]]</h2>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 text-center text-md-end">
|
|
{% if current_user.id|int == user_id|int %}
|
|
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#changePasswordModal">Change Password</button>
|
|
{% endif %}
|
|
{% if current_user.role == 'admin' %}
|
|
{% if current_user.id|int != user_id|int %}
|
|
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">Reset Password</button>
|
|
{% endif %}
|
|
{% if user_id|int != 1 %}
|
|
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteUserModal">Delete User</button>
|
|
{% endif %}
|
|
{% endif %}
|
|
<button type="button" class="btn btn-info my-1" data-bs-toggle="modal" data-bs-target="#editUserModal">Edit Account</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-grid w-100 m-0 p-0">
|
|
<div class="row w-100 m-0 p-3">
|
|
<table class="table table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Username</th><td>[[ user.username ]]</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Email</th><td>[[ user.email ]]</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Role</th><td>[[ user.role ]]</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Rating Allowed</th><td>[[ user.age_rating_title.rating_long ]]</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
Vue.component('modals',{
|
|
props: ['user'],
|
|
template: `
|
|
<div>
|
|
{% if current_user.id|int == user_id|int %}
|
|
<div class="modal" id="changePasswordModal" role="dialog" aria-labelledby="changePasswordModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="notesModalTitle">
|
|
Change Password
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form method="POST">
|
|
<div class="modal-body">
|
|
|
|
{{ change_password_form.csrf_token }}
|
|
|
|
<div class="mb-3">
|
|
{{ change_password_form.old_password.label }}
|
|
{{ change_password_form.old_password(type='password', class_='form-control', placeholder=change_password_form.old_password.label.text) }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ change_password_form.new_password.label }}
|
|
{{ change_password_form.new_password(type='password', class_='form-control', placeholder=change_password_form.new_password.label.text) }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ change_password_form.confirm_password.label }}
|
|
{{ change_password_form.confirm_password(type='password', class_='form-control', placeholder=change_password_form.confirm_password.label.text) }}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
{{ change_password_form.update_password_button(class_='btn btn-success') }}
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if current_user.role == 'admin' %}
|
|
{% if current_user.id|int != user_id|int %}
|
|
<div class="modal" id="resetPasswordModal" role="dialog" aria-labelledby="resetPasswordModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="notesModalTitle">
|
|
Change Password
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form method="POST">
|
|
<div class="modal-body">
|
|
|
|
{{ reset_password_form.csrf_token }}
|
|
|
|
<div class="mb-3">
|
|
{{ reset_password_form.password.label }}
|
|
{{ reset_password_form.password(type='password', class_='form-control', placeholder=reset_password_form.password.label.text) }}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
{{ reset_password_form.reset_password_button(class_='btn btn-success') }}
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if user_id|int != 1 %}
|
|
<div class="modal" id="deleteUserModal" role="dialog" aria-labelledby="deleteUserModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="notesModalTitle">
|
|
Delete User
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to delete user [[ user.username ]]?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<form method="POST">
|
|
{{ delete_user_form.csrf_token }}
|
|
{{ delete_user_form.delete_user_button(class_='btn btn-success') }}
|
|
</form>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
<div class="modal" id="editUserModal" role="dialog" aria-labelledby="editUserModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="notesModalTitle">
|
|
Edit User
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form method="POST">
|
|
<div class="modal-body">
|
|
|
|
{{ edit_user_form.csrf_token }}
|
|
|
|
<div class="mb-3">
|
|
{{ edit_user_form.email.label }}
|
|
{{ edit_user_form.email(class_='form-control', placeholder=edit_user_form.email.label.text) }}
|
|
</div>
|
|
{% if current_user.role == 'admin' %}
|
|
<div class="mb-3">
|
|
{{ edit_user_form.role.label }}
|
|
{{ edit_user_form.role(class_='form-control') }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ edit_user_form.age_rating.label }}
|
|
{{ edit_user_form.age_rating(class_='form-control') }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
{{ edit_user_form.edit_user_button(class_='btn btn-success') }}
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
methods: {},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
user: []
|
|
},
|
|
created() {
|
|
this.getUser()
|
|
},
|
|
methods: {
|
|
getUser() {
|
|
console.log('getting user')
|
|
console.log('{{ user_id }}')
|
|
axios.get('{{ url_for('api.api_get_single_user', user_id=user_id) }}')
|
|
.then(res => {
|
|
this.user = res.data.results
|
|
|
|
if(document.getElementById('email')){
|
|
document.getElementById('email').value = res.data.results.email;
|
|
}
|
|
if(document.getElementById('user_id')){
|
|
document.getElementById('user_id').value = res.data.results.id;
|
|
}
|
|
if(document.getElementById('reset_user_id')){
|
|
document.getElementById('reset_user_id').value = res.data.results.id;
|
|
}
|
|
if(document.getElementById('role')){
|
|
document.getElementById('role').value = res.data.results.role;
|
|
}
|
|
if(document.getElementById('age_rating')){
|
|
document.getElementById('age_rating').value = res.data.results.rating_allowed;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
{% endblock %} |