I am using django framework. I embed the youtube video link in html, I want to know that the user spend how much time on the video and save the time in database with his deatils.
the details of the user is stored in cookies. like email.
here is my code.
<div id="request" class="modal fade" {% if request.session.email %} data-backdrop="static" {% endif %} role="dialog">
{% if 'email' not in request.session %}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal" aria-label="Close">×</span>
<h2 class="modal-title">Get start</h2>
</div>
<div class="modal-body text-center">
<form class="form-request" action="" method="post">
{% csrf_token %}
<div class="row-fields row">
<div class="form-group col-field">
<input type="text" class="form-control" name="name" required placeholder="Name *" id="name">
</div>
<div class="form-group col-field">
<input type="email" class="form-control" name="email" required placeholder="Email *" id="email">
</div>
<div class="form-group col-field">
<input type="number" class="form-control" name="phone" required placeholder="Phone *" id="phone">
</div>
<div class="col-sm-12 buttons">
<button type="submit" class="bttn-hover color-1" data-text-hover="Submit">Send request</button>
</div>
</div>
</form>
</div>
</div>
</div>
{% elif request.session.email %} {% comment %} <a href="http://www.youtube.com/watch?v=ANwf8AE3_d0"> {% endcomment %}
<iframe class="embed-responsive-item set-style-of-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY/?autoplay=1;enablejsapi=1"
allowfullscreen style="height:50%; width:65%" id="myvideo-iframe"></iframe>
<button class="btn btn-close button-closing-style" aria-label="Close" onclick="my_video_pause();"
class="close" data-dismiss="modal">close</button>
<a href="http://cdn.onlinewebfonts.com/svg/img_414950.png" class="button-closing-style" onclick="my_video_pause();" data-dismiss="modal">
</a>
{% endif %}
</div>
</div>
Related
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 am working on an application using Angular-7 frontend. In the form that is shown below, the form field elements are truncated and not everything is displayed:
addModal
<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Role</h5>
<button type="button" class="close" (click)='closeAddModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.name">
{{ error.name }}
</div>
<form #editRoleForm=ngForm>
<div class="form-group">
<label for="name">Name</label>
<input type="name" name="name" id="inputName" class="form-control" placeholder="Name" [(ngModel)]="form.name" required>
</div>
<div class="form-group">
<label for="name">Permissions</label>
<div *ngFor="let permission of permissions">
<input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkboxAdd($event)"> {{ permission.name }}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editRoleForm.valid">Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
</div>
</div>
</div>
</div>
editModal
<div id="editModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Role</h5>
<button type="button" class="close" (click)='closeEditModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.name">
{{ error.name }}
</div>
<form #newRoleForm=ngForm>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required [(ngModel)]="data.name"/>
</div>
<div class="form-group">
<label for="name">Permissions</label>
<div *ngFor="let permission of permissions">
<input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkbox($event)" *ngIf="!data.permission.includes(permission.name)">
<input type="checkbox" name="{{ permission.name }}" value="{{ permission.name }}" (change)="checkbox($event)" *ngIf="data.permission.includes(permission.name)" checked> {{ permission.name }}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" [disabled]="!newRoleForm.valid" (click)='editsubmit()'>Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeEditModal()'>Close</button>
</div>
</div>
</div>
</div>
How do I style the form, so that all the form elements will be displayed (I can't even see the submit button)? It may even be in three columns.
I have used django's default registration. I want to edit this forms because it's appearance does not look very good to me. I want to convert the instructions into tool tip or something better looking how can I do it?I am new to django
)
html
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
For this you can use django bootstrap forms or you can make your own custom tempalate for registering the user.
If you want django bootstrap form which are pretty good you can try like this:
First install pip install django-bootstrap4
Then add the bootstrap4 into your INSTALLED_APPS:
INSTALLED_APPS = [
...........
'bootstrap4',]
Then you can render the forms in your template with this tag:
{% load bootstrap4 %}
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
EDIT: This is just a demo you can change this design as you want:
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
Username:<br>
<input type="text" name="username" placeholder="Username"><br>
Password:<br>
<input type="password" name="password1" placeholder="Password"><br>
Password Confirmation:<br>
<input type="password" name="password2" placeholder="Confirm Password"><br><br>
<input type="submit" value="Submit">
</form>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
This html form is not submitting data and i don't know why.I have tried to find the error and i do not seem to get around it,any help will be gladly appreciated
{% extends 'registration/base.html' %}
{% load widget_tweaks %}
{% block title %}Create account{% endblock %}
{% block body %}
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-4 card jumbotron ">
<h2><span class="badge badge-light">Create Account</span></h2><br>
<form action="{% url 'tzuzz:create_account' %}" method="post">
{% csrf_token %}
<div class="form-group">
<label>Email </label>
<input class="form-control is-valid" type="text" name="email" placeholder="Email">
<label>Names</label>
<input class="form-control is-valid" type="text" name="names" placeholder="Enter first and last name">
<label>Sex</label>
<select class="form-control" name="sex">
<option>Male</option>
<option>Female</option>
</select>
<label>Date of birth</label>
<input class="form-control is-valid" name="date" type="date">
<label>Password</label>
<input class="form-control is-valid" type="password" name="password" placeholder="Password">
</div>
<button class="btn btn-secondary">Login</button>
</form>
<br><br>
{% if error %}
<p class="alert alert-danger alert-dismissible fade show" role="alert">
{{error}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</p>
{% endif %}
</div>
</div>
{% endblock %}
Here is the answer i forgot to include type submit in my button
<button class="btn btn-secondary" type="submit">Login</button>
i have a template that shows list of items in a cart and each items can be edited again eg. quantity etc.
The issue am having is that if i intend editing the second or third items, the bootstrap modal form that loads, displays the first item in the list,
Here is my template:
{% if show_delete_btn = True %}
<tr>
<td>{{ order_item.signer }}</td>
<td>{{ order_item.quantity }}</td>
<td>{{ order_item.item_value }}</td>
<td>{{ order_item.auth_fee }}</td>
<!-- <td>{{ order_item.id }}</td> -->
<td>
<div class="hlinks">
<a href="#" data-toggle="modal" data-target="#myModal" class="add_cert_no" title="Edit this item">
<i class="fa fa-pencil-square-o"></i>
</a>
<a href="{% url 'client:delete_item' order_item.id %}" onclick="return confirm('Are you sure you want to delete this item?')";>
<i class="fa fa-trash-o"></i>
</a>
</div>
<!--<p>{{order_item.id}}</p>-->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" id="{{order_item.id}}" attr="{{order_item.id}}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" align="left">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit or Update Item </h4>
</div>
<div class="modal-body">
<div class="alert hidden" id="alert1" role="alert">
</div>
<p id="item_make"></p>
<!--form action="{% url 'jsa_admin:duplicate_remove_item' %}" method="POST" class="special"-->
<!-- <form id="{{order_item.id}}"> -->
<form action="{% url 'client:edit_orderItem' %}" method="post" class="special" name="myForm" enctype="multipart/form-data" id="{{order_item.id}}">
{% csrf_token %}
<div class="col-md-12">
<label>Signer Name or Theme</label>
<input type="text" id="id_signer" maxlength="30" name="signer" value="{{ order_item.signer }}" placeholder = "" required/>
</div>
<div class="col-md-12">
<input type="hidden" id="id_item_id" maxlength="30" name="item_id" value="{{order_item.id}}" placeholder="" required/>
</div>
<div class="col-md-12">
<label>Quantity</label>
<input id="id_quantity" maxlength="30" name="item_quantity" type="number" value="{{ order_item.quantity }}" required/>
</div>
<div class="col-md-12">
<label>Declared Value($)</label>
<input type="number" id="id_item_value" maxlength="30" name="item_value" type="text" value="{{ order_item.item_value }}" required/>
</div>
<div class="col-md-12">
<input id="id_packing_list" maxlength="30" name="packing_list" type="hidden" placeholder="Packing List" value= "n/a" />
</div>
<div class="col-md-12">
</div>
<!-- Continue -->
<div class="modal-body">
<input type="submit" name="edit" id="edit_item" class='btn pull-right' value="Edit"/>
</div>
</form><br>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endif %}
how can i make it load other items on the list also