I trying to grasp this new field of webbprogramming and is it possible to make the user login from a form which is built into the html file itself? If so, how can i achieve this?
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-sign-in"></i> Login </a>
<form class="dropdown-menu p-4 dropdown-menu-right" method="post" action="#">
{% csrf_token %}
<div class="form-group">
<label for="id_username">Username</label>
<input id="id_username" name="username" type="text" class="form-control" placeholder="user.name">
</div>
<div class="form-group">
<label for="id_password">Password</label>
<input id="id_password" type="password" class="form-control" placeholder="Password">
</div>
{% if form.errors %}
<p class=" label label-danger">
Your username and password didn't match. Please try again.
</p>
{% endif %}
<input type="submit" value="Login" class="btn btn-primary" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
</li>
You have to deal with the view.
In you views.py you should have :
user = authenticate(username = "username", password = "password")
login(request, user)
Related
I'm running my code through validator and it's coming back with four errors which I don't know how to fix as the code has been imported from django forms.
Does anyone know how to fix these?
<div class="form-group">
<form method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<p><label for="id_username">Username:</label> <input type="text" name="username" maxlength="150" autofocus class="form-control" required id="id_username"> <span class="helptext">Required. 150 characters or
fewer. Letters, digits and #/./+/-/_ only.</span></p>
<p><label for="id_first_name">First name:</label> <input type="text" name="first_name" class="form-control" maxlength="100" required id="id_first_name"></p>
<p><label for="id_last_name">Last name:</label> <input type="text" name="last_name" class="form-control" maxlength="100" required id="id_last_name"></p>
<p><label for="id_email">Email:</label> <input type="email" name="email" required id="id_email"></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" autocomplete="new-password" class="form-control" required id="id_password1"> <span class="helptext">
<ul>
<li>Your password can’t be too similar to your other personal information.</li>
<li>Your password must contain at least 8 characters.</li>
<li>Your password can’t be a commonly used password.</li>
<li>Your password can’t be entirely numeric.</li>
</ul>
</span></p>
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" autocomplete="new-password" class="form-control" required id="id_password2"> <span class="helptext">Enter the same password as before, for verification.</span></p>
<div class="d-grid">
<button class="btn btn-dark ">Register</button>
</div>
</form>
</div>
I have used:
from django import forms
and in my views.py file I used:
from .forms import SignUpForm
my register.html page is as following:
{% extends 'base.html' %}
{% block title %}Register{% endblock %}
{% block content %}
<h1 class="my-4">Register</h1>
<div class="form-group">
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<div class="d-grid">
<button class="btn btn-dark ">Register</button>
</div>
</form>
</div>
{% endblock %}
I'm using Laravel 5.4 and I have never tried jquery so I have no idea what I'm doing, unfortunately.
This is my blade:
<h3>Comments:</h3>
<ul class="list-unstyled activity-list">
#foreach ($threads->comments()->where('parent', 0)->orderBy('created_at', 'desc')->get() as $comment)
<li>
<img src="{{ $comment->user->getAvatar() }}" alt="Avatar" class="img-circle pull-left avatar">
<p><a href="{{ route('profile.view', $comment->user->id) }}">
{{ $comment->user->user_name }}</a>:
<br>
{{ $comment->content }}
<span class="timestamp">{{ $comment->created_at->diffForHumans() }}</span>
</p>
#if ($threads->lock == 0)
<a id="btn-comment" style="padding-left:3.5em">reply</a>
<br>
<form action="{{ route('threads.comments.add') }}" id="comment" method="POST" style="padding-left:3.5em; display:none;">
{{ csrf_field() }}
<input type="hidden" name="thread_id" value="{{ $threads->id }}">
<input type="hidden" name="parent" value="{{ $comment->id }}">
<input type="text" name="content" class="form-control" placeholder="Add reply...">
<input type="submit" class="btn btn-primary btn-xs" value="Add Reply">
</form>
<br>
#endif
#foreach ($comment->childs as $child)
<div style="padding-left:3.5em;">
<img src="{{ $child->user->getAvatar() }}" alt="Avatar" class="img-circle pull-left avatar">
<p><a href="{{ route('profile.view', $child->user->id) }}">
<span style="padding-left:1em;">{{ $child->user->user_name }}</a>: </span>
<br>
<span style="padding-left:1em;">{{ $child->content }}</span>
<span class="timestamp" style="padding-left:4.3em;">{{ $child->created_at->diffForHumans() }}</span>
</p>
</div>
#endforeach
</li>
#endforeach
</ul>
Here's my custom script:
<script>
$(document).ready(function(){
$('#btn-comment').click(function(){
$('#comment').toggle('slide');
});
});
</script>
These lines specifically are the ones that I'm trying to run using the script above:
#if ($threads->lock == 0)
<a id="btn-comment" style="padding-left:3.5em">reply</a>
<br>
<form action="{{ route('threads.comments.add') }}" id="comment" method="POST" style="padding-left:3.5em; display:none;">
{{ csrf_field() }}
<input type="hidden" name="thread_id" value="{{ $threads->id }}">
<input type="hidden" name="parent" value="{{ $comment->id }}">
<input type="text" name="content" class="form-control" placeholder="Add reply...">
<input type="submit" class="btn btn-primary btn-xs" value="Add Reply">
</form>
<br>
#endif
Ask me if you need further detail
I created a signup and signin form. when I create a user using signup it is working perfectly and creates user. but when i try to login with same user it is not able to login. It actually go to else block and show the wrong credential messages.
Whenever I try to login with my existing user it shows wrong credential.
Error message |
Users data | Login window
view.py
from django.shortcuts import render, HttpResponse, redirect
from .models import Contact
from django.contrib import messages
from blog.models import Post
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login, logout
def handleSignUp(request):
if request.method == 'POST':
username = request.POST.get('username')
fname = request.POST.get('fname')
lname = request.POST.get('lname')
email = request.POST.get('email')
pass1 = request.POST.get('pass1')
pass2 = request.POST.get('pass2')
#check verify sign field
if len(username) > 10:
messages.error(request, 'User name must not more than 10 characters')
return redirect('/')
if not username.isalnum():
messages.error(request, 'User name must contain alpha numeric characters')
return redirect('/')
if pass1 != pass2:
messages.error(request, 'Password did not match')
return redirect('/')
#create user
myuser = User.objects.create_user(username, email, pass1)
myuser.first_name = fname
myuser.last_name = lname
myuser.save()
messages.success(request, 'You account has been Successfully created')
return redirect('/')
else:
return HttpResponse('404 not found')
def handleLogin(request):
loginusername = request.POST.get('loginusername')
loginpassword = request.POST.get('loginpassword')
user = authenticate(request, username=loginusername, password=loginpassword)
login(request, user)
if user is None:
messages.error(request, 'Wrong Credential, try again')
return redirect('/')
else:
messages.success(request, 'Your are sucessfully logged in')
return redirect('/')
return HttpResponse('handle login')
def handleLogout(request):
logout(request)
messages.success(request, 'Sucessfully Log out')
return redirect('/')
base.html
{% if user.is_authenticate %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Welcome {{request.user}}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/logout">Logout</a>
</div>
</li>
{% else %}
<!-- Button trigger for signup modal -->
<button type="button" class="btn btn-outline-success ml-2" data-toggle="modal" data-target="#signupModal">
Sign Up
</button>
<!-- Button trigger for signup modal -->
<button type="button" class="btn btn-outline-success ml-2" data-toggle="modal" data-target="#signinModal">
Sign In
</button>
{% endif %}
</div>
</nav>
<!-- this is for messages dissmissal bar -->
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
<strong>Message: </strong>{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
<!-- ------------------------------------------------- -->
<!--SignUp Modal Start From Here -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signupModalTitle">Sign Up Here</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="signup/" method="POST"> {% csrf_token %}
<div class="form-group">
<label for="username">User Name</label>
<input type="text" class="form-control" id="username"
placeholder="choose unique username (alpha numeric)" name="username" required>
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="First Name" name="fname"
required>
</div>
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Last Name" name="lname"
required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com"
name="email" required>
</div>
<div class="form-group">
<label for="pass1">Password</label>
<input type="password" class="form-control" id="pass1" name="pass1" required>
</div>
<div class="form-group">
<label for="pass2">Re-Enter Password</label>
<input type="password" class="form-control" id="pass2" name="pass2" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Sign Up</button>
</div>
{% csrf_token %}
</form>
</div>
</div>
</div>
</div>
<!-- ------------------------------------------------- -->
<!--Sign IN Modal Start From Here -->
<div class="modal fade" id="signinModal" tabindex="-1" aria-labelledby="signinModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signinModalTitle">Sign In Here</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="login/" method="POST">{% csrf_token %}
<div class="form-group">
<label for="loginusername">User Name</label>
<input type="text" class="form-control" id="loginusername" placeholder="loginusername
name=" loginusername" required>
</div>
<div class="form-group">
<label for="loginpassword">Password</label>
<input type="password" class="form-control" id="loginpassword" name="loginpassword"
required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% block body %}
{% endblock %}
It is user.is_authenticated not user.is_authenticate:
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Welcome {{request.user}}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/logout">Logout</a>
</div>
</li>
{% else %}
Edit
It seems like you are giving wrong name attribute in your HTML. Your name is loginusername, should be loginusername. So:
<div class="form-group">
<label for="loginusername">User Name</label>
<input name="loginusername" type="text" class="form-control" id="loginusername" placeholder="loginusername" required>
</div>
i try to submit form in foreach blade laravel but why it is not checked after submit?
<form method="get" class="form-inline float-left">
<div class="form-group mb-2">
<input type="text" id="keyword" name="keyword" class="form-control" placeholder="keyword here" value="{{ $keyword }}">
</div>
<ul class="nav nav-pills" id="nav">
#foreach($menu as $d)
<li role="presentation">
<a class="text-capitalize" >
<input type="checkbox" name="cx[]" value="{{ $d->custom_search_id }}" {!! (is_array(old('cx[]')) and in_array($d->custom_search_id, old('cx[]'))) ? ' checked' : '' !!} >
{!! $d->name !!}
</a>
</li>
#endforeach
</ul>
<div class="form-group mb-2">
<input type="submit" class="btn btn-primary" value="GO!">
</div>
</form>
#CMIW
<form method="get" class="form-inline float-left">
<div class="form-group mb-2">
<input type="text" id="keyword" name="keyword" class="form-control" placeholder="keyword here" value="{{ $keyword }}">
</div>
<ul class="nav nav-pills" id="nav">
#foreach($menu as $d)
<li role="presentation">
<a class="text-capitalize" >
<input type="checkbox" name="cx[]" value="{{ $d->custom_search_id }}" {!! (is_array(old('cx')) and in_array($d->custom_search_id, old('cx'))) ? 'checked' : null !!}>
{!! $d->name !!}
</a>
</li>
#endforeach
</ul>
<div class="form-group mb-2">
<input type="submit" class="btn btn-primary" value="GO!">
</div>
</form>
If you want to check the old input (with multiple values), you should use the input name without the square brackets when checking the old values (not old('cx[]') but old('cx'), such as:
<ul class="nav nav-pills" id="nav">
#foreach($menu as $d)
<li role="presentation">
<a class="text-capitalize">
<input type="checkbox" name="cx[]" value="{{ $d->custom_search_id }}" {!! (is_array(old('cx')) and in_array($d->custom_search_id, old('cx'))) ? ' checked' : '' !!} >
{!! $d->name !!}
</a>
</li>
#endforeach
</ul>
i found the answer, create some function like this fisrt:
<?php
function checkCX($id){
foreach(\Request::input("cx") as $input){
if($input == $id){
return true;
}
}
return false;
}
?>
<form method="get" class="form-inline float-left">
<div class="form-group mb-2">
<input type="text" id="keyword" name="keyword" class="form-control" placeholder="keyword here" value="{{ $keyword }}">
</div>
<ul class="nav nav-pills" id="nav">
#foreach($menu as $d)
<li role="presentation">
<a class="text-capitalize" >
<input type="checkbox" name="cx[]" value="{{ $d->custom_search_id }}" #if(!empty($d->custom_search_id)) {{ checkCX($d->custom_search_id) ? 'checked' : '' }} #else #endif >
{!! $d->name !!}
</a>
</li>
#endforeach
</ul>
<div class="form-group mb-2">
<input type="submit" class="btn btn-primary" value="GO!">
</div>
</form>
Here I am trying a sample bootstrap form that has a login dropdown, for username and password, I am including the code below, when the login form is activated, the form floats out of the menu on the right side of the screen, The code is below:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target="nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand" title="">
Test
</a>
<ul class="nav nav-pills pull-right">
<li>
<form class="input-append" method="GET" action="/search" style="margin-top:4px;margin-bottom:5px;">
<input type="text" title="Enter keyword(s) to find" id="TT" name="TT" class="span2" maxlength="40">
<button type="submit" class="bton">
<i class="icon-search" title="Search"></i>
</button>
</form>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="formLogin" class="form">
<label>Login</label>
<input name="username" id="username" type="text" placeholder="Username" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Enter your username" required="">
<input name="password" id="password" type="password" placeholder="Password" title="Enter your password" required=""><br>
<button type="button" id="btnLogin" class="btn">Login</button>
</form>
<form>New User? Sign-up..</form>
<form id="formRegister" class="form collapse">
<input name="email" id="inputEmail" type="email" placeholder="Email" required="">
<input name="username" id="inputUsername" type="text" placeholder="Username" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a username" required=""><br>
<input name="password" id="inputpassword" type="password" placeholder="Password" required="">
<input name="verify" id="inputVerify" type="password" placeholder="Password (again)" required=""><br>
<button type="button" id="btnRegister" class="btn">Sign Up</button>
</form>
</div>
</li>
</ul>
What is the problem in the dropdown, I tried a nav pull-left in the dropdown,
but it did not work, thanks.
Fixed the bug, the line reading:
<div class="dropdown-menu" style="padding:17px;">
should have a dropdown-menu-right added so the correct line should be:
<div class="dropdown-menu dropdown-menu-right" style="padding:17px;">
The "dropdown-menu-right" wraps the menu correctly!