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: [], list: [],
book: undefined, book: undefined,
order: { quantity:1, succeeded:'', failed:'' }, order: { quantity:1, succeeded:'', failed:'' },
user: {} user: undefined
} }
}, },
@@ -42,19 +42,25 @@ const books = Vue.createApp ({
} }
}, },
async fetchUserInfo() { async login() {
try { try {
const { data } = await axios.get('/user/me') const { data:user } = await axios.post('/user/login',{})
books.user = data if (user.id !== 'anonymous') books.user = user
} catch (err) { books.user = { id: err.message } } } 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") }).mount("#app")
// initially fill list of books books.getUserInfo()
books.fetch() books.fetch() // initially fill list of books
books.fetchUserInfo()
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
// hide user info on request // hide user info on request
if (event.key === 'u') books.user = undefined 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;"> <body class="small-container", style="margin-top: 70px;">
<div id='app'> <div id='app'>
<div v-if="user" class="user"> <form class="user" @submit.prevent="login">
<div>User: {{ user.id || 'anonymous' }}</div> <div v-if="user">
<div>Locale: {{ user.locale }}</div> <div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
<div v-if="user.tenant">Tenant: {{ user.tenant }}</div> <div> User: {{ user.id }}</div>
</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> <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(){ 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 // Reduce stock of ordered books if available stock suffices
this.on ('submitOrder', async req => { this.on ('submitOrder', async req => {

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

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

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

@@ -1,4 +1,9 @@
const cds = require('@sap/cds') const cds = require('@sap/cds')
module.exports = cds.service.impl((srv) => { module.exports = class UserService extends cds.Service { init(){
srv.on('READ', 'me', ({ tenant, user, locale }) => ({ id: user.id, locale, tenant })) 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')
})
}}