feat: Create authorization
This commit is contained in:
306
src/views/RegisterView.vue
Normal file
306
src/views/RegisterView.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="register-box q-col-gutter-sm">
|
||||
<div class="text-h3 text-center row">
|
||||
<img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
|
||||
</div>
|
||||
|
||||
<h1 class="text-h5 text-center text-white q-mb-md">Create Account</h1>
|
||||
|
||||
<q-form @submit.prevent="onSubmit"
|
||||
class="q-gutter-md row justify-center"
|
||||
style="width: 100%">
|
||||
|
||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
||||
<q-input
|
||||
style="width: 100%"
|
||||
filled
|
||||
dark
|
||||
label-color="white"
|
||||
color="white"
|
||||
v-model="username"
|
||||
label="Username *"
|
||||
:error="!!errorMessage"
|
||||
:error-message="errorMessage"
|
||||
|
||||
lazy-rules
|
||||
:rules="[
|
||||
val => !!val && val.trim().length > 0 || 'Username is required',
|
||||
val => val && val.trim().length >= 3 || 'Username must be at least 3 characters',
|
||||
val => val && val.trim().length <= 30 || 'Username must be less than 30 characters',
|
||||
val => /^[a-zA-Z0-9_-]+$/.test(val) || 'Username can only contain letters, numbers, underscores, and hyphens'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
||||
<q-input
|
||||
style="width: 100%"
|
||||
filled
|
||||
dark
|
||||
type="password"
|
||||
label-color="white"
|
||||
color="white"
|
||||
v-model="password"
|
||||
label="Password *"
|
||||
:error="!!errorMessage"
|
||||
:error-message="errorMessage"
|
||||
|
||||
lazy-rules
|
||||
:rules="[
|
||||
val => !!val || 'Password is required',
|
||||
val => val && val.length >= 6 || 'Password must be at least 6 characters'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm" style="width: 100%">
|
||||
<q-input
|
||||
style="width: 100%"
|
||||
filled
|
||||
dark
|
||||
type="password"
|
||||
label-color="white"
|
||||
color="white"
|
||||
v-model="confirmPassword"
|
||||
label="Confirm Password *"
|
||||
:error="!!errorMessage"
|
||||
:error-message="errorMessage"
|
||||
|
||||
lazy-rules
|
||||
:rules="[
|
||||
val => !!val || 'Password confirmation is required',
|
||||
val => val === password || 'Passwords do not match'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
<q-btn type="submit" label="Register" push color="dark" :loading="inProgress" />
|
||||
</div>
|
||||
|
||||
<div class="row justify-center q-mt-md">
|
||||
<div class="text-center">
|
||||
<p class="text-white text-caption">Or register with:</p>
|
||||
<div class="row q-gutter-sm justify-center">
|
||||
<q-btn
|
||||
@click="loginWithProvider('discord')"
|
||||
color="#5865F2"
|
||||
text-color="white"
|
||||
icon="mdi-discord"
|
||||
label="Discord"
|
||||
outline
|
||||
size="sm"
|
||||
/>
|
||||
<q-btn
|
||||
@click="loginWithProvider('keycloak')"
|
||||
color="#0088CC"
|
||||
text-color="white"
|
||||
icon="mdi-key"
|
||||
label="Keycloak"
|
||||
outline
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
<q-btn
|
||||
flat
|
||||
color="white"
|
||||
label="Already have an account? Login"
|
||||
@click="goToLogin"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
<vue-particles
|
||||
id="particles-js"
|
||||
:options='options'
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useQuasar } from 'quasar'
|
||||
import { ref } from 'vue'
|
||||
import axios from "axios"
|
||||
import router from "@/router"
|
||||
|
||||
const api = window?.__RUNTIME_CONFIG__?.API_URL
|
||||
const $q = useQuasar()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const inProgress = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (inProgress.value) return
|
||||
|
||||
inProgress.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const response = await axios.post(`${api}/register`, {
|
||||
username: username.value.trim(),
|
||||
password: password.value
|
||||
})
|
||||
|
||||
if (response.status === 201) {
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Registration successful! Please login.',
|
||||
position: 'top'
|
||||
})
|
||||
router.push('/login')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response?.status === 409) {
|
||||
errorMessage.value = 'Username already taken'
|
||||
} else if (error.response?.status === 400) {
|
||||
errorMessage.value = error.response.data?.message || 'Invalid input'
|
||||
} else {
|
||||
errorMessage.value = 'Registration failed. Please try again.'
|
||||
}
|
||||
} finally {
|
||||
inProgress.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const goToLogin = () => {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
const loginWithProvider = (provider: string) => {
|
||||
window.location.href = `${api}/auth/${provider}`
|
||||
}
|
||||
|
||||
const options = {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"sides": 5
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": false,
|
||||
"animation": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"minimumValue": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"animation": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"minimumValue": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"links": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"outModes": {
|
||||
"default": "out"
|
||||
},
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotate": {
|
||||
"x": 600,
|
||||
"y": 1200
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detectsOn": "canvas",
|
||||
"events": {
|
||||
"onHover": {
|
||||
"enable": false,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onClick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"links": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"quantity": 4
|
||||
},
|
||||
"remove": {
|
||||
"quantity": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"detectRetina": true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.register-box {
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 1rem;
|
||||
z-index: 2;
|
||||
background-color: var(--color-background);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user