{% extends 'app_doc/user/user_base.html' %}
{% load static %}
{% block title %}用户Token管理{% endblock %}
{% block content %}
<div class="layui-card">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote layui-quote-nm" style="font-size: 12px;color: #999;">
            借助Token，你可以无需打开MrDoc网站，直接通过更加自动化的方式进行文档编写；配合MrDoc浏览器剪藏扩展，还能将MrDoc化身为便捷的网页内容摘录工具；
            </blockquote>
            <div class="layui-row">
                <form>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Token值</label>
                        <div class="layui-input-inline" style="width:450px;">
                            <input type="text" name="token" id="token" value="{{token}}" autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">操作</label>
                        <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="copy-token" onclick="copyToken()">复制</button>
                        <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" onclick="generaToken()">重新生成Token</button>
                    </div>
                </form>
            </div>
    </div>
</div>
{% endblock %}
{% block custom_script %}
<script>
    layui.use(['table', 'form', 'jquery', 'dtree'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        //复制Token
        copyToken = function(){
            var token_val = document.getElementById("token");
            token_val.select();
            document.execCommand("Copy");
            layer.msg("已复制！")
        };
        //生成Token
        generaToken = function(){
            layer.open({
                type:1,
                title:'重置Token',
                area:'300px;',
                id:'delPro',//配置ID
                content:'<div style="margin:10px;">警告：此操作将重新为你的账户生成Token，旧Token将失效！</div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1);
                    $.post("{% url 'manage_token' %}",function(r){
                        layer.closeAll('loading');
                        if(r.status){
                            //生成成功
                            //window.location.reload();
                            $('#token').val(r.data);
                            layer.close(index)
                            layer.msg("生成成功！",{offset: 't'})
                        }else{
                            //生成失败，提示
                            //console.log(r)
                            layer.close(index)
                            layer.msg(r.data)
                        }
                    })
                },
            });
        };
    })
</script>
{% endblock %}