Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
co2ampel2
Web
Commits
327054b8
Commit
327054b8
authored
2 weeks ago
by
Gezer
Browse files
Options
Download
Email Patches
Plain Diff
modified ui elements to look better
parent
f2b1d5e1
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
frontend/src/components/NavBar.vue
+20
-13
frontend/src/components/NavBar.vue
frontend/src/views/HomeView.vue
+77
-5
frontend/src/views/HomeView.vue
frontend/src/views/LoginView.vue
+73
-42
frontend/src/views/LoginView.vue
frontend/src/views/RegisterView.vue
+74
-35
frontend/src/views/RegisterView.vue
with
244 additions
and
95 deletions
+244
-95
frontend/src/components/NavBar.vue
+
20
-
13
View file @
327054b8
...
@@ -3,23 +3,30 @@ import { RouterLink, RouterView } from 'vue-router'
...
@@ -3,23 +3,30 @@ import { RouterLink, RouterView } from 'vue-router'
</
script
>
</
script
>
<
template
>
<
template
>
<header>
<header>
<div
class=
"container"
>
<div
class=
"container"
>
<img
alt=
"Vue logo"
class=
"logo"
src=
"@/assets/logo.svg"
width=
"100"
height=
"100"
/>
<div
class=
"image"
>
<nav>
<RouterLink
to=
"/"
>
<RouterLink
to=
"/"
>
Home
</RouterLink>
<img
alt=
"Vue logo"
class=
"logo"
src=
"@/assets/logo.svg"
width=
"100"
height=
"100"
/>
<RouterLink
to=
"/about"
>
About
</RouterLink>
</RouterLink>
<RouterLink
to=
"/login"
>
Login
</RouterLink>
</div>
<RouterLink
to=
"/register"
>
Registrieren
</RouterLink>
<RouterLink
to=
"/buildingsView"
>
Gebäude
</RouterLink>
</nav>
</div>
</header>
<RouterView
/>
<nav>
<RouterLink
to=
"/"
>
Home
</RouterLink>
<RouterLink
to=
"/about"
>
About
</RouterLink>
<RouterLink
to=
"/login"
>
Login
</RouterLink>
<RouterLink
to=
"/register"
>
Registrieren
</RouterLink>
<RouterLink
to=
"/buildingsView"
>
Gebäude
</RouterLink>
</nav>
</div>
</header>
<RouterView
/>
</
template
>
</
template
>
<
style
scoped
>
<
style
scoped
>
header
{
header
{
position
:
fixed
;
position
:
fixed
;
top
:
0
;
top
:
0
;
...
...
This diff is collapsed.
Click to expand it.
frontend/src/views/HomeView.vue
+
77
-
5
View file @
327054b8
...
@@ -28,11 +28,83 @@ export default {
...
@@ -28,11 +28,83 @@ export default {
</
script
>
</
script
>
<
template
>
<
template
>
<h1>
Welcome to the home page
</h1>
<div
class=
"home-container"
>
<div
v-if=
"authStore.isAuthenticated"
>
<div
class=
"welcome-box"
>
<p>
Hi there
{{
authStore
.
user
?.
username
}}
!
</p>
<h1>
Willkommen auf der HFT CO₂-Webplattform
</h1>
<p>
You are logged in .
</p>
<p>
Hier kannst du Umweltdaten wie CO₂-Konzentration, Temperatur und Luftfeuchtigkeit aus verschiedenen Räumen der HFT visualisieren.
</p>
<div
v-if=
"authStore.isAuthenticated"
class=
"status-box"
>
<h2>
👋 Hallo,
{{
authStore
.
user
?.
username
}}
</h2>
<p>
Du bist aktuell eingeloggt.
</p>
<button
@
click=
"logout"
>
Logout
</button>
<button
@
click=
"logout"
>
Logout
</button>
</div>
<div
v-else
class=
"status-box"
>
<p>
Du bist nicht eingeloggt.
</p>
<router-link
class=
"login-link"
to=
"/login"
>
Jetzt einloggen
</router-link>
</div>
</div>
</div>
<
p
v-else
>
You are not logged in .
<router-link
to=
"/login"
>
Login
</router-link></p
>
<
/div
>
</
template
>
</
template
>
<
style
scoped
>
.home-container
{
display
:
flex
;
justify-content
:
center
;
padding-top
:
120px
;
padding
:
2rem
;
}
.welcome-box
{
max-width
:
800px
;
width
:
100%
;
background
:
#f5f5f5
;
padding
:
2rem
;
border-radius
:
12px
;
box-shadow
:
0
2px
12px
rgba
(
0
,
0
,
0
,
0.1
);
text-align
:
center
;
}
h1
{
font-size
:
2rem
;
margin-bottom
:
1rem
;
}
.status-box
{
margin-top
:
2rem
;
padding
:
1rem
;
background-color
:
#ffffff
;
border
:
1px
solid
#ddd
;
border-radius
:
8px
;
}
button
{
margin-top
:
1rem
;
padding
:
0.6rem
1.2rem
;
background-color
:
#007bff
;
color
:
white
;
font-weight
:
bold
;
border
:
none
;
border-radius
:
6px
;
cursor
:
pointer
;
}
button
:hover
{
background-color
:
#0056b3
;
}
.login-link
{
display
:
inline-block
;
margin-top
:
0.8rem
;
color
:
#007bff
;
text-decoration
:
none
;
font-weight
:
bold
;
}
.login-link
:hover
{
text-decoration
:
underline
;
}
</
style
>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
frontend/src/views/LoginView.vue
+
73
-
42
View file @
327054b8
...
@@ -30,88 +30,119 @@ export default {
...
@@ -30,88 +30,119 @@ export default {
</
script
>
</
script
>
<
template
>
<
template
>
<div
class=
"login"
>
<div
class=
"login-container"
>
<h1>
Login
</h1>
<div
class=
"login-card"
>
<form
@
submit.prevent=
"login"
>
<h1>
Login
</h1>
<div>
<p
class=
"intro"
>
Melde dich an, um Zugriff auf Raumdaten und Sensorwerte zu erhalten.
</p>
<label
for=
"email"
>
Email:
</label>
<input
v-model=
"email"
id=
"email"
type=
"text"
required
@
input=
"resetError"
/>
<form
@
submit.prevent=
"login"
>
</div>
<div
class=
"form-group"
>
<div>
<label
for=
"email"
>
Email
</label>
<label
for=
"password"
>
Password:
</label>
<input
<input
v-model=
"email"
v-model=
"password"
id=
"email"
id=
"password"
type=
"text"
type=
"password"
required
required
@
input=
"resetError"
@
input=
"resetError"
placeholder=
"z.B. max@ht.de"
/>
/>
</div>
</div>
<button
type=
"submit"
>
Login
</button>
</form>
<div
class=
"form-group"
>
<label
for=
"password"
>
Passwort
</label>
<input
v-model=
"password"
id=
"password"
type=
"password"
required
@
input=
"resetError"
placeholder=
"••••••••"
/>
</div>
<button
type=
"submit"
>
Einloggen
</button>
<p
v-if=
"error"
class=
"error"
>
{{
error
}}
</p>
<p
v-if=
"error"
class=
"error"
>
{{
error
}}
</p>
</form>
</div>
</div>
<
p
v-if=
"error"
class=
"error"
>
{{
error
}}
</p
>
<
/div
>
</
template
>
</
template
>
<
style
scoped
>
<
style
scoped
>
.login
{
.login-container
{
max-width
:
400px
;
display
:
flex
;
margin
:
40px
auto
;
justify-content
:
center
;
padding
:
2rem
;
align-items
:
center
;
background-color
:
#f8f9fa
;
min-height
:
80vh
;
border-radius
:
8px
;
box-shadow
:
0
0
12px
rgba
(
0
,
0
,
0
,
0.05
);
font-family
:
sans-serif
;
}
}
.login
h1
{
.login-card
{
background-color
:
#f9f9f9
;
padding
:
2.5rem
;
border-radius
:
12px
;
box-shadow
:
0
2px
14px
rgba
(
0
,
0
,
0
,
0.1
);
width
:
100%
;
max-width
:
420px
;
font-family
:
'Segoe UI'
,
sans-serif
;
}
h1
{
text-align
:
center
;
text-align
:
center
;
color
:
#333
;
color
:
#333
;
margin-bottom
:
1.5rem
;
margin-bottom
:
0.5rem
;
}
.intro
{
text-align
:
center
;
font-size
:
0.95rem
;
color
:
#666
;
margin-bottom
:
2rem
;
}
}
.form-group
{
.form-group
{
margin-bottom
:
1rem
;
margin-bottom
:
1
.5
rem
;
}
}
label
{
label
{
display
:
block
;
display
:
block
;
margin-bottom
:
0.
3
rem
;
margin-bottom
:
0.
5
rem
;
font-weight
:
5
00
;
font-weight
:
6
00
;
color
:
#
555
;
color
:
#
444
;
}
}
input
{
input
{
width
:
100%
;
width
:
100%
;
padding
:
0.
5
rem
0.75rem
;
padding
:
0.
6
rem
0.75rem
;
border
:
1px
solid
#ccc
;
border
:
1px
solid
#ccc
;
border-radius
:
4
px
;
border-radius
:
6
px
;
font-size
:
1rem
;
font-size
:
1rem
;
box-sizing
:
border-box
;
}
input
:focus
{
border-color
:
#007bff
;
outline
:
none
;
}
}
button
{
button
{
width
:
100%
;
width
:
100%
;
padding
:
0.75rem
;
padding
:
0.75rem
;
background-color
:
#
28a745
;
background-color
:
#
007bff
;
color
:
white
;
color
:
white
;
border
:
none
;
border-radius
:
4px
;
font-weight
:
bold
;
font-weight
:
bold
;
border
:
none
;
border-radius
:
6px
;
font-size
:
1rem
;
font-size
:
1rem
;
cursor
:
pointer
;
cursor
:
pointer
;
transition
:
background-color
0.2s
ease
;
transition
:
background-color
0.2s
ease
;
}
}
button
:hover
{
button
:hover
{
background-color
:
#
218838
;
background-color
:
#
0056b3
;
}
}
.error
{
.error
{
margin-top
:
1rem
;
margin-top
:
1rem
;
color
:
#dc3545
;
color
:
#dc3545
;
text-align
:
center
;
text-align
:
center
;
font-weight
:
500
;
}
}
</
style
>
</
style
>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
frontend/src/views/RegisterView.vue
+
74
-
35
View file @
327054b8
...
@@ -43,60 +43,97 @@ export default {
...
@@ -43,60 +43,97 @@ export default {
</
script
>
</
script
>
<
template
>
<
template
>
<div
class=
"register"
>
<div
class=
"register-container"
>
<h2>
Register
</h2>
<div
class=
"register-card"
>
<form
@
submit.prevent=
"register"
>
<h1>
Registrieren
</h1>
<div>
<p
class=
"intro"
>
Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.
</p>
<label
for=
"email"
>
Email:
</label>
<input
v-model=
"email"
id=
"email"
type=
"email"
required
/>
<form
@
submit.prevent=
"register"
>
</div>
<div
class=
"form-group"
>
<div>
<label
for=
"email"
>
Email
</label>
<label
for=
"password"
>
Password:
</label>
<input
<input
v-model=
"password"
id=
"password"
type=
"password"
required
/>
v-model=
"email"
</div>
id=
"email"
<button
type=
"submit"
>
Register
</button>
type=
"email"
</form>
required
<p
v-if=
"error"
>
{{
error
}}
</p>
placeholder=
"z.B. max@ht.de"
<p
v-if=
"success"
>
{{
success
}}
</p>
/>
</div>
<div
class=
"form-group"
>
<label
for=
"password"
>
Passwort
</label>
<input
v-model=
"password"
id=
"password"
type=
"password"
required
placeholder=
"••••••••"
/>
</div>
<button
type=
"submit"
>
Registrieren
</button>
<p
v-if=
"error"
class=
"error"
>
{{
error
}}
</p>
<p
v-if=
"success"
class=
"success"
>
{{
success
}}
</p>
</form>
</div>
</div>
</div>
</
template
>
</
template
>
<
style
scoped
>
<
style
scoped
>
.register
{
.register-container
{
max-width
:
400px
;
display
:
flex
;
margin
:
40px
auto
;
justify-content
:
center
;
padding
:
2rem
;
align-items
:
center
;
background-color
:
#f8f9fa
;
min-height
:
80vh
;
border-radius
:
8px
;
}
box-shadow
:
0
0
12px
rgba
(
0
,
0
,
0
,
0.05
);
font-family
:
sans-serif
;
.register-card
{
background-color
:
#f9f9f9
;
padding
:
2.5rem
;
border-radius
:
12px
;
box-shadow
:
0
2px
14px
rgba
(
0
,
0
,
0
,
0.1
);
width
:
100%
;
max-width
:
420px
;
font-family
:
'Segoe UI'
,
sans-serif
;
}
}
.register
h2
{
h1
{
text-align
:
center
;
text-align
:
center
;
color
:
#333
;
color
:
#333
;
margin-bottom
:
1.5rem
;
margin-bottom
:
0.5rem
;
}
.intro
{
text-align
:
center
;
font-size
:
0.95rem
;
color
:
#666
;
margin-bottom
:
2rem
;
}
}
.form-group
{
.form-group
{
margin-bottom
:
1rem
;
margin-bottom
:
1
.5
rem
;
}
}
label
{
label
{
display
:
block
;
display
:
block
;
margin-bottom
:
0.
3
rem
;
margin-bottom
:
0.
5
rem
;
font-weight
:
5
00
;
font-weight
:
6
00
;
color
:
#
555
;
color
:
#
444
;
}
}
input
{
input
{
width
:
100%
;
width
:
100%
;
padding
:
0.
5
rem
0.75rem
;
padding
:
0.
6
rem
0.75rem
;
border
:
1px
solid
#ccc
;
border
:
1px
solid
#ccc
;
border-radius
:
4
px
;
border-radius
:
6
px
;
font-size
:
1rem
;
font-size
:
1rem
;
box-sizing
:
border-box
;
}
input
:focus
{
border-color
:
#007bff
;
outline
:
none
;
}
}
button
{
button
{
...
@@ -104,9 +141,9 @@ button {
...
@@ -104,9 +141,9 @@ button {
padding
:
0.75rem
;
padding
:
0.75rem
;
background-color
:
#007bff
;
background-color
:
#007bff
;
color
:
white
;
color
:
white
;
border
:
none
;
border-radius
:
4px
;
font-weight
:
bold
;
font-weight
:
bold
;
border
:
none
;
border-radius
:
6px
;
font-size
:
1rem
;
font-size
:
1rem
;
cursor
:
pointer
;
cursor
:
pointer
;
transition
:
background-color
0.2s
ease
;
transition
:
background-color
0.2s
ease
;
...
@@ -120,11 +157,13 @@ button:hover {
...
@@ -120,11 +157,13 @@ button:hover {
margin-top
:
1rem
;
margin-top
:
1rem
;
color
:
#dc3545
;
color
:
#dc3545
;
text-align
:
center
;
text-align
:
center
;
font-weight
:
500
;
}
}
.success
{
.success
{
margin-top
:
1rem
;
margin-top
:
1rem
;
color
:
#28a745
;
color
:
#28a745
;
text-align
:
center
;
text-align
:
center
;
font-weight
:
500
;
}
}
</
style
>
</
style
>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment