Skip to content
Snippets Groups Projects
Commit c08a4781 authored by mcd's avatar mcd
Browse files

login form works, the state update after that almost - CORRECT COMMIT

parent 2ca73d59
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 85 additions and 195 deletions
backend/src/main/java/hu/pazmany/DocumentDto.java
+ 0
− 2
View file @ c08a4781
package hu.pazmany;
import java.time.LocalDateTime;
public class DocumentDto {
private Long id;
private String user;
......
backend/src/main/java/hu/pazmany/UserService.java deleted 100644 → 0
+ 0
− 0
View file @ 2ca73d59
frontend/src/App.vue
+ 15
− 18
View file @ c08a4781
<script setup>
import HeaderComponent from './components/header.vue'
import HeaderKomponens from '@/components/header-komponens.vue';
import IntroKomponens from "@/components/intro-komponens.vue";
import BrowseKomponens from "@/components/browse-komponens.vue";
import axios from "axios";
import { ref } from 'vue';
let isLoginFormVisible = ref(false);
// handle page switch and other top-level state based logic
const isLoggedIn = ref(false);
function toggleLoginForm() {
isLoginFormVisible.value = !isLoginFormVisible.value;
function toggleLoggedIn() {
isLoggedIn.value = !isLoggedIn.value;
}
import {ref} from "vue";
import BrowseKomponens from "@/components/browse-komponens.vue";
import axios from "axios";
const isLoginFormVisible = ref(false);
// handle page switch
const isNotLoggedIn = ref(true);
function setStatus(status){
isNotLoggedIn.value = !status;
function toggleLoginForm() {
isLoginFormVisible.value = !isLoginFormVisible.value;
}
// registers user
// register user
function registerUser(credentials, callback) {
return axios.post('http://localhost:8080/api/register', credentials)
.then(response => {
......@@ -31,7 +29,7 @@ function registerUser(credentials, callback) {
});
}
// Prepopulating the database
// prepopulating the database
registerUser({fullName: 'Gipsz Jakab', username: 'gipja', password: 'süti'}, function (res) {
console.log(res)
}).then(() => {
......@@ -61,18 +59,17 @@ function registerUser(credentials, callback) {
})
}
)
</script>
<template>
<header>
<HeaderComponent @toggle-login-form="toggleLoginForm" @status="(value) => setStatus(value)" />
<header-komponens :isLoggedIn="isLoggedIn" @toggle-login-form="toggleLoginForm" />
</header>
<div v-if="isNotLoggedIn">
<div v-if="!isLoggedIn">
<main>
<h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1>
<div>
<intro-komponens/>
<intro-komponens :isLoginFormVisible="isLoginFormVisible" @toggle-logged-in="toggleLoggedIn" />
</div>
</main>
</div>
......
frontend/src/components/TheWelcome.vue deleted 100644 → 0
+ 0
− 88
View file @ 2ca73d59
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
>Cypress Component Testing</a
>.
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
Discord server, or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also subscribe to
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
the official
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>
frontend/src/components/HelloWorld.vue → frontend/src/components/header-komponens.vue
+ 20
− 29
View file @ c08a4781
<script setup>
import LoginKomponens from "@/components/login-komponens.vue";
defineProps({
msg: {
type: String,
isLoggedIn: {
type: Boolean,
required: true
}
})
let isLoggedIn = ref(false);
let isLoginFormVisible = ref(false);
function toggleLoginForm() {
isLoginFormVisible.value = !isLoginFormVisible.value;
if (isLoggedIn.value) {
isLoggedIn.value = false;
}
}
function handleLogin(success) {
isLoggedIn.value = success;
isLoginFormVisible.value = false;
}
</script>
<template>
<div class="greetings">
<img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
<h1 class="title">{{msg}}</h1>
<h1 class="title">NoteStore</h1>
<div class="login">
<LoginKomponens @status="(value) => $emit('status', value)" />
<button @click="$emit('toggle-login-form')">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
</div>
</div>
</template>
<style scoped>
.login {
position: fixed;
right: 5%;
}
.title {
color: var(--lightest);
text-shadow: 0 0 10px var(--light);
color: lightseagreen;
}
.title:after{
......@@ -77,10 +61,14 @@ h3 {
}
.greetings {
display: grid;
display: flex;
padding: 1em;
grid-template-columns: 1fr 4fr 2fr;
align-items: center;
place-items: center flex-start;
flex-wrap: wrap;
}
.space {
width: 40%;
}
.logo {
......@@ -88,4 +76,7 @@ h3 {
}
}
</style>
.subtitle {
margin-bottom: 16px;
}
</style>
\ No newline at end of file
frontend/src/components/intro-komponens.vue
+ 7
− 10
View file @ c08a4781
......@@ -17,13 +17,11 @@ defineProps({
let isLoggedIn = ref(false);
let fullName = ref('');
function handleLogin(name) {
isLoggedIn.value = true;
fullName.value = name;
}
function handleLoginFailed() {
isLoggedIn.value = false;
function handleLogin(success, name) {
isLoggedIn.value = success;
if (success) {
fullName.value = name;
}
}
</script>
......@@ -44,8 +42,7 @@ function handleLoginFailed() {
<template #heading>Elérhetőség</template>
Az oldal használata belépésköteles.
Lépj be vagy <RegisterKomponens/>!
<LoginForm v-if="isLoginFormVisible" @login="handleLogin" @login-failed="handleLoginFailed" />
<div v-else>Welcome, {{ fullName }}!</div>
<div v-if="isLoggedIn">Welcome, {{ fullName }}!</div>
</WelcomeItem>
<WelcomeItem>
......@@ -56,5 +53,5 @@ function handleLoginFailed() {
A projekt a TechnoCool jóvoltából készült a Szoftvertechnológia alapjai tárgy keretein belül.
</WelcomeItem>
</div>
<LoginForm v-else @login="handleLogin" @login-failed="handleLoginFailed" />
<LoginForm v-else @login="handleLogin" />
</template>
\ No newline at end of file
frontend/src/components/loginform.vue 0 → 100644
+ 43
− 0
View file @ c08a4781
<script setup>
import { ref } from "vue";
import axios from 'axios';
let credentials = ref({ username: '', password: '' });
function loginUser() {
axios.post('http://localhost:8080/api/login', credentials.value)
.then(response => {
console.log(response.data);
if (!response.data["loggedIn"]) {
this.$emit('login', false, ""); // Emit login event with failure value
} else {
this.$emit('login', true, response.data["fullName"]); // Emit login event with success value and full name
}
})
.catch(error => {
console.log(error);
this.$emit('login', false, ""); // Emit login event with failure value
});
}
function submitForm() {
loginUser();
}
</script>
<template>
<div>
<h2>Jelentkezz be!</h2>
<form @submit.prevent="submitForm">
<div>
<label for="username">Felhasználónév:</label>
<input type="text" id="username" v-model="credentials.username" required>
</div>
<div>
<label for="password">Jelszó:</label>
<input type="password" id="password" v-model="credentials.password" required>
</div>
<button type="submit">Bejelentkezés</button>
</form>
</div>
</template>
\ No newline at end of file
frontend/src/components/pelda-komponens.vue deleted 100644 → 0
+ 0
− 48
View file @ 2ca73d59
<script setup>
import {ref} from "vue";
import axios from 'axios';
const isLoading = ref(true);
const aFact = ref('');
function getAFact() {
isLoading.value = true;
axios.get('https://catfact.ninja/fact').then(result => {
aFact.value = result.data.fact;
isLoading.value = false;
}).catch(error => {
console.error('cannot get data from api', error);
});
}
getAFact();
const backendStatus = ref('unknown');
function checkBackend() {
axios.get('/api/ok').then(result=>{
backendStatus.value = result.data;
}).catch(error => {
console.error('cannot get backend OK api endpoint', error);
backendStatus.value = 'error';
})
}
</script>
<template>
<div v-if="isLoading" class="loading">Loading...</div>
<template v-else>
<!-- <button @click="getAFact">Next fact</button>-->
<!-- <div class="a-fact">{{ aFact }}</div>-->
</template>
<button @click="checkBackend">Check Backend</button>
<p>Backend status is: {{backendStatus}}</p>
</template>
<style scoped>
.loading {
color: lightgray;
}
.a-fact {
font-weight: bold;
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment