generated from moevm/nsql-clean-tempate
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
patch: Добавил формы регистрации и логина
- Loading branch information
1 parent
d489011
commit 7c327b5
Showing
6 changed files
with
201 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
<template> | ||
<form @submit.prevent="handleLogin"> | ||
<h2>Login</h2> | ||
|
||
<div> | ||
<label>Email:</label> | ||
<input type="email" v-model="email" required /> | ||
</div> | ||
|
||
<div> | ||
<label>Password:</label> | ||
<input type="password" v-model="password" required /> | ||
</div> | ||
|
||
<button type="submit">Login</button> | ||
<p v-if="errorMessage" class="error">{{ errorMessage }}</p> | ||
</form> | ||
</template> | ||
|
||
<script> | ||
import { ref } from 'vue'; | ||
export default { | ||
setup() { | ||
const email = ref(''); | ||
const password = ref(''); | ||
const errorMessage = ref(''); | ||
const handleLogin = () => { | ||
if (!email.value || !password.value) { | ||
errorMessage.value = 'Please fill out all fields!'; | ||
return; | ||
} | ||
errorMessage.value = ''; | ||
console.log({ email: email.value, password: password.value }); | ||
// Call API or handle login logic here | ||
}; | ||
return { email, password, handleLogin, errorMessage }; | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped> | ||
form { | ||
display: flex; | ||
flex-direction: column; | ||
max-width: 300px; | ||
margin: auto; | ||
} | ||
div { | ||
margin-bottom: 10px; | ||
} | ||
label { | ||
margin-bottom: 5px; | ||
display: block; | ||
} | ||
input { | ||
padding: 8px; | ||
} | ||
button { | ||
padding: 10px; | ||
background-color: #42b983; | ||
color: white; | ||
border: none; | ||
cursor: pointer; | ||
} | ||
.error { | ||
color: red; | ||
margin-top: 10px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
<template> | ||
<form @submit.prevent="handleRegister"> | ||
<h2>Register</h2> | ||
|
||
<div> | ||
<label>Username:</label> | ||
<input type="text" v-model="username" required /> | ||
</div> | ||
|
||
<div> | ||
<label>Email:</label> | ||
<input type="email" v-model="email" required /> | ||
</div> | ||
|
||
<div> | ||
<label>Password:</label> | ||
<input type="password" v-model="password" required /> | ||
</div> | ||
|
||
<div> | ||
<label>Confirm Password:</label> | ||
<input type="password" v-model="confirmPassword" required /> | ||
</div> | ||
|
||
<button type="submit">Register</button> | ||
<p v-if="errorMessage" class="error">{{ errorMessage }}</p> | ||
</form> | ||
</template> | ||
|
||
<script> | ||
import { ref } from 'vue'; | ||
export default { | ||
setup() { | ||
const username = ref(''); | ||
const email = ref(''); | ||
const password = ref(''); | ||
const confirmPassword = ref(''); | ||
const errorMessage = ref(''); | ||
const handleRegister = () => { | ||
if (password.value !== confirmPassword.value) { | ||
errorMessage.value = 'Passwords do not match!'; | ||
return; | ||
} | ||
errorMessage.value = ''; | ||
console.log({ | ||
username: username.value, | ||
email: email.value, | ||
password: password.value, | ||
}); | ||
// Call API or handle registration logic here | ||
}; | ||
return { username, email, password, confirmPassword, handleRegister, errorMessage }; | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped> | ||
form { | ||
display: flex; | ||
flex-direction: column; | ||
max-width: 300px; | ||
margin: auto; | ||
} | ||
div { | ||
margin-bottom: 10px; | ||
} | ||
label { | ||
margin-bottom: 5px; | ||
display: block; | ||
} | ||
input { | ||
padding: 8px; | ||
} | ||
button { | ||
padding: 10px; | ||
background-color: #42b983; | ||
color: white; | ||
border: none; | ||
cursor: pointer; | ||
} | ||
.error { | ||
color: red; | ||
margin-top: 10px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<template> | ||
<LoginForm /> | ||
</template> | ||
|
||
<script> | ||
import LoginForm from '../components/LoginForm.vue'; | ||
export default { | ||
components: { LoginForm }, | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<template> | ||
<RegistrationForm /> | ||
</template> | ||
|
||
<script> | ||
import RegistrationForm from '../components/RegistrationForm.vue'; | ||
export default { | ||
components: { RegistrationForm }, | ||
}; | ||
</script> |