traxxx-web/pages/auth/login/+Page.vue

187 lines
3.1 KiB
Vue
Raw Normal View History

2024-02-29 04:08:54 +00:00
<template>
<div class="login-container">
<div v-if="user">
You are already logged in as {{ user.username }}.
<ul>
<li>
<a
:href="`/user/${user.username}`"
class="link"
>View my profile</a>
</li>
<li>
<a
:href="`/updates`"
class="link"
>Check out latest porn updates</a>
</li>
<li>
<a
:href="`/actors`"
class="link"
>Browse the hottest porn stars</a>
</li>
</ul>
</div>
<form
v-else
class="login-panel"
@submit.prevent="login"
>
<div
v-if="errorMsg"
class="error"
>{{ errorMsg }}</div>
<input
v-model="username"
placeholder="Username or e-mail"
class="input"
>
<div class="password-container">
<input
v-model="password"
:type="showPassword ? 'input' : 'password'"
placeholder="Password"
class="password input"
>
<div
class="password-show"
@click="showPassword = !showPassword"
>
<Icon
v-show="!showPassword"
icon="eye"
class="password-show"
/>
<Icon
v-show="showPassword"
icon="eye-blocked"
class="password-show"
/>
</div>
</div>
<button class="button button-submit">Log in</button>
<a
href="/signup"
class="link"
>Create an account</a>
</form>
</div>
</template>
<script setup>
import { ref, inject } from 'vue';
import { post } from '#/src/api.js';
import navigate from '#/src/navigate.js';
const pageContext = inject('pageContext');
const user = pageContext.user;
const username = ref('');
const password = ref('');
const errorMsg = ref(null);
const showPassword = ref(false);
async function login() {
errorMsg.value = null;
try {
2024-02-29 05:00:12 +00:00
const loginUser = await post('/session', {
2024-02-29 04:08:54 +00:00
username: username.value,
password: password.value,
redirect: pageContext.urlParsed.search.r,
});
2024-02-29 05:00:12 +00:00
navigate(pageContext.urlParsed.search.r ? decodeURIComponent(pageContext.urlParsed.search.r) : `/user/${loginUser.username}`, null, { redirect: true });
2024-02-29 04:08:54 +00:00
} catch (error) {
errorMsg.value = error.message;
}
}
</script>
<style scoped>
.login-container {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
background: var(--background-base-10);
}
.login-panel {
width: 20rem;
max-width: 100%;
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem;
margin: 1rem;
border-radius: .5rem;
box-shadow: 0 0 3px var(--shadow-weak-30);
background: var(--background-base);
font-size: 1rem;
.button {
justify-content: center;
}
.link {
margin-top: .5rem;
text-align: center;
}
}
.password-container {
display: flex;
position: relative;
}
.password {
flex-grow: 1;
}
.password-show {
height: 100%;
display: flex;
align-items: center;
position: absolute;
right: 0;
padding: 0 1rem 0 .5rem;
.icon {
fill: var(--shadow);
}
&:hover {
cursor: pointer;
.icon {
fill: var(--primary);
}
}
}
.error {
background: var(--error);
color: var(--text-light);
padding: .75rem 1rem;
border-radius: .25rem;
margin-bottom: .5rem;
font-size: .9rem;
font-weight: bold;
text-align: center;
}
</style>