txlyre
/
3x-ui
mirror de https://github.com/MHSanaei/3x-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!DOCTYPE html>
<html lang="en">
{{template "head" .}}
<style>

    h1 {
        text-align: center;
        color: #fff;
        margin: 20px 0 50px 0;
    }

    .ant-btn, .ant-input {
        height: 50px;
        border-radius: 30px;
    }

    .ant-input-group-addon {
        border-radius: 0 30px 30px 0;
        width: 50px;
        font-size: 18px;
    }

    .ant-input-affix-wrapper .ant-input-prefix {
        left: 23px;
    }

    .ant-input-affix-wrapper .ant-input:not(:first-child) {
        padding-left: 50px;
    }

    .centered {
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .title {
        font-size: 32px;
        font-weight: bold;
    }

    #app {
        overflow: hidden;
    }
    #login {
        animation: charge .5s both;
        background-color: #fff;
        border-radius: 2rem;
        padding: 3rem;
    }
    #login:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,.09);
    }
    @keyframes charge {
        from {transform: translateY(5rem);opacity: 0}
        to {transform: translateY(0);opacity: 1}
    }
    @keyframes wave {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }
    .wave {
        opacity: .6;
        position: absolute;
        bottom: 40%;
        left: 50%;
        width: 6000px;
        height: 6000px;
        background: #000;
        margin-left: -3000px;
        transform-origin: 50% 48%;
        border-radius: 46%;
        animation: wave 72s infinite linear;
        pointer-events: none;
    }
    .wave2 {
        animation: wave 88s infinite linear;
        opacity: .3;
    }
    .wave3 {
        animation: wave 80s infinite linear;
        opacity: .1;
    }
    .wave {
        background: #0a755715;
    }
    .under {
        background-color: #dbf5ed;
    }
    .dark .wave {
        background: rgb(10 117 87 / 20%);
    }
    .dark .under {
        background-color: #051510;
    }
    .dark #login {
        background-color: rgb(8, 22, 20);
    }
    .dark h1 {
        color: rgb(255 255 255 / 85%);
    }
</style>
<body>
<a-layout id="app" v-cloak class="login" :class="themeSwitcher.currentTheme">
    <transition name="list" appear>
        <a-layout-content class="under">
            <div class='wave'></div>
            <div class='wave wave2'></div>
            <div class='wave wave3'></div>
            <a-row type="flex" justify="center" align="middle" style="height: 100%;">
            <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="6" id="login">
                <a-row type="flex" justify="center">
                <a-col>
                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                </a-col>
            </a-row>
            <a-row type="flex" justify="center">
                <a-col span="24">
                    <a-form>
                        <a-form-item>
                            <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
                                     @keydown.enter.native="login" autofocus>
                                <a-icon slot="prefix" type="user" style="font-size: 16px;" />
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <password-input icon="lock" v-model.trim="user.password"
                                            placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
                            </password-input>
                        </a-form-item>
                        <a-form-item v-if="secretEnable">
                            <password-input icon="key" v-model.trim="user.loginSecret"
                                            placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
                            </password-input>
                        </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-row justify="center" class="centered">
                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
                                          :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
                                </a-button>
                            </a-row>
                        </a-form-item>
                        <a-form-item>
                            <a-row justify="center" class="centered">
                                <a-col :span="24">
                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
                                        <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
                                            <span role="img" :aria-label="l.name" v-text="l.icon"></span>
                                            &nbsp;&nbsp;<span v-text="l.name"></span>
                                        </a-select-option>
                                    </a-select>
                                </a-col>
                            </a-row>
                        </a-form-item>
                        <a-form-item>
                            <a-row justify="center" class="centered">
                                <a-col>
                                    <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>&nbsp;
                                </a-col>
                                <a-col>
                                    <theme-switch />
                                </a-col>
                            </a-row>
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>
            </a-col>
            </a-row>
        </a-layout-content>
    </transition>
</a-layout>
{{template "js" .}}
{{template "component/themeSwitcher" .}}
{{template "component/password" .}}
<script>

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            themeSwitcher,
            loading: false,
            user: new User(),
            secretEnable: false,
            lang: ""
        },
        async created() {
            this.lang = getLang();
            this.secretEnable = await this.getSecretStatus();
        },
        methods: {
            async login() {
                this.loading = true;
                const msg = await HttpUtil.post('/login', this.user);
                this.loading = false;
                if (msg.success) {
                    location.href = basePath + 'panel/';
                }
            },
            async getSecretStatus() {
                this.loading = true;
                const msg = await HttpUtil.post('/getSecretStatus');
                this.loading = false;
                if (msg.success) {
                    this.secretEnable = msg.obj;
                    return msg.obj;
                }
            },
        },
    });

</script>
</body>
</html>