j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

frontend: add /login and /register forms

Browse source
This commit is contained in:
j3d1 2024-03-17 18:52:41 +01:00
parent bea56f101a
commit c4c49931a4
13 changed files with 3635 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

106
frontend/src/views/Login.vue Normal file
View file

@ -0,0 +1,106 @@
<template>
<div class="main d-flex w-100">
<div class="container d-flex flex-column">
<div class="row vh-100">
<div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
<div class="d-table-cell align-middle">
<div class="text-center mt-4">
<h1 class="h2">
Toolshed
</h1>
<p class="lead" v-if="msg">
{{ msg }}
</p>
<p class="lead" v-else>
Sign in to your account to continue
</p>
</div>
<div class="card">
<div class="card-body">
<div class="m-sm-4">
<form role="form" @submit.prevent="do_login">
<div class="mb-3">
<label class="form-label">Username</label>
<input class="form-control form-control-lg" type="text"
name="username" placeholder="Enter your username"
v-model="username"/>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input class="form-control form-control-lg" type="password"
name="password" placeholder="Enter your password"
v-model="password"/>
</div>
<div>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="remember-me"
name="remember-me" checked v-model="remember"
@change="setRemember(remember)">
<span class="form-check-label">
Remember me next time
</span>
</label>
</div>
<div class="text-center mt-3">
<button type="submit" name="login" class="btn btn-lg btn-primary">Login
</button>
</div>
</form>
<br/>
<div class="text-center">
<p class="mb-0 text-muted">
Don’t have an account?
<router-link to="/register">Sign up</router-link>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import router from "@/router";
export default {
name: 'Login',
data() {
return {
msg: 'Welcome to ' + location.hostname,
username: '',
password: '',
remember: false
}
},
methods: {
setRemember(remember) {
},
login(data) {
return true;
},
async do_login(e) {
e.preventDefault();
if (await this.login({username: this.username, password: this.password, remember: this.remember})) {
if (this.$route.query.redirect) {
await router.push({path: this.$route.query.redirect});
} else {
await router.push({path: '/'});
}
} else {
this.msg = 'Invalid username or password';
}
},
}
}
</script>
<style scoped>
</style>