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

stash

Browse source
This commit is contained in:
j3d1 2023-05-11 12:30:57 +02:00
parent d21f4a331b
commit bbbf15cfb3
5 changed files with 130 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,34 +19,51 @@
<div class="card">
<div class="card-body">
<div class="m-sm-4">
<form role="form" method="post" action="">
<!--{% csrf_token %}-->
<div class="mb-3">
<form role="form" method="post" @submit.prevent="do_register">
<div :class="errors.username||errors.domain?['mb-3','is-invalid']:['mb-3']">
<label class="form-label">Username</label>
<input class="form-control form-control-lg" type="text"
name="username" placeholder="Enter your username"/>
<div class="input-group">
<input class="form-control form-control-lg"
type="text" v-model="form.username" id="validationCustomUsername"
placeholder="Enter your username" required/>
<div class="input-group-prepend">
<span class="input-group-text form-control form-control-lg">@</span>
</div>
<select class="form-control form-control-lg"
id="exampleFormControlSelect1"
placeholder="Domain" v-model="form.domain" required>
<option v-for="domain in domains">{{ domain }}</option>
</select>
</div>
<div class="invalid-feedback">
{{ errors.username }}{{ errors.domain }}
</div>
</div>
<span class="text-error">{{ form.username.errors }}</span>
<div class="mb-3">
<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"
name="email" placeholder="Enter your email"/>
v-model="form.email" placeholder="Enter your email"/>
<div class="invalid-feedback">{{ errors.email }}</div>
</div>
<span class="text-error">{{ form.email.errors }}</span>
<div class="mb-3">
<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"
name="password1" placeholder="Enter your password"/>
v-model="form.password" placeholder="Enter your password"/>
<div class="invalid-feedback">{{ errors.password }}</div>
</div>
<span class="text-error">{{ form.password1.errors }}</span>
<div class="mb-3">
<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"
name="password2" placeholder="Enter your password again"/>
v-model="password2" placeholder="Enter your password again"/>
<div class="invalid-feedback">{{ errors.password2 }}</div>
</div>
<span class="text-error">{{ form.password2.errors }}</span>
<div class="text-center mt-3">
<button type="submit" name="register" class="btn btn-lg btn-primary">
<button type="submit" class="btn btn-lg btn-primary">
Register
</button>
</div>
@ -54,7 +71,8 @@
<br/>
<div class="text-center">
<p class="mb-0 text-muted">
Already have an account? <router-link to="/login">Login</router-link>
Already have an account?
<router-link to="/login">Login</router-link>
</p>
</div>
</div>
@ -73,16 +91,73 @@ export default {
data() {
return {
msg: 'Register',
password2: '',
form: {
username: '',
domain: '',
email: '',
password1: '',
password2: '',}
password: '',
},
errors: {
username: null,
domain: null,
email: null,
password: null,
password2: null,
},
domains: []
}
},
methods: {
do_register() {
console.log('do_register');
console.log(this.form);
if (this.form.password !== this.password2) {
this.errors.password2 = 'Passwords do not match';
return;
} 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;
return;
}
console.log('Success:', data);
this.msg = 'Success';
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;
});
}
}
</script>
<style scoped>
.is-invalid input, .is-invalid select {
border: 1px solid var(--bs-danger);
}
.is-invalid .invalid-feedback {
display: block;
}
</style>