noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made eye icon on login/register functional

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-14 22:05:12 +02:00
parent 8b1efca7b8
commit b5c222cc05
3 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/screens/Login.vue
View File

@ -15,8 +15,8 @@
<div class="w-full grid gap-3 relative">
<input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<div class="relative">
<input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" type="password" name="password" placeholder="Password" required />
<button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
<input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
<button @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
</div>
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
</div>
@ -41,8 +41,8 @@
<div class="w-full grid gap-3 relative">
<input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<div class="relative">
<input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" type="password" name="password" placeholder="Password" required />
<button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
<input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
<button @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
</div>
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
</div>
@ -76,6 +76,8 @@ const username = ref('')
const password = ref('')
const switchForm = ref('login')
const loginError = ref('')
const showPassword = ref(false)
// automatic login because of development
onMounted(async () => {
const token = useCookies().get('token')