pss/web/docs/pages/sign-in.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Bootstrap 5 Admin &amp; Dashboard Template">
    <meta name="author" content="Bootlab">

    <title>Sign In | AppStack - Admin &amp; Dashboard Template</title>

    <link rel="canonical" href="https://appstack.bootlab.io/pages-sign-in.html"/>
    <link rel="shortcut icon" href="../img/favicon.ico">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <link class="js-stylesheet" href="../css/dark.css" rel="stylesheet">
</head>

<body data-theme="default" data-layout="fluid" data-sidebar-position="left" data-sidebar-behavior="sticky">
<div class="main d-flex justify-content-center w-100">
    <main class="content d-flex p-0">
        <div class="container d-flex flex-column">
            <div class="alert alert-warning alert-dismissible position-fixed" role="alert"
                 style="top: 0; left: 0; right: 0; z-index: 1000;">
                <div class="alert-message d-none align text-center" id="errorAlert"></div>
            </div>
            <div class="row h-100">
                <div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
                    <div class="d-table-cell align-middle">

                        <div class="text-center mt-4">
                            <h1 class="h2">欢迎回来<i class="bi bi-cup-hot"></i></h1>
                            <p class="lead">
                                请登录您的账号
                            </p>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="m-sm-4">
                                    <div class="text-center">
                                        <img src="../img/avatars/avatar.jpg" alt="Chris Wood"
                                             class="img-fluid rounded-circle" width="132" height="132"/>
                                    </div>
                                    <form id="loginForm" class="mt-5">
                                        <div class="mb-3 row">
                                            <label class="col-form-label col-sm-2 text-sm-right">用户名:</label>
                                            <div class="col-sm-10">
                                                <input type="text" name="name" class="form-control" placeholder="请输入用户名">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label class="col-form-label col-sm-2 text-sm-right">密码:</label>
                                            <div class="col-sm-10">
                                                <input ttype="password" name="pwd" class="form-control" placeholder="请输入密码">
                                            </div>
                                        </div>
                                        <div class="text-center mt-3">
                                            <a href="#" class="btn btn-primary" onclick="submitForm()">登录</a>
                                        </div>
                                    </form>
                                    <div>
                                        <div class="d-flex justify-content-end">
                                            <a href="/pages/pages-sign-up.html" class="btn btn-sm btn-link"><i
                                                    class="bi bi-pen-fill"></i>注册新用户</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>


<script src="../js/pss.js"></script>
<script>
    $(document).ready(function () {
        $("#loginForm").validate({
            ignore: ".ignore",
            rules: {
                "name": {
                    required: true,
                },
                "pwd": {
                    required: true,
                },
            },
            messages: {
                name: {
                    required: "请输入用户名"
                },
                pwd: {
                    required: "请输入密码"
                },
            },
        });
    });

    function submitForm() {
        if ($("#loginForm").valid()) {
            let formData = $("#loginForm").serialize();
            let data = {
                "method": "Login",
                "param": formStringToJson(formData)
            };
            $.ajax({
                type: "POST",
                url: "/pps/api",
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function (data) {
                    console.log(data)
                    if (data.ret != "ok") {
                        showAlert(data.msg);
                    } else {
                        window.location.href = "/pages/warehouse.html";
                    }
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }
        return false;
    }
</script>

</body>

</html>