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
Download patch file Download diff file Expand all files Collapse all files

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>