TC
/
arozos-mirror
镜像来自 https://github.com/tobychui/arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ArozOS - New User</title>
    <script src="script/jquery.min.js"></script>
    <script src="script/ao_module.js"></script>
    <script src="script/applocale.js"></script>
    <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    #uu-root {
        --uu-text:         #202124;
        --uu-body:         #3c4043;
        --uu-dim:          #5f6368;
        --uu-muted:        #9aa0a6;
        --uu-sep:          #dadce0;
        --uu-bg:           #f8f9fa;
        --uu-card-bg:      #ffffff;
        --uu-input-border: #dadce0;
        --uu-input-focus:  #1967d2;
        --uu-accent:       #1a73e8;
        --uu-accent-press: #1558b0;
        --uu-danger:       #d93025;

        font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        color: var(--uu-body);
        background: var(--uu-bg);
        min-height: 100vh;
    }

    #uu-root.dark {
        --uu-text:         #e8eaed;
        --uu-body:         #bdc1c6;
        --uu-dim:          #9aa0a6;
        --uu-muted:        #5f6368;
        --uu-sep:          #3c4043;
        --uu-bg:           #202124;
        --uu-card-bg:      #292a2d;
        --uu-input-border: #5f6368;
        --uu-input-focus:  #8ab4f8;
        --uu-accent:       #8ab4f8;
        --uu-accent-press: #aecbfa;
        --uu-danger:       #f28b82;
    }

    body { background: var(--uu-bg); }

    /* ── Layout ── */
    #uu-outer {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
    }

    /* ── Card ── */
    #uu-card {
        width: 100%;
        max-width: 450px;
        background: var(--uu-card-bg);
        border-radius: 8px;
        border: 1px solid var(--uu-sep);
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    #uu-root.dark #uu-card {
        box-shadow: 0 1px 4px rgba(0,0,0,0.40);
    }

    /* ── Header ── */
    #uu-hero {
        padding: 32px 40px 22px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid var(--uu-sep);
    }

    #uu-hero-icon { display: none; }

    #uu-hero-title {
        font-size: 24px;
        font-weight: 400;
        color: var(--uu-text);
        line-height: 1.25;
        letter-spacing: 0;
    }

    #uu-hero-sub {
        font-size: 13px;
        color: var(--uu-dim);
        margin-top: 8px;
        line-height: 1.5;
    }

    /* ── Form body ── */
    #uu-body { padding: 24px 40px 32px; }

    .uu-field { margin-bottom: 20px; }

    .uu-label {
        display: block;
        font-size: 13px;
        font-weight: 400;
        color: var(--uu-dim);
        margin-bottom: 6px;
    }

    .uu-req { color: var(--uu-danger); margin-left: 2px; }

    .uu-input {
        width: 100%;
        padding: 9px 12px;
        border-radius: 4px;
        border: 1px solid var(--uu-input-border);
        background: transparent;
        color: var(--uu-text);
        font-family: inherit;
        font-size: 14px;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
        appearance: none;
        -webkit-appearance: none;
    }

    .uu-input::placeholder { color: var(--uu-muted); }

    .uu-input:focus {
        border-color: var(--uu-input-focus);
        box-shadow: 0 0 0 1px var(--uu-input-focus);
    }

    .uu-input.error {
        border-color: var(--uu-danger);
        box-shadow: 0 0 0 1px var(--uu-danger);
    }

    select.uu-input {
        background-color: var(--uu-card-bg);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f6368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 32px;
        cursor: pointer;
    }

    /* ── Error alert ── */
    #uu-err {
        display: none;
        background: rgba(217,48,37,0.06);
        border: 1px solid rgba(217,48,37,0.20);
        border-radius: 4px;
        padding: 10px 12px;
        margin-bottom: 16px;
        font-size: 13px;
        color: var(--uu-danger);
    }

    #uu-root.dark #uu-err {
        background: rgba(242,139,130,0.08);
        border-color: rgba(242,139,130,0.28);
    }

    /* ── Required note ── */
    #uu-note {
        font-size: 12px;
        color: var(--uu-muted);
        margin-bottom: 20px;
    }

    /* ── Divider ── */
    .uu-divider {
        height: 1px;
        background: var(--uu-sep);
        margin-bottom: 20px;
    }

    /* ── Actions ── */
    #uu-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    .uu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 9px 24px;
        border-radius: 4px;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        background: transparent;
        color: var(--uu-accent);
        transition: background 0.12s;
        white-space: nowrap;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .uu-btn:hover  { background: rgba(26,115,232,0.08); }
    .uu-btn:active { background: rgba(26,115,232,0.14); }

    #uu-root.dark .uu-btn:hover  { background: rgba(138,180,248,0.10); }
    #uu-root.dark .uu-btn:active { background: rgba(138,180,248,0.16); }

    .uu-btn.primary {
        background: var(--uu-accent);
        color: #ffffff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    }

    .uu-btn.primary:hover  { background: var(--uu-accent-press); }
    .uu-btn.primary:active { opacity: 0.88; }
    </style>
</head>
<body>

<div id="uu-root">
<div id="uu-outer">
<div id="uu-card">

    <div id="uu-hero">
        <div id="uu-hero-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.6"/>
                <path d="M4 20c0-3.314 3.582-6 8-6s8 2.686 8 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
        </div>
        <div>
            <div id="uu-hero-title" locale="user/title">New User</div>
            <div id="uu-hero-sub"   locale="user/subtitle">Fill in the following information to create an account.</div>
        </div>
    </div>

    <div id="uu-body">

        <div class="uu-field">
            <label class="uu-label" for="username">
                <span locale="user/username">Username</span><span class="uu-req">*</span>
            </label>
            <input id="username" class="uu-input" type="text" autocomplete="username">
        </div>

        <div class="uu-field">
            <label class="uu-label" for="magic">
                <span locale="user/password">Password</span><span class="uu-req">*</span>
            </label>
            <input id="magic" class="uu-input" type="password" autocomplete="new-password">
        </div>

        <div class="uu-field">
            <label class="uu-label" for="repeatMagic">
                <span locale="user/confirm-pw">Confirm Password</span><span class="uu-req">*</span>
            </label>
            <input id="repeatMagic" class="uu-input" type="password" autocomplete="new-password">
        </div>

        <div class="uu-field">
            <label class="uu-label" for="usergroups">
                <span locale="user/group">User Group</span>
            </label>
            <select id="usergroups" class="uu-input">
                <option locale="user/loading">Loading&#8230;</option>
            </select>
        </div>

        <div id="uu-note"><span class="uu-req">*</span> <span locale="user/required-note">This field is required</span></div>

        <div id="uu-err"></div>

        <div class="uu-divider"></div>

        <div id="uu-actions">
            <button id="cancelbtn" class="uu-btn" onclick="cancel()" style="display:none;" locale="user/cancel">Cancel</button>
            <button class="uu-btn primary" onclick="createUser()" locale="user/create">Create</button>
        </div>

    </div>
</div>
</div>
</div>

<script>
/* ── Theme (best-effort — page may be public) ── */
try {
    if (typeof ao_module_getSystemThemeColor === 'function') {
        ao_module_getSystemThemeColor(function(c) {
            document.getElementById('uu-root').classList.toggle('dark', c !== 'whiteTheme');
        });
    } else {
        var _t = (typeof preferredTheme !== 'undefined' ? preferredTheme : null) ||
                 (parent && typeof parent.preferredTheme !== 'undefined' ? parent.preferredTheme : null);
        if (_t) document.getElementById('uu-root').classList.toggle('dark', _t === 'dark' || _t === 'darkTheme');
    }
} catch(e) {}

/* ── Locale (best-effort — user may not be logged in) ── */
try {
    if (typeof NewAppLocale === 'function') {
        var uuLocale = NewAppLocale();
        uuLocale.init('locale/user.json', function() {
            uuLocale.translate();
        });
    }
} catch(e) {}

/* ── Load user groups ── */
$.get("system/permission/listgroup", function(data) {
    $("#usergroups").empty();
    for (var i = 0; i < data.length; i++) {
        $("#usergroups").append('<option value="' + escHtml(data[i]) + '">' + escHtml(data[i]) + '</option>');
    }
});

/* ── Show cancel button if running inside desktop ── */
try {
    if (!(!parent.isDesktopMode)) {
        $("#cancelbtn").show();
    }
} catch(e) {}

/* ── Enter key submits ── */
$("input").on("keydown", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        createUser();
    }
});

/* ── Create user ── */
function createUser() {
    var username  = $("#username").val().trim();
    var password  = $("#magic").val();
    var repeat    = $("#repeatMagic").val();
    var usergroup = $("#usergroups").val();
    var valid = true;

    /* Clear previous errors */
    $(".uu-input").removeClass("error");
    $("#uu-err").hide();

    if (username === "") {
        $("#username").addClass("error");
        valid = false;
    }
    if (password === "") {
        $("#magic").addClass("error");
        $("#repeatMagic").addClass("error");
        valid = false;
    } else if (password !== repeat) {
        $("#repeatMagic").addClass("error");
        valid = false;
    }

    if (!valid) return;

    $.post("system/auth/register", { username: username, password: password, group: usergroup })
        .done(function(data) {
            if (!data.includes("Error")) {
                $.get("system/auth/checkLogin", function(loggedIn) {
                    if (loggedIn == true) {
                        try {
                            if (!(!parent.isDesktopMode)) {
                                ao_module_parentCallback(true);
                                parent.closeFwProcess($(window.frameElement).parent().parent().attr("windowId"));
                                return;
                            }
                        } catch(e) {}
                        window.location.href = "SystemAO/closeTabInsturction.html";
                    } else {
                        window.location.href = "/login.html";
                    }
                });
            } else {
                $("#uu-err").text(data).slideDown('fast');
            }
        });
}

function cancel() {
    try {
        if (!(!parent.isDesktopMode)) {
            parent.closeFwProcess($(window.frameElement).parent().parent().attr("windowId"));
        }
    } catch(e) {}
}

function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
</script>
</body>
</html>