mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
add login store
This commit is contained in:
110
src/webapp/package-lock.json
generated
110
src/webapp/package-lock.json
generated
@@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"pinia": "^2.0.34",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
@@ -7120,6 +7121,56 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.0.34",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.34.tgz",
|
||||
"integrity": "sha512-cgOoGUiyqX0SSgX8XelK9+Ri4XA2/YyNtgjogwfzIx1g7iZTaZPxm7/bZYMCLU2qHRiHhxG7SuQO0eBacFNc2Q==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.5.0",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.2.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
@@ -11575,7 +11626,8 @@
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
|
||||
"integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/cli-service": {
|
||||
"version": "5.0.8",
|
||||
@@ -12101,7 +12153,8 @@
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
|
||||
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "8.2.0",
|
||||
@@ -12160,7 +12213,8 @@
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"ansi-escapes": {
|
||||
"version": "3.2.0",
|
||||
@@ -12930,7 +12984,8 @@
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
|
||||
"integrity": "sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"css-loader": {
|
||||
"version": "6.7.3",
|
||||
@@ -13116,7 +13171,8 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
|
||||
"integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"csso": {
|
||||
"version": "4.2.0",
|
||||
@@ -14132,7 +14188,8 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
|
||||
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"ieee754": {
|
||||
"version": "1.2.1",
|
||||
@@ -15357,6 +15414,23 @@
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true
|
||||
},
|
||||
"pinia": {
|
||||
"version": "2.0.34",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.34.tgz",
|
||||
"integrity": "sha512-cgOoGUiyqX0SSgX8XelK9+Ri4XA2/YyNtgjogwfzIx1g7iZTaZPxm7/bZYMCLU2qHRiHhxG7SuQO0eBacFNc2Q==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.5.0",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
@@ -15434,25 +15508,29 @@
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
|
||||
"integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-discard-duplicates": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
|
||||
"integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-discard-empty": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
|
||||
"integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-discard-overridden": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
|
||||
"integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-loader": {
|
||||
"version": "6.2.1",
|
||||
@@ -15557,7 +15635,8 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
|
||||
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-modules-local-by-default": {
|
||||
"version": "4.0.0",
|
||||
@@ -15592,7 +15671,8 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
|
||||
"integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-normalize-display-values": {
|
||||
"version": "5.1.0",
|
||||
@@ -17217,7 +17297,8 @@
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -17338,7 +17419,8 @@
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"y18n": {
|
||||
"version": "5.0.8",
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"pinia": "^2.0.34",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { createPinia } from 'pinia';
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
|
||||
createApp( App ).use( router ).mount('#app');
|
||||
let app = createApp( App );
|
||||
|
||||
app.use( createPinia() );
|
||||
|
||||
let userStore = useUserStore();
|
||||
|
||||
let prod = false;
|
||||
|
||||
if ( prod ) {
|
||||
fetch( '/api/getAuth' ).then( res => {
|
||||
res.json().then( data => {
|
||||
userStore.setUserAuth( data.user );
|
||||
userStore.setAdminAuth( data.admin );
|
||||
|
||||
app.use( router );
|
||||
app.mount( '#app' );
|
||||
} );
|
||||
} );
|
||||
} else {
|
||||
userStore.setUserAuth( true );
|
||||
app.use( router );
|
||||
app.mount( '#app' );
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
|
||||
/*
|
||||
This is the Vue.js router file. Here, all valid routes are defined.
|
||||
@@ -42,7 +43,8 @@ const routes = [
|
||||
name: 'admin',
|
||||
component: () => import( '../views/admin/AdminView.vue' ),
|
||||
meta: {
|
||||
title: 'Admin - myevent'
|
||||
title: 'Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@@ -50,7 +52,8 @@ const routes = [
|
||||
name: 'adminMain',
|
||||
component: () => import( '../views/admin/HomeView.vue' ),
|
||||
meta: {
|
||||
title: 'Home :: Admin - myevent'
|
||||
title: 'Home :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -58,7 +61,8 @@ const routes = [
|
||||
name: 'adminAccounts',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
meta: {
|
||||
title: 'Accounts :: Admin - myevent'
|
||||
title: 'Accounts :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -66,7 +70,8 @@ const routes = [
|
||||
name: 'adminPages',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
meta: {
|
||||
title: 'Pages :: Admin - myevent'
|
||||
title: 'Pages :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -74,7 +79,8 @@ const routes = [
|
||||
name: 'adminEvents',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
meta: {
|
||||
title: 'Events :: Admin - myevent'
|
||||
title: 'Events :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -82,7 +88,8 @@ const routes = [
|
||||
name: 'adminPlugins',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
meta: {
|
||||
title: 'Plugins :: Admin - myevent'
|
||||
title: 'Plugins :: Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -90,7 +97,8 @@ const routes = [
|
||||
name: 'adminSettings',
|
||||
component: () => import( '../views/AdminLoginView.vue' ),
|
||||
meta: {
|
||||
title: 'Admin - myevent'
|
||||
title: 'Admin - myevent',
|
||||
adminAuthRequired: true,
|
||||
}
|
||||
},
|
||||
]
|
||||
@@ -126,9 +134,18 @@ const routes = [
|
||||
name: 'purchase',
|
||||
component: () => import( '@/views/PurchaseView.vue' ),
|
||||
meta: {
|
||||
title: 'Purchase - myevent',
|
||||
title: 'Pay - myevent',
|
||||
transition: 'scale'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/pay',
|
||||
name: 'pay',
|
||||
component: () => import( '@/views/PaymentView.vue' ),
|
||||
meta: {
|
||||
title: 'Pay - myevent',
|
||||
transition: 'scale',
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -147,16 +164,24 @@ router.afterEach( ( to, from ) => {
|
||||
*/
|
||||
|
||||
let AdminPages = [ 'admin', 'adminMain' ];
|
||||
let isAdminAuthenticated = true;
|
||||
|
||||
let UserAccountPages = [ 'account' ];
|
||||
let isUserAuthenticated = true;
|
||||
|
||||
let authRequired = false;
|
||||
|
||||
router.beforeEach( ( to, from ) => {
|
||||
if ( AdminPages.includes( to.name ) && !isAdminAuthenticated ) {
|
||||
let userStore = useUserStore();
|
||||
let isUserAuthenticated = userStore.getUserAuthenticated;
|
||||
let isAdminAuthenticated = userStore.getAdminAuthenticated;
|
||||
|
||||
if ( to.meta.adminAuthRequired && !isAdminAuthenticated ) {
|
||||
return { name: 'adminLogin' };
|
||||
} else if ( UserAccountPages.includes( to.name ) && !isUserAuthenticated ) {
|
||||
return { name: 'login' };
|
||||
} else if ( !isUserAuthenticated && to.name === 'purchase' && authRequired ) {
|
||||
return { name: 'login' };
|
||||
} else if ( !isUserAuthenticated && to.name === 'pay' ) {
|
||||
return { name: 'purchase' };
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
17
src/webapp/src/stores/userStore.js
Normal file
17
src/webapp/src/stores/userStore.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useUserStore = defineStore ( 'user', {
|
||||
state: () => ( { 'isUserAuth': false, 'isAdminAuth': false } ),
|
||||
getters: {
|
||||
getUserAuthenticated: ( state ) => state.isUserAuth,
|
||||
getAdminAuthenticated: ( state ) => state.isAdminAuth,
|
||||
},
|
||||
actions: {
|
||||
setUserAuth ( auth ) {
|
||||
this.isUserAuth = auth;
|
||||
},
|
||||
setAdminAuth ( auth ) {
|
||||
this.isAdminAuth = auth;
|
||||
}
|
||||
}
|
||||
} );
|
||||
@@ -14,17 +14,22 @@
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-app {
|
||||
.cart {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
<div class="order">
|
||||
<h1>Order tickets</h1>
|
||||
<div class="order-app">
|
||||
<ul>
|
||||
<ul v-for="event in events">
|
||||
<li>
|
||||
<router-link to="/tickets/details" class="ticket" @click="setActiveTicket( 'test' );">
|
||||
<div class="ticket-name">
|
||||
<h3>Event name</h3>
|
||||
<p>Event description</p>
|
||||
<h3>{{ event.name }}</h3>
|
||||
<p>{{ event.description }}</p>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<p>Free seats / max seats</p>
|
||||
<p>Date & time of event</p>
|
||||
<h4>Starting at CHF 20.00</h4>
|
||||
<p>Free seats: {{ event.freeSeats }} / {{ event.maxSeats }}</p>
|
||||
<p>{{ event.location }}, {{ event.date }}</p>
|
||||
<h4>Starting at {{ event.currency }} {{ event.startingPrice }}</h4>
|
||||
</div>
|
||||
<img src="../assets/logo.png" alt="event logo" class="ticket-logo">
|
||||
<img :src="require( '@/assets/' + event.logo )" alt="event logo" class="ticket-logo">
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -63,6 +63,7 @@
|
||||
|
||||
.ticket-name {
|
||||
margin-right: auto;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
.ticket-info {
|
||||
@@ -78,6 +79,11 @@
|
||||
setActiveTicket ( id ) {
|
||||
sessionStorage.setItem( 'selectedTicket', id );
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
events: { 'test':{ 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'TestDate', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test', 'currency': 'CHF', 'logo': 'logo.png' } }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
55
src/webapp/src/views/PaymentView.vue
Normal file
55
src/webapp/src/views/PaymentView.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="order">
|
||||
<h1>Purchase</h1>
|
||||
<h3>Please choose a payment option</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-app {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: var( --primary-color );
|
||||
border-color: var( --primary-color );
|
||||
border-width: 1px;
|
||||
height: fit-content;
|
||||
border-style: solid;
|
||||
padding: 10px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.ticket:hover {
|
||||
background-color: var( --hover-color );
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.ticket-logo {
|
||||
height: 20vh;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ticket-name {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ticket-info {
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,21 @@
|
||||
<template>
|
||||
<div class="order">
|
||||
<div class="purchase">
|
||||
<h1>Purchase</h1>
|
||||
<h3>Please choose a payment option</h3>
|
||||
<h3>Personal information</h3>
|
||||
<div class="purchase-app">
|
||||
<form>
|
||||
<div v-if="!isAuthenticated">
|
||||
<label for="email">Email address *</label><br>
|
||||
<input type="email" name="email" id="email" required v-model="formData.email">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-app {
|
||||
.purchase-app {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -53,3 +62,16 @@
|
||||
margin-right: auto
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PurchaseView',
|
||||
data () {
|
||||
return {
|
||||
settings: { 'accountRequired':true },
|
||||
isAuthenticated: false,
|
||||
formData: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user