Skip to content

Commit d14fb9c

Browse files
AdityasinghvatsAdityasinghvats
committed
Add custom form tags and enhance template structure for login and registration
1 parent c6126c1 commit d14fb9c

File tree

7 files changed

+128
-98
lines changed

7 files changed

+128
-98
lines changed

‎blog/templates/layout.html

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,3 @@
1-
{% comment %} {% load static %}
2-
<!DOCTYPE html>
3-
<html lang="en" data-bs-theme="dark">
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
8-
<title>
9-
{% block title %}
10-
Welcome to Django blog
11-
{% endblock %}
12-
</title>
13-
</head>
14-
<body >
15-
<nav class="navbar navbar-expand-lg bg-body-tertiary">
16-
<div class="container-fluid">
17-
<a class="navbar-brand text-blue" href="{% url "tweet_list" %}">MessDekho.com</a>
18-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
19-
<span class="navbar-toggler-icon"></span>
20-
</button>
21-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
22-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
23-
<li class="nav-item">
24-
<a class="nav-link active" aria-current="page" href="{% url "tweet_list" %}">Home</a>
25-
</li>
26-
</ul>
27-
<form class="d-flex" role="search" action="{% url 'tweet_search' %}" method="post">
28-
{% csrf_token %}
29-
<input class="form-control me-2" type="search" name="tweet" placeholder="Search" aria-label="Search">
30-
<button class="btn btn-outline-success" type="submit">Search</button>
31-
</form>
32-
{% if user.is_authenticated %}
33-
<form action="{% url "logout" %}" method="post">
34-
{% csrf_token %}
35-
<button class="btn btn-danger m-2" type="submit">Logout</button>
36-
</form>
37-
{% else %}
38-
<a class="btn btn-primary ms-2" href="{% url "login" %}">Login</a>
39-
<a class="btn btn-primary m-2" href="{% url "register" %}">Register</a>
40-
{% endif %}
41-
</div>
42-
</div>
43-
</nav>
44-
<div class="container">
45-
{% block content %}{% endblock %}
46-
</div>
47-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
48-
</body>
49-
</html> {% endcomment %}
501
{% load static %}
512
<!DOCTYPE html>
523
<html lang="en" data-bs-theme="dark">

‎blog/templates/registration/login.html

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,47 @@
11
{% extends "layout.html" %}
2+
{% load form_tags %}
3+
4+
{% block title %}
5+
Login - MessDekho
6+
{% endblock %}
27

38
{% block content %}
49
<div class="container mt-5">
510
<div class="row justify-content-center">
611
<div class="col-md-6">
7-
<div class="card">
8-
<div class="card-header">
9-
<h3 class="text-center">Login</h3>
12+
<div class="card border-0 shadow-lg bg-white bg-opacity-10">
13+
<div class="card-header bg-white bg-opacity-10 border-0">
14+
<h3 class="text-center text-white mb-0">
15+
<i class="bi bi-person-circle me-2"></i>Login
16+
</h3>
1017
</div>
11-
<div class="card-body">
18+
<div class="card-body p-4">
1219
<form method="post">
1320
{% csrf_token %}
14-
{{form.as_p}}
15-
<div class="d-grid gap-2">
16-
<button class="btn btn-primary" type="submit">Login</button>
21+
{% for field in form %}
22+
<div class="mb-3">
23+
<label for="{{ field.id_for_label }}" class="form-label text-white">{{ field.label }}</label>
24+
{{ field.errors }}
25+
{{ field|addclass:'form-control bg-light bg-opacity-25 border-0 text-white' }}
26+
</div>
27+
{% endfor %}
28+
<div class="d-grid gap-2 mt-4">
29+
<button class="btn btn-light btn-lg rounded-pill" type="submit">
30+
<i class="bi bi-box-arrow-in-right me-2"></i>Login
31+
</button>
1732
</div>
1833
</form>
1934
</div>
20-
<div class="card-footer text-center">
21-
<p class="mb-0">Don't have an account? <a href="{% url 'register' %}">Register Here</a></p>
35+
<div class="card-footer bg-white bg-opacity-10 border-0 text-center">
36+
<p class="mb-0 text-white">
37+
Don't have an account?
38+
<a href="{% url 'register' %}" class="text-white text-decoration-none">
39+
<i class="bi bi-person-plus-fill me-1"></i>Register Here
40+
</a>
41+
</p>
2242
</div>
2343
</div>
2444
</div>
2545
</div>
2646
</div>
27-
{% endblock %}
47+
{% endblock %}

‎blog/templates/registration/register.html

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,55 @@
11
{% extends "layout.html" %}
2+
{% load form_tags %}
3+
4+
{% block title %}
5+
Register - MessDekho
6+
{% endblock %}
27

38
{% block content %}
49
<div class="container mt-5">
510
<div class="row justify-content-center">
611
<div class="col-md-6">
7-
<div class="card">
8-
<div class="card-header">
9-
<h3 class="text-center">Register</h3>
12+
<div class="card border-0 shadow-lg bg-white bg-opacity-10">
13+
<div class="card-header bg-white bg-opacity-10 border-0">
14+
<h3 class="text-center text-white mb-0">
15+
<i class="bi bi-person-plus-fill me-2"></i>Register
16+
</h3>
1017
</div>
11-
<div class="card-body">
18+
<div class="card-body p-4">
1219
<form method="post">
1320
{% csrf_token %}
14-
{{form.as_p}}
15-
<div class="d-grid gap-2">
16-
<button class="btn btn-primary" type="submit">Register</button>
21+
{% for field in form %}
22+
<div class="mb-3">
23+
<label for="{{ field.id_for_label }}" class="form-label text-white">{{ field.label }}</label>
24+
{% if field.errors %}
25+
<div class="alert alert-danger py-2">
26+
{{ field.errors }}
27+
</div>
28+
{% endif %}
29+
{{ field|addclass:'form-control bg-light bg-opacity-25 border-0 text-white' }}
30+
{% if field.help_text %}
31+
<small class="form-text text-white-50">{{ field.help_text }}</small>
32+
{% endif %}
33+
</div>
34+
{% endfor %}
35+
<div class="d-grid gap-2 mt-4">
36+
<button class="btn btn-light btn-lg rounded-pill" type="submit">
37+
<i class="bi bi-person-plus-fill me-2"></i>Register
38+
</button>
1739
</div>
1840
</form>
1941
</div>
20-
<div class="card-footer text-center">
21-
<p class="mb-0">Already have an account? <a href="{% url 'login' %}">Login Here</a></p>
42+
<div class="card-footer bg-white bg-opacity-10 border-0 text-center">
43+
<p class="mb-0 text-white">
44+
Already have an account?
45+
<a href="{% url 'login' %}" class="text-white text-decoration-none">
46+
<i class="bi bi-box-arrow-in-right me-1"></i>Login Here
47+
</a>
48+
</p>
2249
</div>
2350
</div>
2451
</div>
2552
</div>
2653
</div>
2754
{% endblock %}
55+

‎blog/tweet/templates/tweet_form.html

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,50 @@
11
{% extends "layout.html" %}
2+
{% load form_tags %}
23

34
{% block title %}
4-
Twitter
5+
{% if form.instance.pk %}Edit Tweet{% else %}Create Tweet{% endif %} - MessDekho
56
{% endblock %}
67

78
{% block content %}
89
<div class="container mt-5">
910
<div class="row justify-content-center">
1011
<div class="col-md-6">
11-
<div class="card">
12-
<div class="card-header">
13-
<h3 class="text-center">
14-
{%if form.instance.pk %}
15-
Edit tweet
16-
{%else%}
17-
Create tweet
18-
{%endif%}
12+
<div class="card border-0 shadow-lg bg-white bg-opacity-10">
13+
<div class="card-header bg-white bg-opacity-10 border-0">
14+
<h3 class="text-center text-white mb-0">
15+
<i class="bi {% if form.instance.pk %}bi-pencil-square{% else %}bi-plus-circle{% endif %} me-2"></i>
16+
{% if form.instance.pk %}
17+
Edit Tweet
18+
{% else %}
19+
Create Tweet
20+
{% endif %}
1921
</h3>
2022
</div>
21-
<div class="card-body">
22-
<form method="post" enctype="multipart/form-data" class="form">
23-
{% csrf_token %}
24-
{{ form.as_p}}
25-
<button class="btn btn-warning" type='submit'>Create</button>
23+
<div class="card-body p-4">
24+
<form method="post" enctype="multipart/form-data" class="form">
25+
{% csrf_token %}
26+
{% for field in form %}
27+
<div class="mb-3">
28+
<label for="{{ field.id_for_label }}" class="form-label text-white">{{ field.label }}</label>
29+
{{ field.errors }}
30+
{{ field|addclass:'form-control bg-light bg-opacity-25 border-0 text-white' }}
31+
{% if field.help_text %}
32+
<small class="form-text text-white-50">{{ field.help_text }}</small>
33+
{% endif %}
34+
</div>
35+
{% endfor %}
36+
<div class="d-grid gap-2 mt-4">
37+
<button class="btn btn-light btn-lg rounded-pill" type="submit">
38+
<i class="bi {% if form.instance.pk %}bi-check-circle{% else %}bi-plus-circle{% endif %} me-2"></i>
39+
{% if form.instance.pk %}Update{% else %}Create{% endif %}
40+
</button>
41+
</div>
2642
</form>
2743
</div>
28-
<div class="card-footer text-center">
29-
<p class="mb-0"><a href="{% url "tweet_list" %}">Back to tweet list</a></p>
44+
<div class="card-footer bg-white bg-opacity-10 border-0 text-center">
45+
<a href="{% url 'tweet_list' %}" class="btn btn-link text-white text-decoration-none">
46+
<i class="bi bi-arrow-left me-2"></i>Back to tweets
47+
</a>
3048
</div>
3149
</div>
3250
</div>

‎blog/tweet/templates/tweet_search.html

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,26 @@
66

77
{% block content %}
88
{% if search_result %}
9-
<div class="container row gap-3 p-2">
10-
{% for tweet in search_result %}
11-
<div class="card" style="width: 18rem;">
12-
<img src="{{tweet.photo.url}}" class="card-img-top p-2" alt="...">
13-
<div class="card-body">
14-
<h5 class="card-title">{{tweet.user.username}}</h5>
15-
<p class="card-text">{{tweet.text}}</p>
16-
{%if tweet.user == user%}
17-
<a href="{% url "tweet_edit" tweet.id %}" class="btn btn-primary">Edit</a>
18-
<a href="{% url "tweet_delete" tweet.id %}" class="btn btn-danger">Delete</a>
19-
{%endif%}
20-
</div>
9+
<div class="container p-2">
10+
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
11+
{% for tweet in search_result %}
12+
<div class="col">
13+
<div class="card h-100">
14+
<img src="{{tweet.photo.url}}" class="card-img-top p-2" alt="...">
15+
<div class="card-body">
16+
<h5 class="card-title">{{tweet.user.username}}</h5>
17+
<p class="card-text">{{tweet.text}}</p>
18+
{%if tweet.user == user%}
19+
<div class="d-flex gap-2">
20+
<a href="{% url "tweet_edit" tweet.id %}" class="btn btn-primary">Edit</a>
21+
<a href="{% url "tweet_delete" tweet.id %}" class="btn btn-danger">Delete</a>
22+
</div>
23+
{%endif%}
24+
</div>
25+
</div>
26+
</div>
27+
{% endfor %}
2128
</div>
22-
{% endfor %}
23-
</div>
2429
{% endif %}
2530
<a class="btn btn-primary position-fixed bottom-0 end-0 m-4" href="{% url 'tweet_create' %}">Create a tweet</a>
2631

‎blog/tweet/templatetags/__init__.py

Whitespace-only changes.

‎blog/tweet/templatetags/form_tags.py

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
from django import template
2+
3+
register = template.Library()
4+
5+
@register.filter(name='addclass')
6+
def addclass(field, css):
7+
"""Add a CSS class to a form field."""
8+
return field.as_widget(attrs={"class": css})

0 commit comments

Comments
 (0)