USTC x UCAS

USTC 统一身份认证登录界面改为 UCAS 样式

// ==UserScript==
// @name         USTC x UCAS
// @namespace    http://tampermonkey.net/
// @version      0.2.1
// @description  USTC 统一身份认证登录界面改为 UCAS 样式
// @author       PRO
// @license      gpl-3.0
// @match        https://passport.ustc.edu.cn/login*
// @icon         http://passport.ustc.edu.cn/images/favicon.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let css = document.createElement("style");
    css.textContent = `
    body {
        background-image: url(https://icourse.ucas.ac.cn/static/img/c-3.8727b282.jpg);
        background-size: cover;
    }
    div.box.center {
        margin: 0px auto !important;
        border-radius: 6px;
        background: rgb(255, 255, 255);
        max-width: 400px;
        padding: 25px 25px 5px;
        box-shadow: none;
        height: unset;
    }
    div.card {
        padding: 0px;
    }
    form.form-style {
        margin: 0px;
        width: 100%;
        height: 282px;
    }
    #header > h3 {
        margin: 0 auto 30px auto;
        text-align: center;
        color: #707070;
        font-weight: 500;
        line-height: 1.1;
    }
    svg.prefix {
        position: absolute;
        left: 7px;
        top: 0;
        width: 14px;
        height: 39px;
        z-index: 1;
        color: #bcc6db;
        fill: currentColor;
    }
    input.input-box {
        height: 38px;
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        padding-left: 30px;
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        outline: none;
        padding: 0px 15px 0px 30px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    input.input-box:focus {
        border-color: #1890ff;
    }
    span.error-tip {
        color: #ff4949;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        transition: transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);
        transform: scaleY(0);
        transform-origin: center top;
    }
    div.group {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 22px;
        height: unset;
    }
    div.validate {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 22px;
        height: 38px;
    }
    div.validate-img-area {
        width: 33%;
        height: 38px;
    }
    img.validate-img {
        margin-top: 0px;
        height: 38px;
    }
    div.bottom-box {
        height: 102px;
    }
    select.bottom-box-selector {
        bottom: unset;
        top: 0px;
        color: #606266;
        height: 19px;
        line-height: 20px;
        padding: 0px 0;
        font-size: 10px;
        margin: 0px 0px 25px;
    }
    a.bottom-box-button-area {
        color: #1890ff;
        float: right;
        position: unset;
        right: unset;
        bottom: unset;
        font-size: 14px;
        font-weight: 500;
        line-height: unset;
    }
    a.bottom-box-button-area:hover {
        color: #46a6ff;
        border-bottom: 1px solid #1890ff;
    }
    button.btn {
        width: 100%;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #1890ff;
        border: 1px solid #1890ff;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: .2em;
        bottom: 22px;
    }
    button.btn:hover {
        background: #46a6ff;
        border-color: #46a6ff;
    }
    div#footer {
        position: fixed;
        bottom: 1em;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
        width: 100%;
    }
    div#footer a {
        color: #fff;
    }
    `;

    let svg = document.createElement("svg");
    svg.style.display = "none";
    document.querySelector("body").insertAdjacentElement("afterbegin", svg);
    let input_mod = { // SVG from https://icourse.ucas.ac.cn/static/js/app.68f39dac.js
        "username": ["账号", "请输入您的账号", '<svg class="prefix" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797" /></svg>'],
        "password": ["密码", "请输入您的密码", '<svg class="prefix" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751" /></svg>'],
        "validate": ["验证码", "请输入验证码", '<svg class="prefix" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940" /><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941" /></svg>']
    };
    for (let key in input_mod) {
        let input = document.querySelector("input#" + key);
        if (!input) continue;
        input.attributes.removeNamedItem("onfocus");
        input.attributes.removeNamedItem("onblur");

        input.insertAdjacentHTML("afterend", input_mod[key][2]);

        input.placeholder = input_mod[key][0];

        let tip = document.createElement("span");
        tip.className = "error-tip";
        tip.textContent = input_mod[key][1];
        tip.id = key + "-error";
        input.parentNode.appendChild(tip);

        let callback2 = (e) => {
            input.removeEventListener("blur", callback2);
            css.textContent += `
            input.input-box#${key}:invalid ~ span#${key}-error {
                visibility: unset;
                transform: scaleY(1);
            }
            input.input-box#${key}:invalid {
                border-color: #ff4949;
            }`;
        };
        let callback1 = (e) => {
            input.removeEventListener("click", callback1);
            input.addEventListener("blur", callback2);
        };
        input.addEventListener("click", callback1);
    }
    document.querySelector("head").appendChild(css);

    let title = document.createElement("h3");
    title.textContent = "中科大在线系统";
    header.appendChild(title);
    let find_pwd = document.querySelector("a#findPassword");
    find_pwd.textContent = "找回用户名密码";
    let footer = document.querySelector("div#footer");
    document.querySelector("body").insertAdjacentElement("afterbegin", footer);

    function cleanStyle(sel) {
        let ele = document.querySelector(sel);
        if (ele) ele.attributes.removeNamedItem("style");
    }

    function tryRemove(sel) {
        let ele = document.querySelector(sel);
        if (ele) ele.remove();
    }

    ["img.validate-img", "form.form-style", "select.bottom-box-selector"].forEach(cleanStyle);
    ["div.qrcode", "div.input_login", "div#header > h1.header-logo", "div#header > h1.header-des"].forEach(tryRemove);

    document.querySelectorAll("span.bar").forEach((ele) => { ele.remove(); })
})();