diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 20d977d417b8cf1353b9688d417ebed71102ae99..10d53b47ae6f122b29fcdbbae637bce6a36176ea 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,20 +1,19 @@
<script setup>
import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-import PeldaKomponens from "@/components/pelda-komponens.vue";
-import RegisterKomponens from "@/components/register-komponens.vue";
import IntroKomponens from "@/components/intro-komponens.vue";
import {ref} from "vue";
import BrowseKomponens from "@/components/browse-komponens.vue";
import axios from "axios";
-// import loggedIn from "@/components/login-komponens.vue"
-const isNotLoggedIn = ref(true);
+
+// handle page switch
+const isNotLoggedIn = ref(true);
function setStatus(status){
isNotLoggedIn.value = !status;
}
+// registers user
function registerUser(credentials, callback) {
return axios.post('http://localhost:8080/api/register', credentials)
.then(response => {
@@ -39,8 +38,8 @@ function registerUser(credentials, callback) {
id: 1,
user: "kazso",
subject: "szofttech",
- title: "1. előadás",
- description: "tehe",
+ title: "Szoftvertechnológia: 1. előadás",
+ description: "A Szoftvertechnológia alapjai című tárgy első előadás diái. Tartalmazza a szoftverkövetelményeket, milyen alap elemei vannak, mit kell tartalmaznia.",
filepath: "1.eloadas_szoftvertechnologia_2024_v1.0.pdf"
})
}
@@ -49,8 +48,8 @@ function registerUser(credentials, callback) {
id: 2,
user: "kazso",
subject: "szofttech",
- title: "3. előadás",
- description: "tehee",
+ title: "Szoftvertechnológia: 3. előadás",
+ description: "A Szoftvertechnológia alapjai című tárgy harmadik előadás diái. Tartalmazza a szoftverfolyamatot, milyen modellek léteznek és a szoftverfolyamat szakaszait.",
filepath: "3.eloadas_szoftvertechnologia_2024_v1.0.pdf"
})
}
@@ -77,12 +76,6 @@ function registerUser(credentials, callback) {
<style scoped>
-
-.logo {
- display: block;
- margin: 0 auto 2rem;
-}
-
@media (min-width: 1024px) {
main {
@@ -90,27 +83,17 @@ function registerUser(credentials, callback) {
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
- color: lightseagreen;
+ color: var(--light);
padding: 20px;
}
header {
display: block;
line-height: 1.5;
- background-color: #224c49;
+ background-color: var(--dark);
margin: 10px 0 20px 0;
}
- .logo {
- margin: 0 2rem 0 0;
- }
-
- .wrapper {
- display: block;
- width: 100%;
- height: 20%;
- }
-
main h1 {
padding-right: 20%;
text-align: justify;
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index fe910576f25ae51364870b118ed7c440b803f881..823d49a8b3170ff9dcbe5b9f5e9b2d6119583b41 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,5 +1,15 @@
@import './base.css';
+:root {
+ --lightest: aqua;
+ --lighter: #768d90;
+ --lighttext: #b3ced1;
+ --light: lightseagreen;
+ --dark: #134946;
+ --darker: #1f2c2c;
+ --darkest: #181818;
+}
+
#app {
/*max-width: 1280px;*/
margin: 0 auto;
@@ -34,3 +44,42 @@ a,
padding: 0 2rem;
}
}
+
+.grow {
+ height: 40px;
+ width: 130px;
+ color: var(--light);
+ border-style: solid;
+ background-color: var(--darkest);
+ font-weight: bold;
+ border-color: var(--dark);
+}
+
+.grow:hover{
+ background-color: var(--dark);
+ color: var(--lightest);
+ border-color: var(--light);
+ cursor: pointer;
+}
+
+.grow:active {
+ border-color: var(--light);
+ background-color: var(--darkest);
+ color: var(--light);
+}
+
+.grow:active {
+ animation-name: growScale;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+ animation-duration: 0.1s;
+}
+
+@keyframes growScale {
+ 0% {
+ scale: 1;
+ }
+ 100%{
+ scale: 1.05;
+ }
+}
diff --git a/frontend/src/assets/user.svg b/frontend/src/assets/user.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6a39d4de2ba53a89ad9890024a98f8c30c07c78a
--- /dev/null
+++ b/frontend/src/assets/user.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="20px" height="20px" viewBox="0" fill="lightseagreen" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="lightseagreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="lightseagreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
index 89d71210d650a3b7b0efff3889dd0475a7aa0c51..936d086a48cb403c3df49b5c14bc97e067ea6470 100644
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -1,5 +1,4 @@
<script setup>
-import PeldaKomponens from "@/components/pelda-komponens.vue";
import LoginKomponens from "@/components/login-komponens.vue";
defineProps({
@@ -12,15 +11,8 @@ defineProps({
<template>
<div class="greetings">
-<!-- <h1 class="green">{{ msg }}</h1>-->
<img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
<h1 class="title">{{msg}}</h1>
-<!-- <h3 class="subtitle">-->
-<!-- You’ve successfully created a project with-->
-<!-- <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +-->
-<!-- <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.-->
-<!-- </h3>-->
-<!-- <div class="space"></div>-->
<div class="login">
<LoginKomponens @status="(value) => $emit('status', value)" />
</div>
@@ -32,7 +24,8 @@ defineProps({
.title {
- color: lightseagreen;
+ color: var(--lightest);
+ text-shadow: 0 0 10px var(--light);
}
.title:after{
@@ -75,16 +68,9 @@ h3 {
align-items: center;
}
- .space {
- width: 40%;
- }
-
.logo {
margin: 0 2rem 0 0;
}
}
-.subtitle {
- margin-bottom: 16px;
-}
</style>
diff --git a/frontend/src/components/browse-komponens.vue b/frontend/src/components/browse-komponens.vue
index 103c5658768e8dbda5bb6a6b60c5eb7a183513e2..f0a9a8493fb93a0a1abbfe8316b876046651ed48 100644
--- a/frontend/src/components/browse-komponens.vue
+++ b/frontend/src/components/browse-komponens.vue
@@ -61,8 +61,14 @@ function downloadFile(filename) {
<h3 class="note-description">
{{description}}
</h3>
- <h4>{{userName}}</h4>
- <button @click="downloadFile(fileName)">Letöltés</button>
+ <div class="footer">
+ <h4>
+ Feltöltötte: <p class="green">{{userName}}</p>
+ <img alt="user icon" class="user" src="../assets/user.svg" width="18" height="18"/>
+ </h4>
+ <span></span>
+ <button class="grow" @click="downloadFile(fileName)">Letöltés</button>
+ </div>
</div>
</main>
</div>
@@ -74,7 +80,7 @@ function downloadFile(filename) {
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr 2fr;
- column-gap: 10px;
+ column-gap: 15px;
padding: 0 10% 0 10%;
}
@@ -89,25 +95,44 @@ li {
.note:hover {
cursor: pointer;
- color: lightseagreen;
+ color: var(--light);
background-color: #1f2c2c;
}
-.browse, .note-page {
- border: 1px solid lightseagreen;
+.browse {
+ border: 1px solid var(--lightest);
+ box-shadow: var(--light) 0 0 5px;
padding: 5px;
}
.module {
- background-color: #224c49;
+ background-color: var(--dark);
+ color: var(--lighttext);
}
-.note-page > h4 {
- color: lightseagreen;
+.note-page {
+ border: 1px solid var(--lightest);
+ padding: 25px;
+ color: var(--lighttext);
+ box-shadow: var(--light) 0 0 5px;
}
-.note-page {
- padding: 15px;
+.note-header {
+ text-align: center;
+ margin-bottom: 10px;
+}
+
+.footer {
+ margin-top: 20px;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ align-items: center;
+ color: var(--lighter);
+}
+
+.user {
+ margin-bottom: -2px;
}
+
</style>
\ No newline at end of file
diff --git a/frontend/src/components/login-komponens.vue b/frontend/src/components/login-komponens.vue
index 7fe2a07b32f44a282d5e4fc261190f3c984c0832..f0be0b1c41401740b7b3a8a36623e4e184162b78 100644
--- a/frontend/src/components/login-komponens.vue
+++ b/frontend/src/components/login-komponens.vue
@@ -2,31 +2,7 @@
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';
-// })
-// }
-
+// api call to login
function loginUser(credentials, callback) {
axios.post('http://localhost:8080/api/login', credentials)
.then(response => {
@@ -37,29 +13,23 @@ function loginUser(credentials, callback) {
});
}
-const loggedIn = ref(false);
-const btnText = ref("Bejelentkezés")
+// login logic handling
+const logged_in = ref(false);
const userName = ref("")
-function login(){
- loggedIn.value = !loggedIn.value
+function login(self){
+ //Itt lesz a kitalált user (Gipsz Jakab, keksz) aki megpróbál bejelentkezni
+ loginUser({username: 'gipja', password: 'süti'}, function(response) {
+ console.log(response)
+ userName.value = response["fullName"]
+ logged_in.value = response["loggedIn"]
+
+ if(!logged_in.value){
+ userName.value = ""
+ }
- if(loggedIn.value){
- loginUser({username: 'gipja', password: 'süti'}, function(response) {
- userName.value = response["fullName"]
- //Tessék bool :P
- const bool = response["loggedIn"];
- console.log(response)
- })
- btnText.value = "Kijelentkezés"
- } else {
- loginUser({username: 'gipja', password: 'süti'}, function(response) {
- //Tessék bool :P
- const bool = response["loggedIn"];
- console.log(response)
- })
- userName.value = ""
- btnText.value = "Bejelentkezés"
- }
+ self.$emit('status', logged_in.value)
+ })
+ console.log(logged_in)
}
@@ -68,7 +38,12 @@ function login(){
<template>
<div class="wrapper">
<h2 class="user">{{userName}}</h2>
- <button class="grow" @click="login(); $emit('status', loggedIn)">{{btnText}}</button>
+ <div v-if="logged_in">
+ <button class="grow" @click="login(this)">Kijelentkezés</button>
+ </div>
+ <div v-else>
+ <button class="grow" @click="login(this)">Bejelentkezés</button>
+ </div>
</div>
</template>
@@ -79,50 +54,14 @@ function login(){
}
.user {
- color: lightseagreen;
+ color: var(--light);
width: 200px;
text-align: center;
}
-button {
- height: 40px;
- width: 130px;
- color: lightseagreen;
- background-color: #181818;
- font-weight: bold;
- border-color: #181818;
-}
-
-button:hover{
- background-color: #224c49;
- color: lightseagreen;
- border-color: lightseagreen;
+.user:hover {
cursor: pointer;
+ color: var(--lightest);
}
-button:active {
- border-color: lightseagreen;
- background-color: #181818;
- color: lightseagreen;
-}
-
-.grow:active {
- animation-name: growScale;
- animation-iteration-count: 1;
- animation-timing-function: linear;
- animation-duration: 0.1s;
-}
-
-@keyframes growScale {
- 0% {
- scale: 1;
- }
- 100%{
- scale: 1.05;
- }
-}
-
-.a-fact {
- font-weight: bold;
-}
</style>
\ No newline at end of file
diff --git a/frontend/src/components/register-komponens.vue b/frontend/src/components/register-komponens.vue
index ac7932ff128ea6534a7f565c63b3c805331737c0..9cdac409b7b932ab0789b25d322306c1fd08e158 100644
--- a/frontend/src/components/register-komponens.vue
+++ b/frontend/src/components/register-komponens.vue
@@ -26,17 +26,17 @@ function register(){
<style>
p {
display: inline-block;
- color: aqua;
+ color: var(--lightest);
}
p:hover {
- color: lightseagreen;
+ color: var(--light);
cursor: grab;
text-decoration: underline;
}
p:active {
- color: aqua;
+ color: var(--lightest);
}
</style>
\ No newline at end of file