MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-21 15:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve login page ui

Browse Source
This commit is contained in:
pa
2026-03-12 23:24:53 +09:00
parent e817d7392f
commit 0b95d4f9a9
1 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/Login/Login.vue
View File

@@ -67,6 +67,7 @@
:placeholder="t('view.login.field.password')" :placeholder="t('view.login.field.password')"
:aria-invalid="!!errors.length" :aria-invalid="!!errors.length"
clearable clearable
show-password
@update:modelValue="field.onChange" @update:modelValue="field.onChange"
@blur="field.onBlur" /> @blur="field.onBlur" />
<FieldError v-if="errors.length" :errors="errors" /> <FieldError v-if="errors.length" :errors="errors" />
@@ -74,12 +75,12 @@
</Field> </Field>
</VeeField> </VeeField>
</FieldGroup> </FieldGroup>
<label class="inline-flex items-center gap-2 mr-2 text-sm"> <label class="inline-flex items-center gap-2 mr-2 mt-3 text-sm">
<Checkbox v-model="loginForm.saveCredentials" /> <Checkbox v-model="loginForm.saveCredentials" />
<span>{{ t('view.login.field.saveCredentials') }}</span> <span>{{ t('view.login.field.saveCredentials') }}</span>
</label> </label>
<Field class="mt-2"> <Field class="mt-4">
<Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button> <Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
</Field> </Field>
</form> </form>
@@ -100,32 +101,38 @@
</h2> </h2>
<div class="x-scroll-wrapper mt-2"> <div class="x-scroll-wrapper mt-2">
<div class="x-saved-account-list"> <div class="x-saved-account-list">
<div <Item
v-for="user in savedCredentials" v-for="user in savedCredentials"
:key="user.user.id" :key="user.user.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted rounded-xs" class="cursor-pointer hover:bg-muted p-2 border-0"
@click="clickSavedLogin(user)"> @click="clickSavedLogin(user)">
<div class="relative inline-block flex-none size-9 mr-2.5"> <ItemMedia variant="image">
<img <Avatar class="rounded-full">
class="size-full rounded-full object-cover" <AvatarImage :src="userImage(user.user)" />
:src="userImage(user.user)" <AvatarFallback>
loading="lazy" /> <User class="size-5 text-muted-foreground" />
</div> </AvatarFallback>
<div class="flex-1 overflow-hidden"> </Avatar>
<span </ItemMedia>
class="block truncate font-medium leading-[18px]" <ItemContent class="min-w-0">
v-text="user.user.displayName"></span> <ItemTitle class="truncate max-w-full">{{ user.user.displayName }}</ItemTitle>
<span class="block truncate text-xs" v-text="user.user.username"></span> <ItemDescription class="truncate text-xs!">
<span class="block truncate text-xs" v-text="user.loginParams.endpoint"></span> {{ user.user.username }}
</div> </ItemDescription>
<Button <ItemDescription v-if="user.loginParams.endpoint" class="truncate text-xs!">
size="icon-sm" {{ user.loginParams.endpoint }}
variant="ghost" </ItemDescription>
class="cursor-pointer ml-2" </ItemContent>
@click.stop="clickDeleteSavedLogin(user.user.id)" <ItemActions @click.stop>
><Trash2 class="text-sm" <Button
/></Button> size="icon-sm"
</div> variant="ghost"
class="cursor-pointer rounded-full"
@click="clickDeleteSavedLogin(user.user.id)"
><Trash2 class="text-sm"
/></Button>
</ItemActions>
</Item>
</div> </div>
</div> </div>
</div> </div>
@@ -166,7 +173,9 @@
DropdownMenuTrigger DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'; import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
import { ArrowBigDownDash, Languages, Trash2 } from 'lucide-vue-next'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
import { ArrowBigDownDash, Languages, Trash2, User } from 'lucide-vue-next';
import { Field as VeeField, useForm } from 'vee-validate'; import { Field as VeeField, useForm } from 'vee-validate';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';