zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): 비밀번호 표시 토글을 SVG 아이콘으로 통일

Browse Source 
- AuthPasswordVisibilityToggle 공통 컴포넌트 추가
- signin·signup(비밀번호·확인)에 적용, 접근성 field-name 구분
- v0.0.61 문서 반영

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-11 12:37:30 +09:00
parent fd55d8af08
commit 3f7f51ff86
8 changed files with 125 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/signin.vue
View File

@@ -53,7 +53,7 @@ const submitSignIn = async () => {
<template>
<section class="auth-signin min-h-screen bg-[#0a0b0d] text-[#f5f7fa]">
<div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-center px-5 py-12 sm:px-10 lg:px-16">
<div class="w-full max-w-[430px] rounded-2xl border border-[#1a212a] bg-[#0d1116] p-5 sm:p-8">
<div class="w-full max-w-[430px] p-5 sm:p-8">
<p class="text-2xl font-semibold leading-tight">
로그인
</p>
@@ -77,17 +77,11 @@ const submitSignIn = async () => {
<div class="flex items-center rounded-[8px] border border-[#1a212a] transition-colors focus-within:border-[#2f6feb]">
<input
v-model="form.password"
class="h-10 w-full bg-transparent px-3 text-sm outline-none"
class="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
>
<button
class="px-3 text-xs text-[#9ba3af] transition-opacity hover:opacity-80"
type="button"
@click="showPassword = !showPassword"
>
{{ showPassword ? '숨기기' : '보기' }}
</button>
<AuthPasswordVisibilityToggle v-model="showPassword" />
</div>
</div>

39
pages/signup.vue
View File

@@ -29,6 +29,9 @@ const errors = reactive({
passwordConfirm: ''
})
const showSignupPassword = ref(false)
const showSignupPasswordConfirm = ref(false)
const canResend = computed(() => resendCooldown.value <= 0)
const welcomeTitle = computed(() => `Welcome to ${siteSettings.value?.title || 'AFFiNE'}`)
const welcomeDescription = computed(() => siteSettings.value?.description || 'Configure your Self Host AFFiNE with a few simple settings.')
@@ -165,7 +168,7 @@ onBeforeUnmount(() => {
<template>
<section class="auth-signup min-h-screen bg-[#0a0b0d] text-[#f5f7fa]">
<div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-start px-5 py-12 sm:px-10 sm:py-16 lg:px-16 lg:py-24">
<div class="flex min-h-[calc(100vh-6rem)] w-full max-w-[430px] flex-col rounded-2xl border border-[#1a212a] bg-[#0d1116] p-5 sm:min-h-[calc(100vh-8rem)] sm:p-8 lg:min-h-[calc(100vh-12rem)]">
<div class="flex min-h-[calc(100vh-6rem)] w-full max-w-[430px] flex-col rounded-2xl p-5 sm:min-h-[calc(100vh-8rem)] sm:p-8 lg:min-h-[calc(100vh-12rem)]">
<div>
<template v-if="currentStep === 1">
<p class="text-[32px] font-semibold leading-tight sm:text-[40px]">
@@ -215,13 +218,18 @@ onBeforeUnmount(() => {
<div class="space-y-1.5">
<label class="text-xs text-[#d8dee6]">비밀번호</label>
<input
v-model="form.password"
class="h-10 w-full rounded-[8px] border bg-transparent px-3 text-sm outline-none transition-colors"
:class="errors.password ? 'border-[#b03b43]' : 'border-[#1a212a] focus:border-[#2f6feb]'"
type="password"
autocomplete="new-password"
<div
class="flex items-center rounded-[8px] border transition-colors focus-within:border-[#2f6feb]"
:class="errors.password ? 'border-[#b03b43]' : 'border-[#1a212a]'"
>
<input
v-model="form.password"
class="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showSignupPassword ? 'text' : 'password'"
autocomplete="new-password"
>
<AuthPasswordVisibilityToggle v-model="showSignupPassword" />
</div>
<p v-if="errors.password" class="text-xs text-[#e05d67]">
{{ errors.password }}
</p>
@@ -229,13 +237,18 @@ onBeforeUnmount(() => {
<div class="space-y-1.5">
<label class="text-xs text-[#d8dee6]">비밀번호 확인</label>
<input
v-model="form.passwordConfirm"
class="h-10 w-full rounded-[8px] border bg-transparent px-3 text-sm outline-none transition-colors"
:class="errors.passwordConfirm ? 'border-[#b03b43]' : 'border-[#1a212a] focus:border-[#2f6feb]'"
type="password"
autocomplete="new-password"
<div
class="flex items-center rounded-[8px] border transition-colors focus-within:border-[#2f6feb]"
:class="errors.passwordConfirm ? 'border-[#b03b43]' : 'border-[#1a212a]'"
>
<input
v-model="form.passwordConfirm"
class="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showSignupPasswordConfirm ? 'text' : 'password'"
autocomplete="new-password"
>
<AuthPasswordVisibilityToggle v-model="showSignupPasswordConfirm" field-name="비밀번호 확인" />
</div>
<p v-if="errors.passwordConfirm" class="text-xs text-[#e05d67]">
{{ errors.passwordConfirm }}
</p>