{{ define "title"}}
个人资料
{{ end }}

{{ define "top_css"}}
{{ end }}

{{ define "username"}}
{{ .username }}
{{ end }}

{{ define "page_title"}}
个人资料
{{ end }}

{{ define "page_content"}}
<section class="content">
    <div class="container-fluid">
        <!-- <h5 class="mt-4 mb-2">Global Settings</h5> -->
        <div class="row">
            <!-- left column -->
            <div class="col-md-6">
                {{if eq .authMethod "github"}}
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title">身份信息</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="form-group">
                            <label class="control-label">用户名</label>
                            <input type="text" class="form-control" value="" id="username" readonly>
                        </div>
                        <div class="form-group">
                            <label class="control-label">显示名称</label>
                            <input type="text" class="form-control" value="" id="display_name" readonly>
                        </div>
                        <div class="form-group">
                            <label class="control-label">认证来源</label>
                            <input type="text" class="form-control" value="GitHub" id="auth_source" readonly>
                        </div>
                        <div class="form-group">
                            <label class="control-label">角色</label>
                            <input type="text" class="form-control" value="" id="role" readonly>
                        </div>
                    </div>
                </div>
                {{else}}
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title">更新用户信息</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form role="form" id="frm_profile" name="frm_profile">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="username" class="control-label">用户名</label>
                                <input type="text" class="form-control" name="username" id="username"
                                       value="">
                            </div>
                            <div class="form-group">
                                <label for="password" class="control-label">密码</label>
                                <input type="password" class="form-control" name="password" id="password"
                                       value="" placeholder="留空则不修改密码">
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-success" id="update">更新</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
                {{end}}
            </div>
        </div>
        <!-- /.row -->
    </div>
</section>
{{ end }}

{{ define "bottom_js"}}
<script>
    {
        var previous_username;
        var admin;
    }
    $(document).ready(function () {
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/api/user/{{.baseData.CurrentUser}}',
            dataType: 'json',
            contentType: "application/json",
            success: function (resp) {
                const user = resp;
                $("#username").val(user.username);
                previous_username = user.username;
                admin = user.admin;
                {{if eq .authMethod "github"}}
                $("#display_name").val(user.display_name || user.username);
                $("#role").val(user.admin ? '管理员' : '普通用户');
                {{end}}
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    });
</script>

{{if not (eq .authMethod "github")}}
<script>
    function updateUserInfo() {
        const username = $("#username").val();
        const password = $("#password").val();
        const data = {"username": username, "password": password, "previous_username": previous_username, "admin":admin};
        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/update-user',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (data) {
                toastr.success("已成功更新用户信息");
                location.reload();
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    }

    $(document).ready(function () {
        $.validator.setDefaults({
            submitHandler: function () {
                updateUserInfo();
            }
        });
        $("#frm_profile").validate({
            rules: {
                username: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: "请输入用户名",
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
{{end}}
{{ end }}