mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
feat: side-by-side login layout (#582)
This commit is contained in:
Kamiya
GitHub
@@ -172,11 +172,64 @@ a {
|
||||
// modal 시작이 2000이라서
|
||||
z-index: 1999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.x-login {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
align-items: center;
|
||||
max-width: clamp(600px, 60svw, 800px);
|
||||
}
|
||||
|
||||
.x-login-form-container {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
justify-items: center;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.x-login-form-container:has(> div:nth-child(3)) {
|
||||
grid-template-columns: 1fr 1px 1fr;
|
||||
}
|
||||
|
||||
.x-login-form-container > div {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
max-width: 280px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.x-scroll-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
hr.x-vertical-divider {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: rgb(255 255 255 / 16%);
|
||||
}
|
||||
|
||||
.x-saved-account-list {
|
||||
display: grid;
|
||||
|
||||
> .x-friend-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.x-legal-notice-container {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.x-menu-container {
|
||||
flex: none;
|
||||
overflow: hidden auto;
|
||||
|
||||
@@ -1,36 +1,43 @@
|
||||
mixin loginPage()
|
||||
.x-login-container(v-if="!API.isLoggedIn" v-loading="loginForm.loading")
|
||||
div(style="position:absolute;margin:5px")
|
||||
el-button(type="default" @click="showVRCXUpdateDialog" size="mini" icon="el-icon-download" circle)
|
||||
div(style="width:300px;margin:auto")
|
||||
div(style="margin:15px" v-if="Object.keys(loginForm.savedCredentials).length !== 0")
|
||||
h2(style="font-weight:bold;text-align:center;margin:0") {{ $t("view.login.savedAccounts") }}
|
||||
.x-friend-list(style="margin-top:10px")
|
||||
.x-friend-item(v-for="user in loginForm.savedCredentials" :key="user.user.id")
|
||||
.x-friend-item(@click="relogin(user)" style="width:202px;padding:0")
|
||||
.avatar
|
||||
img(v-lazy="userImage(user.user)")
|
||||
.detail
|
||||
span.name(v-text="user.user.displayName")
|
||||
span.extra(v-text="user.user.username")
|
||||
span.extra(v-text="user.loginParmas.endpoint")
|
||||
el-button(type="default" @click="deleteSavedLogin(user.user.id)" size="mini" icon="el-icon-delete" circle)
|
||||
div(style="margin:15px")
|
||||
h2(style="font-weight:bold;text-align:center;margin:0") {{ $t("view.login.login") }}
|
||||
el-form(ref="loginForm" :model="loginForm" :rules="loginForm.rules" @submit.native.prevent="login()")
|
||||
el-form-item(:label="$t('view.login.field.username')" prop="username" required)
|
||||
el-input(v-model="loginForm.username" name="username" :placeholder="$t('view.login.field.username')" clearable)
|
||||
el-form-item(:label="$t('view.login.field.password')" prop="password" required style="margin-top:10px")
|
||||
el-input(type="password" v-model="loginForm.password" name="password" :placeholder="$t('view.login.field.password')" clearable show-password)
|
||||
el-checkbox(v-model="loginForm.saveCredentials" style="margin-top:15px") {{ $t("view.login.field.saveCredentials") }}
|
||||
el-checkbox(v-model="enableCustomEndpoint" @change="toggleCustomEndpoint" style="margin-top:10px") {{ $t("view.login.field.devEndpoint") }}
|
||||
el-form-item(v-if="enableCustomEndpoint" :label="$t('view.login.field.endpoint')" prop="endpoint" style="margin-top:10px")
|
||||
el-input(v-model="loginForm.endpoint" name="endpoint" :placeholder="API.endpointDomainVrchat" clearable)
|
||||
el-form-item(v-if="enableCustomEndpoint" :label="$t('view.login.field.websocket')" prop="endpoint" style="margin-top:10px")
|
||||
el-input(v-model="loginForm.websocket" name="websocket" :placeholder="API.websocketDomainVrchat" clearable)
|
||||
el-form-item(style="margin-top:15px")
|
||||
el-button(native-type="submit" type="primary" :loading="loginForm.loading" style="width:100%") {{ $t("view.login.login") }}
|
||||
el-button(type="primary" @click="openExternalLink('https://vrchat.com/register')" :loading="loginForm.loading" style="width:100%") {{ $t("view.login.register") }}
|
||||
.x-login
|
||||
div(style="position:fixed; top: 0; left: 0; margin:5px")
|
||||
el-button(type="default" @click="showVRCXUpdateDialog" size="mini" icon="el-icon-download" circle)
|
||||
|
||||
div.x-login-form-container
|
||||
div
|
||||
h2(style="font-weight:bold;text-align:center;margin:0") {{ $t("view.login.login") }}
|
||||
el-form(ref="loginForm" :model="loginForm" :rules="loginForm.rules" @submit.native.prevent="login()")
|
||||
el-form-item(:label="$t('view.login.field.username')" prop="username" required)
|
||||
el-input(v-model="loginForm.username" name="username" :placeholder="$t('view.login.field.username')" clearable)
|
||||
el-form-item(:label="$t('view.login.field.password')" prop="password" required style="margin-top:10px")
|
||||
el-input(type="password" v-model="loginForm.password" name="password" :placeholder="$t('view.login.field.password')" clearable show-password)
|
||||
el-checkbox(v-model="loginForm.saveCredentials" style="margin-top:15px") {{ $t("view.login.field.saveCredentials") }}
|
||||
el-checkbox(v-model="enableCustomEndpoint" @change="toggleCustomEndpoint" style="margin-top:10px") {{ $t("view.login.field.devEndpoint") }}
|
||||
el-form-item(v-if="enableCustomEndpoint" :label="$t('view.login.field.endpoint')" prop="endpoint" style="margin-top:10px")
|
||||
el-input(v-model="loginForm.endpoint" name="endpoint" :placeholder="API.endpointDomainVrchat" clearable)
|
||||
el-form-item(v-if="enableCustomEndpoint" :label="$t('view.login.field.websocket')" prop="endpoint" style="margin-top:10px")
|
||||
el-input(v-model="loginForm.websocket" name="websocket" :placeholder="API.websocketDomainVrchat" clearable)
|
||||
el-form-item(style="margin-top:15px")
|
||||
el-button(native-type="submit" type="primary" :loading="loginForm.loading" style="width:100%") {{ $t("view.login.login") }}
|
||||
el-button(type="primary" @click="openExternalLink('https://vrchat.com/register')" :loading="loginForm.loading" style="width:100%") {{ $t("view.login.register") }}
|
||||
|
||||
hr.x-vertical-divider(v-if="Object.keys(loginForm.savedCredentials).length !== 0")/
|
||||
|
||||
div(v-if="Object.keys(loginForm.savedCredentials).length !== 0")
|
||||
h2(style="font-weight:bold;text-align:center;margin:0") {{ $t("view.login.savedAccounts") }}
|
||||
.x-scroll-wrapper(style="margin-top:10px")
|
||||
.x-saved-account-list
|
||||
.x-friend-item(v-for="user in loginForm.savedCredentials" :key="user.user.id" @click="relogin(user)")
|
||||
.avatar
|
||||
img(v-lazy="userImage(user.user)")
|
||||
.detail
|
||||
span.name(v-text="user.user.displayName")
|
||||
span.extra(v-text="user.user.username")
|
||||
span.extra(v-text="user.loginParmas.endpoint")
|
||||
el-button(type="default" @click="deleteSavedLogin(user.user.id)" size="mini" icon="el-icon-delete" circle)
|
||||
|
||||
div.x-legal-notice-container
|
||||
div(style="text-align:center;font-size:12px")
|
||||
p #[a.x-link(@click="openExternalLink('https://vrchat.com/home/password')") {{ $t("view.login.forgotPassword") }}]
|
||||
p © 2019-2022 #[a.x-link(@click="openExternalLink('https://github.com/pypy-vrc')") pypy] (mina#5656) & #[a.x-link(@click="openExternalLink('https://github.com/Natsumi-sama')") Natsumi]
|
||||
|
||||
Reference in New Issue
Block a user