b.santos/cloud-cap-samples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add login to bookshop Vue.js app (#358)

Browse Source
This commit is contained in:
Daniel Hutzel
2022-05-19 12:16:11 +02:00
committed by GitHub
parent ee4dcf116c
commit a893184736
5 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
bookshop/app/vue/app.js
View File

@@ -10,7 +10,7 @@ const books = Vue.createApp ({
list: [],
book: undefined,
order: { quantity:1, succeeded:'', failed:'' },
user: {}
user: undefined
}
},
@@ -42,19 +42,25 @@ const books = Vue.createApp ({
}
},
async fetchUserInfo() {
async login() {
try {
const { data } = await axios.get('/user/me')
books.user = data
const { data:user } = await axios.post('/user/login',{})
if (user.id !== 'anonymous') books.user = user
} catch (err) { books.user = { id: err.message } }
}
},
async getUserInfo() {
try {
const { data:user } = await axios.get('/user/me')
if (user.id !== 'anonymous') books.user = user
} catch (err) { books.user = { id: err.message } }
},
}
}).mount("#app")
// initially fill list of books
books.fetch()
books.getUserInfo()
books.fetch() // initially fill list of books
books.fetchUserInfo()
document.addEventListener('keydown', (event) => {
// hide user info on request
if (event.key === 'u') books.user = undefined

16
bookshop/app/vue/index.html
View File

@@ -18,11 +18,17 @@
<body class="small-container", style="margin-top: 70px;">
<div id='app'>
<div v-if="user" class="user">
<div>User: {{ user.id || 'anonymous' }}</div>
<div>Locale: {{ user.locale }}</div>
<div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
</div>
<form class="user" @submit.prevent="login">
<div v-if="user">
<div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
<div> User: {{ user.id }}</div>
<div>Locale: {{ user.locale }}</div>
</div>
<div v-else>
<input type="submit" value="Login" class="muted-button">
<!-- <a href="/user/login()">Login</a> -->
</div>
</form>
<h1> Capire Books </h1>