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

add make login page functional using federation layer and enforce login in router

Browse source
This commit is contained in:
j3d1 2024-04-08 20:58:44 +02:00
parent 8d64a3c528
commit c49a40df01
5 changed files with 111 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/BaseLayout.vue
View file

@ -6,6 +6,11 @@
<a class="sidebar-toggle d-flex" @click="toggleSidebar">
<i class="hamburger align-self-center"></i>
</a>
<div class="navbar-collapse collapse">
<ul class="navbar-nav navbar-align">
<UserDropdown/>
</ul>
</div>
</nav>
<slot></slot>
<Footer/>
@ -14,12 +19,15 @@
</template>
<script>
/* global closeAllDropdowns */
import Footer from "@/components/Footer.vue";
import Sidebar from "@/components/Sidebar.vue";
import UserDropdown from "@/components/UserDropdown.vue";
export default {
name: 'BaseLayout',
components: {
UserDropdown,
Footer,
Sidebar
},
@ -68,6 +76,10 @@ export default {
box-shadow: 0 0 2rem var(--bs-shadow)
}
.navbar-align {
margin-left: auto;
}
.navbar-bg {
background: var(--bs-white);
}

47
frontend/src/components/UserDropdown.vue Normal file
View file

@ -0,0 +1,47 @@
<template>
<li class="nav-item dropdown">
<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" @click="toggleDropdown">
<i class="align-middle" data-feather="settings"></i>
<b-icon-person class="bi-valign-middle"></b-icon-person>
</a>
<a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" @click="toggleDropdown">
<span class="text-dark">
{{ username }}
</span>
</a>
<div class="dropdown-menu dropdown-menu-right" id="userDropdown">
<a class="dropdown-item" href="#" @click="logout"> Log out</a>
</div>
</li>
</template>
<script>
import * as BIcons from 'bootstrap-icons-vue';
import {mapMutations, mapState} from "vuex";
export default {
name: "UserDropdown",
components: {
...BIcons
},
methods: {
...mapMutations(['logout']),
toggleDropdown() {
closeAllDropdowns();
document.getElementById("userDropdown").classList.toggle("show");
}
},
computed: {
...mapState(['user']),
username() {
return this.user;
},
}
}
</script>
<style scoped>
</style>

3
frontend/src/router.js
View file

@ -2,6 +2,7 @@ import {createRouter, createWebHistory} from 'vue-router'
import Index from '@/views/Index.vue';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';
import store from '@/store';
const routes = [
@ -20,7 +21,7 @@ const router = createRouter({
router.beforeEach((to/*, from*/) => {
// instead of having to check every route record with
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth && false) {
if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
// this route requires auth, check if logged in
// if not, redirect to login page.
console.log("Not logged in, redirecting to login page")

28
frontend/src/views/Login.vue
View file

@ -24,7 +24,9 @@
<label class="form-label">Username</label>
<input class="form-control form-control-lg" type="text"
name="username" placeholder="Enter your username"
:class="errors.username?['is-invalid']:[]"
v-model="username"/>
<div class="invalid-feedback">{{ errors.username }}</div>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
@ -65,6 +67,7 @@
</template>
<script>
import {mapActions, mapMutations} from 'vuex';
import router from "@/router";
export default {
@ -74,15 +77,15 @@ export default {
msg: 'Welcome to ' + location.hostname,
username: '',
password: '',
remember: false
remember: false,
errors: {
username: '',
}
}
},
methods: {
setRemember(remember) {
},
login(data) {
return true;
},
...mapActions(['login']),
...mapMutations(['setRemember']),
async do_login(e) {
e.preventDefault();
if (await this.login({username: this.username, password: this.password, remember: this.remember})) {
@ -92,11 +95,24 @@ export default {
await router.push({path: '/'});
}
} else {
if (!this.username.includes('@')) {
this.errors.username = 'Username should be in the form of user@domain';
}
this.msg = 'Invalid username or password';
}
},
},
mounted() {
if (this.$route.query.redirect) {
this.msg = 'You must be logged in to access that page';
}
const user = localStorage.getItem('user');
if (user) {
this.username = user;
}
}
}
</script>

50
frontend/src/views/Register.vue
View file

@ -44,6 +44,7 @@
<div :class="errors.email?['mb-3','is-invalid']:['mb-3']">
<label class="form-label">Email</label>
<input class="form-control form-control-lg" type="email"
:class="errors.email?['is-invalid']:[]"
v-model="form.email" placeholder="Enter your email"/>
<div class="invalid-feedback">{{ errors.email }}</div>
</div>
@ -51,6 +52,7 @@
<div :class="errors.password?['mb-3','is-invalid']:['mb-3']">
<label class="form-label">Password</label>
<input class="form-control form-control-lg" type="password"
:class="errors.password?['is-invalid']:[]"
v-model="form.password" placeholder="Enter your password"/>
<div class="invalid-feedback">{{ errors.password }}</div>
</div>
@ -58,6 +60,7 @@
<div :class="errors.password2?['mb-3','is-invalid']:['mb-3']">
<label class="form-label">Password Check</label>
<input class="form-control form-control-lg" type="password"
:class="errors.password2?['is-invalid']:[]"
v-model="password2" placeholder="Enter your password again"/>
<div class="invalid-feedback">{{ errors.password2 }}</div>
</div>
@ -86,6 +89,10 @@
</template>
<script>
import {mapActions} from 'vuex';
import {ServerSet, createNullAuth} from '../federation';
import NeighborsCache from '../neigbors';
export default {
name: 'Register',
data() {
@ -109,6 +116,7 @@ export default {
}
},
methods: {
...mapActions(['lookupServer']),
do_register() {
console.log('do_register');
console.log(this.form);
@ -118,36 +126,34 @@ export default {
} else {
this.errors.password2 = null;
}
fetch('/auth/register/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(this.form)
})
.then(response => response.json())
.then(data => {
if (data.errors) {
console.error('Error:', data.errors);
this.errors = data.errors;
const user = this.form.username + '@' + this.form.domain;
var unreachable = new NeighborsCache();
var nullAuth = createNullAuth({})
this.lookupServer({username: user}).then(servers => new ServerSet(servers, unreachable))
.then(set => set.post(nullAuth, '/auth/register/', this.form))
.then(response => {
if (response.errors) {
console.error('Error:', response.errors);
this.errors = response.errors;
return;
}
console.log('Success:', data);
console.log('Success:', response);
this.msg = 'Success';
localStorage.setItem('user', user);
this.$router.push('/login');
})
.catch((error) => {
console.error('Error:', error);
this.msg = 'Error';
});
}
},
mounted() {
fetch('/api/domains/')
.then(response => response.json())
.then(data => {
this.domains = data;
});
try {
fetch('/local/domains')
.then(response => response.json())
.then(data => {
this.domains = data;
});
} catch (e) {
console.error('Error:', e);
}
}
}
</script>