FISLib_Old/Vinno.FIS.Sonopost/Assets/wwwroot/pages/server/login.html

<style>
    #pageLogin {
    }

        #pageLogin .custom-server-item {
            display: none;
        }

        #pageLogin .device-unique {
            margin-left: 200px;
            width: 160px;
            text-align: center;
        }

        #pageLogin .device-unique_id {
            font-size: 24px;
            color: rgb(0, 125, 255);
        }

        #pageLogin .device-unique-item {
            display: none;
        }

        #pageLogin .device-unique_qrcode img {
            width: 100%;
        }

        #pageLogin .device-unique_qrcode .tips {
            font-size: 14px;
            word-wrap: normal;
        }
</style>
<div id="pageLogin">
    <div class="page-title" data-content="PageTitle4ServerLogin"></div>
    <div class="page-desc" data-content="PageDesc4ServerLogin"></div>
    <div class="layui-form page-form" lay-filter="FormServerLogin">
        <div class="layui-form-item">
            <label class="layui-form-label" data-content="SelectServer"></label>
            <div class="layui-input-block">
                <select name="ServerNode"
                        lay-verify="required"
                        lay-filter="ServerNode"></select>
                <input type="text"
                       name="ServerName"
                       lay-filter="ServerName"
                       autocomplete="off"
                       class="layui-input  is-hide" />
            </div>
        </div>
        <div class="layui-form-item custom-server-item">
            <label class="layui-form-label" data-content="ServerAddress"></label>
            <div class="layui-input-block">
                <input type="text"
                       name="ServerAddress"
                       lay-verify="field_required|server_address"
                       required-field="ServerAddress"
                       autocomplete="off"
                       class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item custom-server-item">
            <label class="layui-form-label" data-content="ServerPort"></label>
            <div class="layui-input-block">
                <input type="text"
                       name="ServerPort"
                       maxlength="5"
                       lay-verify="field_required|openport"
                       required-field="ServerPort"
                       autocomplete="off"
                       class="layui-input"
                       lay-filter="ServerPort" />
            </div>
        </div>
        <div class="layui-form-item is-hide" lay-filter="Organization">
            <label class="layui-form-label" data-content="HospitalName"></label>
            <div class="layui-input-block">
                <input type="text"
                       name="HospitalName"
                       lay-filter="HospitalNameInput"
                       maxlength="30"
                       autocomplete="off"
                       class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item is-hide" lay-filter="Account">
            <label class="layui-form-label" data-content="Account"></label>
            <div class="layui-input-block">
                <input type="text"
                       name="Account"
                       maxlength="50"
                       lay-filter="AccountInput"
                       autocomplete="off"
                       class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item is-hide" lay-filter="Password">
            <label class="layui-form-label" data-content="Password"></label>
            <div class="layui-inline">
                <input type="password"
                       name="Password"
                       maxlength="20"
                       lay-filter="PasswordInput"
                       autocomplete="off"
                       class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal"
                        lay-submit
                        lay-filter="BtnLogin"
                        data-content="Login"></button>
                <button class="layui-btn layui-btn-normal is-hide"
                        lay-submit
                        lay-filter="BtnDisconnect"
                        data-content="Disconnect"></button>
            </div>
        </div>
        <div class="layui-form-item device-unique-item">
            <div class="device-unique">
                <div class="device-unique_id ftbold"></div>
                <div class="device-unique_qrcode">
                    <div class="qrcode"></div>
                    <div class="tips" data-content="DeviceBindingQrCodeGuide"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function Page(app, runtime) {
        const { store } = app;
        const { $api, $t, $regExp, $loading } = runtime;
        const { form, layer } = layui;
        const formFilter = "FormServerLogin";
        this.onload = async function () {
            form.verify({
                server_address: function (value, item) {
                    if (/^\d{1,3}(\.\d{1,3}){3}$/.test(value)) {
                        return;
                    }
                    if (
                        /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/.test(
                            value
                        )
                    ) {
                        return;
                    }
                    return $t("ServerAddressError");
                }
            });
            let loadingIndex = $loading();
            try {
                await initServerNodeSelect();
                form.on("submit(BtnLogin)", async function (data) {
                    await handleLogin(this, data.field);
                });
                form.on("submit(BtnDisconnect)", async function () {
                    await handleLogout(this);
                });
                let accountInput = form.find(formFilter, "AccountInput");
                let passwordInput = form.find(formFilter, "PasswordInput");
                accountInput.bind("keyup", function (event) {
                    var inputData = accountInput[0].value;
                    if (inputData == "") {
                        passwordInput.val("");
                    }
                });
                // setTimeout(() => { form.render(null, formFilter); });
                await loadLoggedInfo();
            } finally {
                layer.close(loadingIndex);
            }
        };
        this.beforeDestroy = function () {
            delete form.config.verify.server_address;
        };
        this.onLanguageChanged = function (lang) { };

        async function loadLoggedInfo() {
            let res = await $api("server", "GetLoginInfo");
            if (!res.IsSuccess) return;
            let data = res.Data;
            let serverNode = data.Address + ":" + data.Port + "@" + data.VCloudServerName;
            form.val(formFilter, {
                ServerNode: serverNode,
                ServerAddress: data.Address,
                ServerPort: data.Port,
                Account: data.Account,
                Password: data.Password,
                ServerName: data.VCloudServerName
            });
            store.serverLogged = data.IsLogged;
            if (data.IsLogged) {
                form.find(formFilter, "BtnLogin").hide();
                form.find(formFilter, "BtnDisconnect").show();
                setFormLock(true);
                showUniqueInfo(res.Data.UniqueId, res.Data.QRCodeString);

            } else if (!data.IsExisted) {
                $("#pageLogin .custom-server-item").show();
                let el = form.find(formFilter, "ServerNode");
                el.val("custom");
                form.val(formFilter, {
                    ServerAddress: data.Address,
                    ServerPort: data.Port,
                    ServerName: data.Address + ":" + data.Port,
                });
            }
            let account = form.find(formFilter, "Account");
            let password = form.find(formFilter, "Password");
            if (data.IsLoginWithAccountAndPassword) {
                account.show();
                password.show();
            }
            else {
                account.hide();
                password.hide();
            }

            form.render(null, formFilter);
        }

        async function initServerNodeSelect() {
            let res = await $api("server", "GetServerList");
            if (!res.IsSuccess) return;
            let options = [];
            res.Data.forEach((x) => {
                if (x.DisplayName === "FlyinsonoServer") {
                    options.push(`<option value="${x.Host}:${x.Port}@${x.DisplayName}" data-content="FlyinsonoServer">${$t(x.DisplayName)}</option>`);
                }
                else if (x.DisplayName === "CloudServerInChina") {
                    options.push(`<option value="${x.Host}:${x.Port}@${x.DisplayName}" data-content="CloudServerInChina">${$t(x.DisplayName)}</option>`);
                }
                else if (x.DisplayName === "CloudServerInGermany") {
                    options.push(`<option value="${x.Host}:${x.Port}@${x.DisplayName}" data-content="CloudServerInGermany">${$t(x.DisplayName)}</option>`);
                }
                else if (x.DisplayName === "CloudServerInHongKong") {
                    options.push(`<option value="${x.Host}:${x.Port}@${x.DisplayName}" data-content="CloudServerInHongKong">${$t(x.DisplayName)}</option>`);
                }
                else if (x.DisplayName === "CloudServerInIndia") {
                    options.push(`<option value="${x.Host}:${x.Port}@${x.DisplayName}" data-content="CloudServerInIndia">${$t(x.DisplayName)}</option>`);
                }
                else {
                    options.push(`<option value="${x.Host}:${x.Port}@${x.DisplayName}">${$t(x.DisplayName)}</option>`);
                }
            });
            options.push(`<option value="custom" data-content="CloudServerByCustom">${$t("CloudServerByCustom")}</option>`);
            form.find(formFilter, "ServerNode").empty().append(options);
            form.render("select", formFilter);
            initServerNodeEvent();
        }
        function initServerNodeEvent() {
            form.on("select(ServerNode)", function (data) {
                let ip = data.value;
                let port = 443;
                let serverName = "";
                if (ip === "custom") {
                    $("#pageLogin .custom-server-item").show();
                    ip = "";
                } else {
                    $("#pageLogin .custom-server-item").hide();
                    let splitRst = ip.split('@');
                    ip = splitRst[0];
                    if (splitRst.length > 1) {
                        serverName = splitRst[1];
                    }
                    splitRst = ip.split(':');
                    ip = splitRst[0];
                    if (splitRst.length > 1) {
                        port = parseInt(splitRst[1]);
                    }
                }
                form.val(formFilter, {
                    ServerAddress: ip,
                    ServerPort: port,
                    ServerName: serverName
                });
                form.render(null, formFilter);
                let organization = form.find(formFilter, "Organization");
                let hospitalNameInput = form.find(formFilter, "HospitalNameInput");
                organization.hide();
                hospitalNameInput.val("");
            });
        }

        async function handleLogin(e, data) {
            let loadingIndex = $loading();
            try {
                if (data.ServerName == "") {
                    data.ServerName = data.ServerAddress + ":" + data.ServerPort;
                }
                let request = {
                    Ipv4: data.ServerAddress,
                    Port: data.ServerPort,
                    Account: data.Account,
                    Password: data.Password,
                    HospitalName: data.HospitalName,
                    ServerName: data.ServerName,
                };
                var res = await $api("server", "login", request);
                let organization = form.find(formFilter, "Organization");
                let hospitalNameInput = form.find(formFilter, "HospitalNameInput");
                if (!res.IsSuccess) {
                    if (res.Code == "OrganizationMissing") {
                        organization.show();
                        hospitalNameInput.val("");
                        return layer.msg.error($t("OrganizationIsMissing"));
                    } else {
                        return layer.msg.error($t(res.Code));
                    }
                }

                organization.hide();
                hospitalNameInput.val("");

                showUniqueInfo(res.Data.UniqueId, res.Data.QRCodeString);

                store.serverLogged = true;
                setFormLock(true);
                $(".custom-server-item").hide();
                if (form.find(formFilter, "ServerNode").val() === "custom") {
                    addNewServerNode(data.ServerAddress, data.ServerPort);
                }
                $(e).hide();
                form.find(formFilter, "BtnDisconnect").show();
                form.render(null, formFilter);
            } finally {
                layer.close(loadingIndex);
            }
        }

        function addNewServerNode(ip, port) {
            let option = $("<option></option>");
            let address = ip + ":" + port;
            let value = ip + ":" + port + "@" + ip + ":" + port;
            option.val(value);
            option.text(address);
            let el = form.find(formFilter, "ServerNode");
            let customOption = el.children("option").last();
            option.insertBefore(customOption);
            el.val(value);
        }

        async function handleLogout(e) {
            let loadingIndex = $loading();
            try {
                let res = await $api("server", "Logout");
                if (!res.IsSuccess) {
                    return layer.msg.error($t(res.Code));
                }
                store.serverLogged = false;
                setFormLock(false);
                $(e).hide();
                form.find(formFilter, "BtnLogin").show();
                let currentLoginMode = await $api(
                    "server",
                    "GetCurrentVCloudLoginMode"
                );
                if (!currentLoginMode.IsSuccess)
                    return layer.msg.error($t("GetCurrentVCloudLoginMode Error"));
                let loginMode = await $api("system", "LoadVCloudLoginSetting");
                if (!loginMode.IsSuccess)
                    return layer.msg.error($t("LoadVCloudLoginSetting Error"));
                let account = form.find(formFilter, "Account");
                let password = form.find(formFilter, "Password");
                let accountInput = form.find(formFilter, "AccountInput");
                if (
                    !currentLoginMode.Data.IsLoginWithAccountAndPassword &&
                    loginMode.Data.IsLoginWithAccountAndPassword
                ) {
                    account.show();
                    password.show();
                    accountInput.val("");
                } else if (
                    currentLoginMode.Data.IsLoginWithAccountAndPassword &&
                    !loginMode.Data.IsLoginWithAccountAndPassword
                ) {
                    account.hide();
                    password.hide();
                }
                $(".device-unique-item").hide();
                form.render(null, formFilter);
            } finally {
                layer.close(loadingIndex);
            }
        }

        async function pingip(ip) {
            let res = await $api("Network", "Ping", { Ipv4: ip });
            if (!res || !res.IsSuccess) {
                // error code: res.Data as ipstatus
                layer.msg.error($t("ConnectServerAddressFailed"));
                return false;
            }
            return true;
        }

        function setFormLock(locked) {
            if (locked === false) {
                $(".layui-form-item select").attr("disabled", false);
                $(".layui-form-item input").attr("disabled", false);
                $(".layui-form-item input").removeClass("layui-disabled");
            } else {
                $(".layui-form-item select").attr("disabled", true);
                $(".layui-form-item input").attr("disabled", true);
                $(".layui-form-item input").addClass("layui-disabled");
            }
            form.render(null, formFilter);
        }

        function showUniqueInfo(uniqueId, qrStringCode) {
            let el = $(".device-unique-item");
            el.find(".device-unique_id").text(uniqueId);
            let qr = el.find(".device-unique_qrcode .qrcode");
            qr.empty();
            if (qrStringCode && qrStringCode.length) {
                qr.qrcode({
                    width: 160,
                    height: 160,
                    text: qrStringCode
                });
            }
            el.show();
        }
    }
</script>