mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 22:36:05 +02:00
refactor: dialogs (#1224)
* refactor: dialogs * fix: storeAvatarImage * FriendLog.vue * FriendLog.vue * FriendLog.vue * GameLog.vue * fix: next day button jumping to the wrong date * sync master * fix: launchGame * Notification.vue * Feed.vue * Search.vue * Profile.vue * PlayerList.vue * Login.vue * utils * update dialog * del gameLog.pug * fix * fix: group role cannot be displayed currently * fix: "Hide Friends in Same Instance" hides players in unrelated private instances (#1210) * fix * fix: "Hide Friends in Same Instance" does not work when "Split Favorite Friends" is enabled * fix Notification.vue message * fix: deleteFavoriteNoConfirm * fix: feed status style * fix: infinite loading when deleting note * fix: private players will not be hidden when 'Hide Friends in Same Instance', and 'Hide Friends in Same Instance' will not work when 'Split Favorite Friends'
This commit is contained in:
pa
GitHub
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div v-loading="loginForm.loading" class="x-login-container">
|
||||
<div class="x-login">
|
||||
<div style="position: fixed; top: 0; left: 0; margin: 5px">
|
||||
<el-tooltip placement="top" :content="t('view.login.updater')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="default"
|
||||
size="mini"
|
||||
icon="el-icon-download"
|
||||
circle
|
||||
@click="showVRCXUpdateDialog"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="top" :content="t('view.login.proxy_settings')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="default"
|
||||
size="mini"
|
||||
icon="el-icon-connection"
|
||||
style="margin-left: 5px"
|
||||
circle
|
||||
@click="promptProxySettings"></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="x-login-form-container">
|
||||
<div>
|
||||
<h2 style="font-weight: bold; text-align: center; margin: 0">{{ t('view.login.login') }}</h2>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
: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-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('view.login.field.password')"
|
||||
prop="password"
|
||||
required
|
||||
style="margin-top: 10px">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:placeholder="t('view.login.field.password')"
|
||||
clearable
|
||||
show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.saveCredentials" style="margin-top: 15px">{{
|
||||
t('view.login.field.saveCredentials')
|
||||
}}</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="enableCustomEndpoint"
|
||||
style="margin-top: 10px"
|
||||
@change="toggleCustomEndpoint"
|
||||
>{{ t('view.login.field.devEndpoint') }}</el-checkbox
|
||||
>
|
||||
<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-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="enableCustomEndpoint"
|
||||
:label="t('view.login.field.websocket')"
|
||||
prop="websocket"
|
||||
style="margin-top: 10px">
|
||||
<el-input
|
||||
v-model="loginForm.websocket"
|
||||
name="websocket"
|
||||
:placeholder="API.websocketDomainVrchat"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: 15px">
|
||||
<el-button native-type="submit" type="primary" style="width: 100%">{{
|
||||
t('view.login.login')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
@click="openExternalLink('https://vrchat.com/register')"
|
||||
>{{ t('view.login.register') }}</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<hr v-if="Object.keys(loginForm.savedCredentials).length !== 0" class="x-vertical-divider" />
|
||||
|
||||
<div v-if="Object.keys(loginForm.savedCredentials).length !== 0">
|
||||
<h2 style="font-weight: bold; text-align: center; margin: 0">
|
||||
{{ t('view.login.savedAccounts') }}
|
||||
</h2>
|
||||
<div class="x-scroll-wrapper" style="margin-top: 10px">
|
||||
<div class="x-saved-account-list">
|
||||
<div
|
||||
v-for="user in loginForm.savedCredentials"
|
||||
:key="user.user.id"
|
||||
class="x-friend-item"
|
||||
@click="relogin(user)">
|
||||
<div class="avatar">
|
||||
<img v-lazy="userImage(user.user)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="user.user.displayName"></span>
|
||||
<span class="extra" v-text="user.user.username"></span>
|
||||
<span class="extra" v-text="user.loginParmas.endpoint"></span>
|
||||
</div>
|
||||
<el-button
|
||||
type="default"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
style="margin-left: 10px"
|
||||
circle
|
||||
@click.stop="deleteSavedLogin(user.user.id)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-legal-notice-container">
|
||||
<div style="text-align: center; font-size: 12px">
|
||||
<p>
|
||||
<a class="x-link" @click="openExternalLink('https://vrchat.com/home/password')">{{
|
||||
t('view.login.forgotPassword')
|
||||
}}</a>
|
||||
</p>
|
||||
<p>
|
||||
© 2019-2025
|
||||
<a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &
|
||||
<a class="x-link" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
|
||||
</p>
|
||||
<p>{{ t('view.settings.general.legal_notice.info') }}</p>
|
||||
<p>{{ t('view.settings.general.legal_notice.disclaimer1') }}</p>
|
||||
<p>{{ t('view.settings.general.legal_notice.disclaimer2') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LoginPage'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { inject, onBeforeUnmount, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n-bridge';
|
||||
const { t } = useI18n();
|
||||
|
||||
const API = inject('API');
|
||||
const openExternalLink = inject('openExternalLink');
|
||||
const userImage = inject('userImage');
|
||||
|
||||
defineProps({
|
||||
hideTooltips: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loginForm: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
enableCustomEndpoint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'showVRCXUpdateDialog',
|
||||
'promptProxySettings',
|
||||
'toggleCustomEndpoint',
|
||||
'deleteSavedLogin',
|
||||
'relogin',
|
||||
'login'
|
||||
]);
|
||||
|
||||
const loginFormRef = ref(null);
|
||||
|
||||
function showVRCXUpdateDialog() {
|
||||
emit('showVRCXUpdateDialog');
|
||||
}
|
||||
|
||||
function promptProxySettings() {
|
||||
emit('promptProxySettings');
|
||||
}
|
||||
|
||||
function toggleCustomEndpoint(...args) {
|
||||
emit('toggleCustomEndpoint', args);
|
||||
}
|
||||
|
||||
function deleteSavedLogin(userId) {
|
||||
emit('deleteSavedLogin', userId);
|
||||
}
|
||||
|
||||
function relogin(user) {
|
||||
emit('relogin', user);
|
||||
}
|
||||
|
||||
function login() {
|
||||
if (loginFormRef.value) {
|
||||
loginFormRef.value.validate((valid) => {
|
||||
valid && emit('login');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Because v-if actually it is not required
|
||||
if (loginFormRef.value) {
|
||||
loginFormRef.value.resetFields();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user