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>

2
bookshop/srv/cat-service.js
View File

@@ -2,7 +2,7 @@ const cds = require('@sap/cds')
class CatalogService extends cds.ApplicationService { init(){
const { Books } = cds.entities ('sap.capire.bookshop')
const { Books } = this.entities ('sap.capire.bookshop')
// Reduce stock of ordered books if available stock suffices
this.on ('submitOrder', async req => {

3
bookshop/srv/user-service.cds
View File

@@ -1,9 +1,7 @@
/**
* Exposes user information
*/
@requires: 'authenticated-user'
service UserService {
/**
* The current user
*/
@@ -13,4 +11,5 @@ service UserService {
tenant : String;
}
action login() returns me;
}

11
bookshop/srv/user-service.js
View File

@@ -1,4 +1,9 @@
const cds = require('@sap/cds')
module.exports = cds.service.impl((srv) => {
srv.on('READ', 'me', ({ tenant, user, locale }) => ({ id: user.id, locale, tenant }))
})
module.exports = class UserService extends cds.Service { init(){
this.on('READ', 'me', ({ tenant, user, locale }) => ({ id: user.id, locale, tenant }))
this.on('login', (req) => {
if (req.user._is_anonymous)
req._.res.set('WWW-Authenticate','Basic realm="Users"').sendStatus(401)
else return this.read('me')
})
}}