first commit
This commit is contained in:
165
src/pages/auth/register.vue
Normal file
165
src/pages/auth/register.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
|
||||
<template>
|
||||
<Header />
|
||||
<div class="WrapperPlain">
|
||||
<div class="container mx-auto max-w-lg text-white">
|
||||
<div class="mx-auto flex items-center justify-center ">
|
||||
<form class="bg-neutral rounded-md px-8 pt-6 pb-8 mb-4 mt-4 w-full" method="POST" @submit.prevent="onSubmit">
|
||||
<div class="mb-4 text-center text-[28px] ">Register</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
|
||||
<input v-model="registerForm.username" class="rounded w-full py-2 px-3 input-primary text-black" id="username"
|
||||
type="text" placeholder="Login Username" />
|
||||
<span v-if="v$.registerForm.username.$error" class="text-red-600 text-center">
|
||||
{{ v$.registerForm.username.$errors[0].$message }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-white text-sm font-bold mb-2" for="username">Email</label>
|
||||
<input v-model="registerForm.email" class="rounded w-full py-2 px-3 input-primary text-black" id="email"
|
||||
type="text" placeholder="Email" />
|
||||
<span v-if="v$.registerForm.email.$error" class="text-red-600 text-center">
|
||||
{{ v$.registerForm.email.$errors[0].$message }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-white text-sm font-bold mb-2" for="password">Password</label>
|
||||
<input v-model="registerForm.password" class="rounded w-full py-2 px-3 input-primary text-black" id="password"
|
||||
type="password" autocomplete="off" placeholder="Password" />
|
||||
<span v-if="v$.registerForm.password.$error" class="text-red-600 text-center">
|
||||
{{ v$.registerForm.password.$errors[0].$message }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-white text-sm font-bold mb-2" for="password_confirm">Confirm Password</label>
|
||||
<input v-model="registerForm.password_confirm" class="rounded w-full py-2 px-3 input-primary text-black"
|
||||
id="password" type="password" autocomplete="off" placeholder="Confirm Password" />
|
||||
<span v-if="v$.registerForm.password_confirm.$error" class="text-red-600 text-center">
|
||||
{{ v$.registerForm.password_confirm.$errors[0].$message }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<button
|
||||
class="bg-primary hover:bg-zinc-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
type="submit">
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<router-link :to="{ name: 'lostPassword' }"
|
||||
class="text-center font-bold text-sm text-blue-500 hover:text-blue-800">Forgot Password?</router-link>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center mt-5">
|
||||
<router-link :to="{ name: 'login' }"
|
||||
class="text-center font-bold text-sm text-blue-500 hover:text-blue-800">Login Here</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import axios from "axios";
|
||||
import { notify } from "@kyvg/vue3-notification";
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, email, minLength, sameAs } from "@vuelidate/validators";
|
||||
import Header from "../../layouts/headers/headernoauth.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Register",
|
||||
components: { Header },
|
||||
data () {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
isAuthenticated: false,
|
||||
|
||||
registerForm: {
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
password_confirm: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
validations () {
|
||||
return {
|
||||
registerForm: {
|
||||
password: { required, minLength: minLength(6) },
|
||||
username: { required, minLength: minLength(6) },
|
||||
email: { email, required },
|
||||
password_confirm: {
|
||||
required,
|
||||
minLength: minLength(6),
|
||||
sameAs: sameAs(this.registerForm.password),
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit () {
|
||||
const payLoad = {
|
||||
username: this.registerForm.username,
|
||||
password: this.registerForm.password,
|
||||
email: this.registerForm.email,
|
||||
};
|
||||
this.v$.$validate(); // checks all inputs
|
||||
if (this.v$.$invalid) {
|
||||
notify({
|
||||
title: "Authorization",
|
||||
text: "Form Failure; Fields must be filled our correctly.",
|
||||
type: "error",
|
||||
});
|
||||
} else {
|
||||
this.Register(payLoad);
|
||||
}
|
||||
},
|
||||
Register (payLoad: {
|
||||
username: string;
|
||||
password: string;
|
||||
email: string;
|
||||
|
||||
}) {
|
||||
let path = import.meta.env.VITE_BASE_URL + "/auth/register";
|
||||
axios({
|
||||
method: "post",
|
||||
url: path,
|
||||
data: payLoad,
|
||||
withCredentials: true,
|
||||
})
|
||||
.then((response:any) => {
|
||||
console.log(response.data)
|
||||
if (response.data.error) {
|
||||
notify({
|
||||
title: "Authorization",
|
||||
text: response.data.error,
|
||||
type: "error",
|
||||
});
|
||||
};
|
||||
|
||||
if (response.data.ok) {
|
||||
|
||||
localStorage.setItem("auth_user", response.data.user);
|
||||
localStorage.setItem("auth_token", response.data.token);
|
||||
|
||||
this.$router.push({ name: "home" });
|
||||
notify({
|
||||
title: "Authorization",
|
||||
text: "Success",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user