{"id":26258,"date":"2025-05-14T23:38:16","date_gmt":"2025-05-14T20:38:16","guid":{"rendered":"https:\/\/www.qu.edu.sa\/?page_id=26258"},"modified":"2026-05-25T08:21:10","modified_gmt":"2026-05-25T05:21:10","slug":"check-username","status":"publish","type":"page","link":"https:\/\/www.qu.edu.sa\/en\/mainservices\/check-username\/","title":{"rendered":"Username verification"},"content":{"rendered":"\n    <form id=\"usernameCheckForm\" method=\"POST\" accept-charset=\"UTF-8\">\n\n        <select id=\"userType\" name=\"userType\">\n            <option value=\"student\">\u0637\u0627\u0644\u0628<\/option>\n            <option value=\"employee\">\u0645\u0648\u0638\u0641<\/option>\n        <\/select>\n\n        <select id=\"fieldType\" name=\"fieldType\"><\/select>\n\n        <input\n            type=\"text\"\n            id=\"fieldValue\"\n            name=\"fieldValue\"\n            placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0631\u0642\u0645\"\n            required\n            inputmode=\"numeric\"\n        \/>\n\n        <div class=\"cf-turnstile\" data-sitekey=\"0x4AAAAAABc6Jga4MdcjvjIL\"><\/div>\n\n        <button type=\"submit\">\u0627\u0633\u062a\u0639\u0644\u0627\u0645<\/button>\n\n    <\/form>\n\n    <div id=\"usernameResult\"><\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function () {\n\n        function decodeHtmlEntities(text) {\n            const textarea = document.createElement('textarea');\n            textarea.innerHTML = text;\n            return textarea.value;\n        }\n\n        const htmlTag = document.documentElement;\n        const isRTL = htmlTag.getAttribute('dir') === 'rtl';\n\n        const userType = document.getElementById('userType');\n        const fieldType = document.getElementById('fieldType');\n        const form = document.getElementById('usernameCheckForm');\n        const resultDiv = document.getElementById('usernameResult');\n        const submitButton = form.querySelector('button[type=\"submit\"]');\n\n        const options = {\n            student: [\n                { value: 'student_national_id', text: isRTL ? '\u0631\u0642\u0645 \u0627\u0644\u0647\u0648\u064a\u0629' : 'National ID' }\n            ],\n            employee: [\n                { value: 'employee_national_id', text: isRTL ? '\u0631\u0642\u0645 \u0627\u0644\u0647\u0648\u064a\u0629' : 'National ID' },\n                { value: 'employee_id', text: isRTL ? '\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0648\u0638\u064a\u0641\u064a' : 'Employee Number' }\n            ]\n        };\n\n        function updateFieldOptions(type) {\n\n            const fields = options[type] || [];\n\n            fieldType.innerHTML = '';\n\n            fields.forEach(function (opt) {\n\n                const option = document.createElement('option');\n\n                option.value = opt.value;\n                option.textContent = decodeHtmlEntities(opt.text);\n\n                fieldType.appendChild(option);\n            });\n\n            fieldType.style.display = fields.length ? 'block' : 'none';\n        }\n\n        userType.addEventListener('change', function () {\n            updateFieldOptions(userType.value);\n        });\n\n        updateFieldOptions(userType.value);\n\n        form.addEventListener('submit', function (e) {\n\n            e.preventDefault();\n\n            submitButton.disabled = true;\n\n            const fieldValue = document.getElementById('fieldValue').value.trim();\n\n            const token =\n                form.querySelector('input[name=\"cf-turnstile-response\"]')?.value || '';\n\n            resultDiv.innerHTML =\n                '<div class=\"form-loading\">' +\n                (isRTL\n                    ? '\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0642\u0642\u060c \u064a\u0631\u062c\u0649 \u0627\u0644\u0627\u0646\u062a\u0638\u0627\u0631...'\n                    : 'Verifying, please wait...') +\n                '<\/div>';\n\n            fetch('https:\/\/www.qu.edu.sa\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/x-www-form-urlencoded; charset=UTF-8'\n                },\n                body: new URLSearchParams({\n                    action: 'check_username_qu',\n                    type: userType.value,\n                    field: fieldType.value,\n                    value: fieldValue,\n                    'cf-turnstile-response': token\n                })\n            })\n\n            .then(function (response) {\n                return response.json();\n            })\n\n            .then(function (res) {\n\n                if (res.success) {\n\n                    resultDiv.innerHTML =\n                        '<div class=\"frm_message\">' +\n\n                            '<div class=\"\">\u2713<\/div>' +\n\n                            '<div class=\"result-content\">' +\n\n                                '<div class=\"result-label\">' +\n                                    (isRTL\n                                        ? '\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u0647\u0648'\n                                        : 'Your username is') +\n                                '<\/div>' +\n\n                                '<div class=\"result-username\" dir=\"ltr\">' +\n                                    decodeHtmlEntities(res.data) +\n                                '<\/div>' +\n\n                            '<\/div>' +\n\n                        '<\/div>';\n\n                } else {\n\n                    resultDiv.innerHTML =\n                        '<div class=\"frm_error_style\">' +\n                            decodeHtmlEntities(\n                                res.data ||\n                                (isRTL\n                                    ? '\u062d\u062f\u062b \u062e\u0637\u0623 \u063a\u064a\u0631 \u0645\u062a\u0648\u0642\u0639.'\n                                    : 'Unexpected error occurred.')\n                            ) +\n                        '<\/div>';\n                }\n            })\n\n            .catch(function () {\n\n                resultDiv.innerHTML =\n                    '<div class=\"frm_error_style\">' +\n                    (isRTL\n                        ? '\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u062e\u062f\u0645\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.'\n                        : 'Connection error. Please try again.') +\n                    '<\/div>';\n            })\n\n            .finally(function () {\n\n                submitButton.disabled = false;\n\n                if (typeof turnstile !== 'undefined') {\n                    turnstile.reset();\n                }\n            });\n        });\n    });\n    <\/script>\n\n    <style>\n\n     \n\n   #usernameCheckForm {\n            max-width: 700px;\n            margin: 20px auto;\n            padding: 28px;\n            border: 1px solid #ddd;\n            border-radius: 12px;\n            background-color: #fff;\n        }\n\n        #usernameCheckForm input,\n        #usernameCheckForm select,\n        #usernameCheckForm button {\n\n            display: block;\n            width: 100%;\n            margin-bottom: 18px;\n            padding: 14px 16px;\n            font-size: 18px;\n            border: 1px solid #ccc;\n            border-radius: 8px;\n            box-sizing: border-box;\n            font-family: inherit;\n        }\n\n        #usernameCheckForm input,\n        #usernameCheckForm select {\n            background-color: #fff;\n            color: #000;\n        }\n\n        html[dir=\"rtl\"] #usernameCheckForm input,\n        html[dir=\"rtl\"] #usernameCheckForm select {\n            text-align: right;\n        }\n\n        html[dir=\"ltr\"] #usernameCheckForm input,\n        html[dir=\"ltr\"] #usernameCheckForm select {\n            text-align: left;\n        }\n\n        #usernameCheckForm .cf-turnstile {\n            margin-bottom: 18px;\n        }\n\n        #usernameCheckForm button {\n\n            background-color: #1B8354;\n            color: #fff;\n            border: none;\n            cursor: pointer;\n            font-size: 22px;\n            font-weight: 600;\n            transition: background-color 0.2s ease;\n        }\n\n        #usernameCheckForm button:hover {\n            background-color: #166b45;\n        }\n\n        #usernameCheckForm button:disabled {\n            background-color: #b7b7b7;\n            cursor: not-allowed;\n        }\n\n        #usernameResult {\n            max-width: 700px;\n            margin: 0 auto;\n        }\n\n        .form-loading {\n\n            padding: 18px 20px;\n            color: #555;\n            background-color: #f5f5f5;\n            border-radius: 10px;\n            text-align: center;\n            font-size: 17px;\n            margin-top: 20px;\n        }\n\n        .frm_error_style {\n\n            background-color: #FEF2F2 !important;\n            border: 1px solid #FECACA !important;\n            color: #B91C1C !important;\n            font-size: 18px !important;\n            padding: 20px !important;\n            line-height: 1.7 !important;\n            margin-top: 20px !important;\n            border-radius: 12px !important;\n            text-align: center;\n        }\n\n        .frm_message {\n\n            background-color: #ECFDF5;\n            border: 1px solid #A7F3D0;\n            border-radius: 14px;\n            padding: 24px;\n            margin-top: 20px;\n\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 18px;\n\n            text-align: center;\n        }\n\n        .result-icon {\n\n            width: 54px;\n            height: 54px;\n            min-width: 54px;\n\n            border-radius: 50%;\n            background-color: #D1FAE5;\n            color: #065F46;\n\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            font-size: 28px;\n            font-weight: bold;\n        }\n\n        .result-content {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n            align-items: center;\n        }\n\n        .result-label {\n\n            color: #065F46;\n            font-size: 20px;\n            font-weight: 600;\n            line-height: 1.5;\n        }\n\n        .result-username {\n\n            direction: ltr;\n            unicode-bidi: isolate;\n\n            font-size: 30px;\n            font-weight: 700;\n            color: #064E3B;\n\n            word-break: break-word;\n            text-align: center;\n        }\n\n\t\t\t  \n\t\t\t  #usernameResult {\n    max-width: 700px;\n    margin: 0 auto;\n}\n\n#usernameResult .qu-username-message {\n    background-color: #ECFDF5 !important;\n    border: 1px solid #A7F3D0 !important;\n    border-radius: 14px !important;\n    padding: 24px !important;\n    margin-top: 20px !important;\n\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    gap: 16px !important;\n\n    text-align: center !important;\n    line-height: 1.6 !important;\n    overflow: hidden !important;\n}\n\n#usernameResult .result-icon {\n    width: 52px !important;\n    height: 52px !important;\n    min-width: 52px !important;\n    border-radius: 50% !important;\n    background-color: #D1FAE5 !important;\n    color: #065F46 !important;\n\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n\n    font-size: 28px !important;\n    font-weight: 700 !important;\n    line-height: 1 !important;\n}\n\n#usernameResult .result-content {\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    justify-content: center !important;\n    gap: 8px !important;\n    min-width: 0 !important;\n}\n\n#usernameResult .result-label {\n    color: #065F46 !important;\n    font-size: 20px !important;\n    font-weight: 600 !important;\n    line-height: 1.5 !important;\n    margin: 0 !important;\n}\n\n#usernameResult .result-username {\n    direction: ltr !important;\n    unicode-bidi: isolate !important;\n\n    display: block !important;\n    width: 100% !important;\n\n    color: #064E3B !important;\n    font-size: 32px !important;\n    font-weight: 800 !important;\n    line-height: 1.2 !important;\n    text-align: center !important;\n\n    white-space: nowrap !important;\n    word-break: normal !important;\n    overflow-wrap: normal !important;\n}\n\n@media (max-width: 768px) {\n    #usernameResult .qu-username-message {\n        flex-direction: column !important;\n        padding: 20px !important;\n    }\n\n    #usernameResult .result-username {\n        font-size: 24px !important;\n        white-space: normal !important;\n        overflow-wrap: anywhere !important;\n    }\n}\n\t\t\t  \n\t\t\t  \n\t\t\t  \n        @media (max-width: 768px) {\n\n            #usernameCheckForm {\n                padding: 18px;\n            }\n\n            .frm_message {\n                flex-direction: column;\n                text-align: center;\n            }\n\n            .result-username {\n                font-size: 24px;\n            }\n        }\n\n    <\/style>\n\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":25876,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"departments-pages-type":[239],"class_list":["post-26258","page","type-page","status-publish","hentry","departments-pages-type-static-content"],"_links":{"self":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/26258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/comments?post=26258"}],"version-history":[{"count":20,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/26258\/revisions"}],"predecessor-version":[{"id":72208,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/26258\/revisions\/72208"}],"up":[{"embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/pages\/25876"}],"wp:attachment":[{"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/media?parent=26258"}],"wp:term":[{"taxonomy":"departments-pages-type","embeddable":true,"href":"https:\/\/www.qu.edu.sa\/en\/wp-json\/wp\/v2\/departments-pages-type?post=26258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}