forked from DebaucheryLibrarian/traxxx
Added user sign up and login.
This commit is contained in:
DebaucheryLibrarian
116
assets/components/auth/login.vue
Normal file
116
assets/components/auth/login.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<form
|
||||
class="login"
|
||||
@submit.prevent="login"
|
||||
>
|
||||
<div
|
||||
v-if="error"
|
||||
class="feedback error"
|
||||
>{{ error }}</div>
|
||||
|
||||
<div
|
||||
v-if="success"
|
||||
class="feedback success"
|
||||
>Login successful, redirecting</div>
|
||||
|
||||
<template v-else>
|
||||
<input
|
||||
v-model="username"
|
||||
placeholder="Username or e-mail"
|
||||
type="text"
|
||||
class="input"
|
||||
required
|
||||
>
|
||||
|
||||
<input
|
||||
v-model="password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
class="input"
|
||||
required
|
||||
>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="button button-primary"
|
||||
>Log in</button>
|
||||
|
||||
<router-link
|
||||
to="/signup"
|
||||
class="link link-external signup"
|
||||
>Sign up</router-link>
|
||||
</template>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
async function login() {
|
||||
this.error = null;
|
||||
this.success = false;
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('login', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
});
|
||||
|
||||
this.success = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.$router.replace(this.$route.query.ref || { name: 'home' });
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: null,
|
||||
password: null,
|
||||
success: false,
|
||||
error: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
width: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 0 .25rem 0;
|
||||
}
|
||||
|
||||
.signup {
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
126
assets/components/auth/signup.vue
Normal file
126
assets/components/auth/signup.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<form
|
||||
class="signup"
|
||||
@submit.prevent="signup"
|
||||
>
|
||||
<div
|
||||
v-if="error"
|
||||
class="feedback error"
|
||||
>{{ error }}</div>
|
||||
|
||||
<div
|
||||
v-if="success"
|
||||
class="feedback success"
|
||||
>Signup successful, redirecting</div>
|
||||
|
||||
<template v-else>
|
||||
<input
|
||||
v-model="username"
|
||||
placeholder="Username"
|
||||
type="text"
|
||||
class="input"
|
||||
required
|
||||
>
|
||||
|
||||
<input
|
||||
v-model="email"
|
||||
placeholder="E-mail"
|
||||
type="email"
|
||||
class="input"
|
||||
required
|
||||
>
|
||||
|
||||
<input
|
||||
v-model="password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
class="input"
|
||||
required
|
||||
>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="button button-primary"
|
||||
>Sign up</button>
|
||||
|
||||
<router-link
|
||||
to="/login"
|
||||
class="link link-external login"
|
||||
>Log in</router-link>
|
||||
</template>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
async function signup() {
|
||||
this.error = null;
|
||||
this.success = false;
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('signup', {
|
||||
username: this.username,
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
});
|
||||
|
||||
this.success = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.$router.replace(this.$route.query.ref || { name: 'home' });
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
this.error = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: null,
|
||||
email: null,
|
||||
password: null,
|
||||
success: false,
|
||||
error: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
signup,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.signup {
|
||||
width: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 0 .25rem 0;
|
||||
}
|
||||
|
||||
.login {
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -95,11 +95,26 @@
|
||||
<template v-slot:tooltip>
|
||||
<div class="menu">
|
||||
<ul class="menu-items noselect">
|
||||
<li
|
||||
class="menu-item disabled"
|
||||
<router-link
|
||||
v-if="!me"
|
||||
to="/login"
|
||||
class="menu-item"
|
||||
@click.stop
|
||||
>
|
||||
<Icon icon="enter2" />Sign in
|
||||
<Icon icon="enter2" />Log in
|
||||
</router-link>
|
||||
|
||||
<li
|
||||
v-if="me"
|
||||
class="menu-username"
|
||||
>{{ me.username }}</li>
|
||||
|
||||
<li
|
||||
v-if="me"
|
||||
class="menu-item"
|
||||
@click.stop="$store.dispatch('logout')"
|
||||
>
|
||||
<Icon icon="enter2" />Log out
|
||||
</li>
|
||||
|
||||
<li
|
||||
@@ -200,6 +215,10 @@ function theme(state) {
|
||||
return state.ui.theme;
|
||||
}
|
||||
|
||||
function me(state) {
|
||||
return state.auth.user;
|
||||
}
|
||||
|
||||
function setTheme(newTheme) {
|
||||
this.$store.dispatch('setTheme', newTheme);
|
||||
}
|
||||
@@ -224,6 +243,7 @@ export default {
|
||||
...mapState({
|
||||
sfw,
|
||||
theme,
|
||||
me,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
@@ -403,6 +423,8 @@ export default {
|
||||
.menu-item {
|
||||
display: flex;
|
||||
padding: .75rem 1rem .75rem .75rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
fill: var(--darken);
|
||||
@@ -428,6 +450,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.menu-username {
|
||||
font-weight: bold;
|
||||
color: var(--shadow-strong);
|
||||
font-size: .9rem;
|
||||
padding: .75rem 1rem;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-compact {
|
||||
display: none;
|
||||
height: 100%;
|
||||
|
||||
Reference in New Issue
Block a user