How to overwite django password_reset_confirm page? - html

I am a new Django developer. I am trying to overwrite django password_reset_confirm.html page with the below HTML file(change_pwd.html).
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static "icon/tab_logo.png"%}">
<!-- Bootstrap -->
<link href="{% static "web/vendors/bootstrap/dist/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{% static "web/src/css/login.css" %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static "web/vendors/jquery/dist/jquery.min.js" %}"></script>
</head>
<body >
<div class="vertical-center">
<div class="container">
<div class="row">
<div class=" col-md-4 col-md-offset-4">
<div id="loginbox" >
<h1 class="text-center title">Change Password</h1>
</br></br>
<form id="passwordform" role="form" method="post" action=".">
{% csrf_token %}
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password1" placeholder="password" autocomplete="off">
</div>
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password2" placeholder="repeat password" autocomplete="off">
</div>
<div style="margin-top:10px" >
<!-- Button -->
<input id="btn-change-pwd" class="btn btn-primary btn_extend " type="submit" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have also overwritten the project's Urls.py as below:
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
When I reset password, the page is redirected to admin/templates/registration/password_reset_confirm.html page and then displays below message:
The password reset link was invalid, possibly because it has already been used. Please request a new password reset.
Based on admin/templates/registration/password_reset_confirm.html, this error happens whenever reset_password link is not valid. When I remove {'template_name' : 'change_pwd.html'} from the Url, it works. But I do not know how to fix this error in change_pwd.html.

Django user templates must be inside a registration folder.
Ex: templates/registration/change_pwd.html
Change
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
to
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'registration/change_pwd.html'}, name='password_reset_confirm'),

Related

Why this error showing while created a form to upload image in Django

Error raised is here
enter code here
This is the view to addpost and inherited from CreateView.
views.py
class PostAddView(CreateView):
template_name="add_post.html"
form_class=PostForm
model=AddPost
success_url=reverse_lazy("index")
context_object_name="posts"
models.py
class AddPost(models.Model):
post=models.ImageField(upload_to="postimages",null=True)
caption=models.CharField(max_length=200)
user=models.ForeignKey(MyUser,on_delete=models.CASCADE)
created_date=models.DateTimeField(auto_now_add=True)
Here MyUser is a abstract user
forms.py
class PostForm(forms.ModelForm):
class Meta:
model=AddPost
fields=["post","caption"]
widget={
"post":forms.FileInput(attrs={"class":"form-control"}),
"caption":forms.Textarea(attrs={"class":"form-control","rows":3})
}
template given to render the form.
(add_post.html)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2"></div>
<div class="col-3">
<form action="" method="post" enctype="multipart/form-data">
{%csrf_token%}
{{form.as_p}}
<input type="submit" value="Post">
</form>
</div>
<div class="col-2"></div>
</div>
</div>
</body>
</html>

Link to html pages in ionic creator pages

I created a basic registration page using creator.ionic.io. I have downloaded , deployed in phone and came as expected.
I tried to explore the ionic generated html page and ended up with a question.
I could not find how index.html is rendering the register.html page i.e. where is the link inside div tag to register.html page.
There are 2 config.xml present in project and I am not sure which is considered to build.
One is inside android platform - I:\myprojects\silyap\platforms\android\res\xml\config.xml
Other is at project name folder:
I:\myprojects\silyap\config.xml
Both config.xml has tag content src="index.html"
Can someone clarify it.
Below is the index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
register.html page
<ion-view title="Register">
<ion-content overflow-scroll="true" padding="true" scroll="false" class="has-header has-footer">
<form class="list">
<ion-list>
<label class="item item-input" name="Number">
<span class="input-label">Number</span>
<input type="tel" placeholder="">
</label>
<label class="item item-input" name="Email">
<span class="input-label">Email</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" placeholder="">
</label>
</ion-list>
<button class="button button-block ">Register</button>
</form>
</ion-content>
</ion-view>
Awesome that you're using Ionic Creator. If you're unfamiliar with actual Ionic code, I recommend checking out http://AppCamp.io for a run through of how Angular + Ionic work together.

How can I align my text element?

I'm making a webpage for logging in. I have a text element "OR LOG IN WITH" for different providers that I want to align up with the images (google...). I tried setting it vertical align top in CSS but that did not work. Can you help me?
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title>Login / Create</title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<a href="/">
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1></a>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<form id="search_form" action="/account/do_login" method="post">
<table><tr><td>
LOG IN</td><td>
<input name="email" size="35" title="email" type="text"
></td><td> <input name="password" size="35" title="password" type="password"
>
</td><td>
<input value="Login" type="submit"></td>
</tr>
<tr><td>
</td><td><div class="logintext">YOUR E-MAIL</div></td><td><div class="logintext"> PASSWORD</div></td><td>
</tr></form >
<form autocomplete="off" id="create_user" action="/create/" method="post">
<tr><td>
CREATE ACCOUNT
</td><td> <input name="email" value="" size="35" title="email" type="text"
></td><td> <input name="password" value="" size="35" title="password" type="password"
>
</td><td>
<input value="Create Account" type="submit"></td>
</tr> <tr><td>
</td><td><div class="logintext"> YOUR E-MAIL</div></td><td><div class="logintext"> DESIRED PASSWORD</div></td><td>
</tr> <tr><td><div class="logintext2">
OR LOG IN WITH</div> </td><td><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></td><td><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"> </td><td></td></tr>
</table>
</form>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
CSS is available here.
I added in CSS this:
.logintext2 {
position: relative;
top: -15px;
}
it should look like this now, except with actual images, lol.
EDIT
Also, I'm pretty sure that at the top of your CSS you have everything listed and then have this:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
if it is, you can just replace it with an asterisk (*). This just saves you approx. 490 characters, so it will load slightly faster.
First of all remove this class "logintext2" from div tag, And it to td class ="logintext2"
and replace this style
.logintext2 {
vertical-align: top;
}

html form sending GET instead of POST on form submit

Pardon my web skills but i have a very rudimentary problem.
I have this html form which should ideally call my /login url with post but for some reason it always sends a get request to that url and fails. I can't figure out how that is happening.
This is my html form
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Login - MobileMedic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="">
<meta name="author" content="" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,800italic,400,600,800" type="text/css">
<link rel="stylesheet" href="./css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./css/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="./css/App.css" type="text/css" />
<link rel="stylesheet" href="./css/Login.css" type="text/css" />
<link rel="stylesheet" href="./css/custom.css" type="text/css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/alert.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/plugins/parsley/parsley.js"></script>
</head>
<body>
<div class="gifload"></div>
<div id="login-container">
<div id="logo">
<img src="./images/logos/logo-login.png" alt="Logo" />
</div>
<div id="login">
<h3>Welcome to Apprick Technologies.</h3>
<h5>Please sign in to get access.</h5>
<form method="post" action="/login" id="login-form" class="form parsley-form" data-validate="parsley">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name= "Signin" value="Signin"/>
</div>
</form>
</div>
</div>
<!-- /#login-container -->
</body>
To make the question more clear i use express js with parse.com and here are the two routing defined
app.get('/login', function(req, res) {
res.send('get is called');
});
app.post('/login', function(req, res) {
res.send('post is called');
});
Now no matter what i provide in my form method i always get "get is called" in the browser on submitting the button.
I also tried to debug what is happening in by the developer console and this is what i get
I tried your code and it is working as a "POST" request. Try changing your request to "GET" and you can notice in the URL that it has something like this at the end "?Signin=Signin".
Include a "name" attribute to your input tags.
Sample:
<input type="email" name="email" class="form-control" id="email" placeholder="Email" required="required">
And you can see something like this upon submitting the form:
/login?email=testemail%40test.test&Signin=Signin

How to Display error message when record not found in database

How to search records in table . i want to search data using id. if that id is available in database then open edit.jsp if not exist then display any error message. i want to use jsp technology.
Search.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Page</title>
<link rel="stylesheet" type="text/css" href="hicourt.css"/>
<script language="javascript" type="text/javascript">
</script>
<body onLoad="randomString()">
<form name="f1" method="post" action="edit.jsp">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation" align="center">
Search Registration Number
</div>
<div id="content_area">
<p class="contact"><label for="name"><span style="font-weight:bold">EDIT</span></label>
<input id="id" name="id" placeholder="Advocate Reg Number" required="" type="text">
</p>
<div style="text-align:center">
<input name="submit" id="submit" tabindex="10" value="EDIT" align="middle"type="submit">
</div> </div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>