Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

How to implement login and registration functionality using ajax?


I have metronic 8.0.38 I want to implement ajax call to server-side with django for login and registration pupose. How can we implement it?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

We are about to release the Django starter kit for Metronic in a few days with the main layout, dashboard, and auth pages(sign in, signup, reset the password, and new password).

Regards.



That would be something very interesting.

Thank you



Hi Nikihil,

Fortunately, Metronic comes with ajax code out of the box.

Firstly, I'd recommend following this tutorial and adjusting the code to your liking.
How to Create Custom Django User Model

Once you've accomplish that you can create a view that only takes in a POST request.

Here is some code from my project that may help you.
views.py

@require_POST
def post(self):
form = YOURUSERFORM(self.POST)
if form.is_valid():
YOURUSERNAMEFIELD = self.POST.get("USERNAME_FIELD_NAME_ON_FRONTEND_FORM")
YOURPASSWORDFIELD = self.POST.get("PASSWORD_FIELD_NAME_ON_FRONTEND_FORM")
response_data = {}

user = USERMODEL(YOURUSERNAMEFIELD=YOURUSERNAMEFIELD, YOURPASSWORDFIELD=YOURPASSWORDFIELD)
user.save()

response_data["result"] = "success" # THIS IS OPTIONAL IF YOU WANT A SUCCESS MESSAGE

return HttpResponse(
json.dumps(response_data),
content_type="application/json"
)
else:
message = form.errors.as_json()
status_code = 400
return HttpResponse(
json.dumps(message),
status=status_code,
content_type="application/json"
)


Next - If you've already purchased Metronic copy the authentication code from the Laravel version. Works just fine.

Path - metronic_v8.0.38\laravel\public\demo1\js\custom\authentication\sign-in\general.js

Of course you will have to adjust the form validation part slightly to match what you want, but this will at least get you started.

I know this isn't a full tutorial ,but it should at least get you started in the right direction.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(