I'm trying to get an activation link from an email to successfully pass it's UID and token to a vue page where it'll get authenticated.
I have my folder structure set up currently like .../registration/activate/_uid/_token.vue, but that causes the registration link to bring up a 404 page.
I've tried setting up to /_uid/_token/_token.vue with the extra token to see what'll happen, and it lets token.vue render, but I don't think the params are being passed. I'm also getting a "Duplicate param keys in route with path: "/registration/activate/:uid?/:token?/:token?" error in console.
<template>
<v-container>
<v-card v-if="status === 'pending'" class="pa-8 text-center">
<p class="title">Please wait</p>
<p class="body-1">Checking registration status...</p>
</v-card>
<v-card v-if="status === 'success'" class="pa-8 text-center">
<p class="title primary--text">Activation successful</p>
<p class="body-1">You may now log in.</p>
<v-btn color="primary" text #click="navigateToLogin">Log In</v-btn>
</v-card>
<v-card v-if="status === 'error'" class="pa-8 text-center">
<p class="title error--text">Invalid activation token</p>
<p class="body-1">This token is invalid. Please try again.</p>
</v-card>
</v-container>
</template>
<script>
export default {
auth: false,
data: () => ({
status: 'pending'
}),
mounted() {
this.$axios
.post('/auth/users/activation/', this.$route.params)
.then((response) => {
this.status = 'success'
})
.catch(() => {
this.status = 'error'
})
},
methods: {
navigateToLogin() {
this.$router.push('/login')
}
}
}
</script>
Here's an example of a registration link.
http://localhost:3000/activate/MTg/5j2-d0af1770a53f1db2a851
Another part of issue that I can't quite solve, is since I'm using python for my backend should I use a python template to submit the UID and token or figure out a way to send the email where the root is localhost:3000 (my frontend) vs :8000 (my backend).
Currently my settings.py looks like this for the registration link:
'ACTIVATION_URL': 'registration/activate/{uid}/{token}',
the root is localhost:8000 for the whole API. So if I can't figure out how to manually set it to 3000 for just this link, I guess I'll need to use a template right? Any suggestions are welcome!
the problem is your path declaration. In Vue you should declare a param in path like this:
path: "/registration/activate/:uid/:token"
after this if you enter http://localhost:3000/activate/MTg/5j2-d0af1770a53f1db2a851 your this.$route.params should look like this:
{"uid":"MTg","token":"5j2-d0af1770a53f1db2a851"}
and you axios request is fine.
and because yout are sending a JSON to server if your using django you can use this code to get the body of a request:
def avtivate(request):
if request.is_ajax():
if request.method == 'POST':
print 'Raw Data: "%s"' % request.body
return HttpResponse("OK")
Related
Forgive me for the English of the Translator :)
I created a basic form to see if I get data in my API using vuetify however, when submitting the data the v-select data is not sent and I can not understand the reason, since in general the examples of these forms do not really make a request POST, follows snippets of the code I'm using:
<v-form method="post" action="http://127.0.0.1:3000/produtos">
<v-text-field name="escola" v-model="name" required :rules="nameRules"></v-text-field>
<v-select
v-model="selectPessoa"
:items="pessoas"
:rules="[v => !!v || 'Item is required']"
item-value="id"
item-text="nome"
label="itens"
required
name="pessoa"
return-object
value="id"
></v-select>
<v-btn color="warning" type="submit">Submit</v-btn>
</v-form>
Excerpt from javascript code:
data(){
return { pessoas: [{ id: 1, nome: "sandro" },
{ id: 2, nome: "haiden" }],
name: '',
selectPessoa: null,
}
}
The information I type in the v-text-field I get in the API node, but the one in the v-select does not:
Form screen:
API log screen:
On the<v-select> component you have defined the return-object and item-value="id" props. Using the return-object is overriding the item-value by returning the entire object from the v-select component instead of just the id. In this case you could just remove the return-object prop from the <v-select> component and that will fix your issue.
<v-select
v-model="selectPessoa"
:items="pessoas"
:rules="[v => !!v || 'Item is required']"
item-value="id"
item-text="nome"
label="itens"
required
name="pessoa"
return-object <------REMOVE THIS!!!
value="id"
></v-select>
Vuetify v-select docs: https://vuetifyjs.com/en/components/selects
Another option instead of removing the return-object prop could be to modify your API endpoint to expect an object rather than an int.
Also, I would not recommend using the "method" and "action" attributes on the <v-form> component. Instead, put a click event handler on the submit button of the form that calls a method. The method should then grab the data and send it to the API endpoint via an AJAX call.
On the Form Component
Before: <v-form method="post" action="http://127.0.0.1:3000/produtos">
After: <form #submit.prevent>
On the Button Component
Before: <v-btn color="warning" type="submit">Submit</v-btn>
After: <v-btn color="warning" #click="submit">Submit</v-btn>
In the methods have a function do something like this (used axios in my example, not sure what your project is using):
methods: {
submit () {
let data = { name: this.name, selectPessoa: this.selectPessoa }
axios.post('http://127.0.0.1:3000/produtos', data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
Why my delete function is not working in VueJS?
I have a table that displays the data from NodeJS and renders to VueJS
<tr v-for="result in filteredPeople" :key="result.id">
<td>{{result.Memb_ID}}</td>
//other data
<div class="btn">
<button class="btn btn-success">Edit Details</button>
<b-button class="btn btn-danger" #click="deleteData(result.Memb_ID)">Delete</b-button>
</div>
and my delete data is shown below.
deleteData(result, Memb_ID) {
axios
.delete("localhost:9000/api/delete/user/" + result.Memb_ID)
.then(response => {
this.result.splice(Memb_ID, 1);
console.log(this.result);
});
},
On my server console
DELETE /api/delete/user/undefined 404 167 - 0.184 ms
This is my image of backend
I never posted all the code but if you want I'll post it. Thanks for the help!
EDIT
I added image of my backend.
EDIT 2
I updated the server image.
It is because you are passing your memId via req.params but in your backend you are using req.query.memId
you can adjust it by:
update your axios to use localhost:9000/api/delete/user?Memb_ID=${Memb_ID}
or update your backend route to router.delete('/delete/user/:Memb_ID')
Your deleteData function parameter is only one. Could you try this.
deleteData(memId) {
axios
.delete("localhost:9000/api/delete/user/" + memId)
.then(response => {
this.result.splice(memId, 1);
console.log(this.result);
});
},
I am trying to integrate a stripe checkout form onto my website which is run from a node.js server on heroku.
The form to collect payment information is provided by stripe:
<form action="/updatepayment" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_DNdN11LpouG0f1x4_____"
data-amount="999"
data-name="[Name]"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto">
</script>
</form>
This are the instructions stripe gives:
The simple integration uses a <script> tag inside your payment form to render the blue Checkout button. Upon completion of the Checkout process, Checkout submits your form to your server, passing along a stripeToken and any elements your form contains. When adding the following code to your page, make sure that the form submits to your own server-side code within the action attribute
I have also tried different data-keys with no success. When the form is submitted, the page is redirected to the current page and the url then contains the token but nothing is sent to the server.
You can try below method
just add
<script src="https://checkout.stripe.com/checkout.js"></script>
in index.html File
and add <button (click)="openCheckout()">Purchase</button> in your component html File
and in ts file add below code
openCheckout() {
var tok=this;
var handler = (<any>window).StripeCheckout.configure({
key: '', // Enter your publishable key
locale: 'auto',
token: function (token: any) {
tok.token1(token);
}
});
handler.open({
name: 'Food Style',
description: 'Payment',
amount: this.price * 100,
});
}
token1(token){
console.log(token);
this.paymentservice.defaultcard(token)
.subscribe((result)=>{
console.log(result);
},
(err)=>{
console.log(err);
})
}
i have question about routing in sails.js.
So, i'm following a tutorial about making a login page. it consists of
AuthController.js
module.exports = {
login: function(req , res){
res.view('login'); //view login page
},
authenticate: function(req, res) {
//some auth function
}
};
login.ejs
<div id="login">
<form align="center" action="/login" method="post">
<ul>
<li>
<input type="text" name="username" placeholder="Username"></li>
<li>
<input type="password" name="password" placeholder="Password" ></li>
<li>
<input type="submit" value="Log In"></li>
</ul>
</form>
</div>
and finally this is what makes me confused in routes.js. why this works?
'get /login': {
controller: 'AuthController',
action: 'login'
},
'post /login' : {
controller: 'AuthController',
action: 'authenticate'
},
but this doesn't (i removed the get)?
'/login': {
controller: 'AuthController',
action: 'login'
},
'post /login' : {
controller: 'AuthController',
action: 'authenticate'
},
when i'm using the later route it seems that authentication action is never called when i enter username password, and it's just redirecting me to login page again (it's calling login action instead).
From the sails documentation:
If no verb is specified, the target will be applied to any request that matches
the path, regardless of the HTTP method used (GET, POST, PUT etc.).
URLs are matched against addresses in the list from the top down.
Also the order works from top to bottom. So when you try to POST in /login, it again goes to /login rather than POST /login.
Hope this helps.
As others have said, it's because the routes are compared in order, triggering whichever matches first.
Interestingly that means that if you swap the order, it works as you described:
'post /login' : {
controller: 'AuthController',
action: 'authenticate'
},
'/login': {
controller: 'AuthController',
action: 'login'
},
In sails Js, route.js consists of an address (on the left, e.g. 'get /login') and a target (on the right, e.g. 'AuthController.login'). The address is a URL path and (optionally) a specific HTTP method. When Sails receives an incoming request, it checks the address of all custom routes for matches. If a matching route is found, the request is then passed to its target.
Now, when you remove the get option, & lift your app, & navigate to /login, first the login page is rendered but when the form is posted, it's unable to differentiate b/w the requests as you have omitted get request, so it again calls /login & never reach on the post route.
Reference :http://sailsjs.org/documentation/concepts/routes
I want to use a different layout template for pages such as login, 404, and other pages. However, when calling this template in my route (using Iron Router), it appears to be ignored and instead uses the default template. How can I update this so that it uses the intended layout?
This is the custom layout I want to use
<template name="UtilityLayout">
<div class="ui centered grid">
<div class="six wide column">
{{> yield}}
</div>
</div>
</template>
My general Iron Router Config:
Router.configure({
layoutTemplate: 'AppLayout',
loadingTemplate: 'Loading',
notFoundTemplate: 'NotFoundLayout'
});
This is the before hook where I am calling the route
Router.onBeforeAction(function () {
//redirect to /login if a user is not signed and if they are not already on login (to prevent a redirect loop)
if (!Meteor.userId() && (Router.current().route.getName() !== 'login')) {
this.redirect('login');
// I also tried Router.go('login');
} else {
this.next();
}
});
This is the route where I am referencing the custom layout (that appears to be ignored):
Router.route('/login', { name: 'login'}, function(){
this.layout('UtilityLayout');
});