Skip to content

Commit

Permalink
patch: Добавил формы регистрации и логина
Browse files Browse the repository at this point in the history
  • Loading branch information
danilpavlov committed Dec 10, 2024
1 parent d489011 commit 7c327b5
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 2 deletions.
2 changes: 2 additions & 0 deletions frontend/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import HelloWorld from './components/HelloWorld.vue'
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<router-link to="/login">Login</router-link>
<router-link to="/register">Register</router-link>
</nav>
</div>
</header>
Expand Down
77 changes: 77 additions & 0 deletions frontend/src/components/LoginForm.vue
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>
93 changes: 93 additions & 0 deletions frontend/src/components/RegistrationForm.vue
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>
9 changes: 7 additions & 2 deletions frontend/src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import RegisterView from '../views/RegisterView.vue';
import LoginView from '../views/LoginView.vue';


const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
Expand All @@ -17,6 +20,8 @@ const router = createRouter({
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
},
{ path: '/register', name: 'Register', component: RegisterView },
{ path: '/login', name: 'Login', component: LoginView },
],
})

Expand Down
11 changes: 11 additions & 0 deletions frontend/src/views/LoginView.vue
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>
11 changes: 11 additions & 0 deletions frontend/src/views/RegisterView.vue
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>

0 comments on commit 7c327b5

Please sign in to comment.