Skip to content

Boodle
Boodle
Commit d84da1ff authored by Martina Therese R. Reyes's avatar Martina Therese R. Reyes
Browse files
Options

Implemented a log-in, log-out feature thanks to Dennis Ivy. 

Modified the views and urls mostly.
For markup and styling, I used his source code for the aesthetics.
Modified the html and forms files too.
parent 34d901ed
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 6 deletions
boodlesite/settings.py
View file @ d84da1ff
...@@ -36,7 +36,7 @@ ALLOWED_HOSTS = [] ...@@ -36,7 +36,7 @@ ALLOWED_HOSTS = []
INSTALLED_APPS = [ INSTALLED_APPS = [
'django.contrib.admin', 'django.contrib.admin',
'django.contrib.auth', 'django.contrib.auth', # Login, logout
'django.contrib.contenttypes', 'django.contrib.contenttypes',
'django.contrib.sessions', 'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.messages',
...@@ -134,4 +134,3 @@ MEDIA_ROOT = os.path.join(BASE_DIR, 'boodlesite\media') ...@@ -134,4 +134,3 @@ MEDIA_ROOT = os.path.join(BASE_DIR, 'boodlesite\media')
STATICFILES_DIRS = [ STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'boodlesite\static'), os.path.join(BASE_DIR, 'boodlesite\static'),
] ]
\ No newline at end of file
boodlesite/templates/base.html
View file @ d84da1ff
...@@ -32,15 +32,15 @@ ...@@ -32,15 +32,15 @@
<body> <body>
<nav id="main"> <nav id="main">
<h1>Hello, {{request.user}}</h1>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
<li><a href="/profile">My Profile</a></li> <li><a href="/profile">My Profile</a></li>
<li><a href="/store">My Store</a></li> <li><a href="/store">My Store</a></li>
<li><a href="{% url 'logout' %}">Logout</a></li>
</ul> </ul>
</nav> </nav>
......
boodlesite/templates/registration/login.html 0 → 100644
View file @ d84da1ff
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #7abecc !important;
}
.user_card {
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #74cfbf;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.form_container {
margin-top: 20px;
}
#form-title{
color: #fff;
}
.login_btn {
width: 100%;
background: #33ccff !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #f7ba5b !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
#messages{
background-color: grey;
color: #fff;
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<h3 id="form-title">LOGIN</h3>
</div>
<div class="d-flex justify-content-center form_container">
<form method="POST" action="">
{% csrf_token %}
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="username" placeholder="Username..." class="form-control">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="password" placeholder="Password..." class="form-control" >
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<input class="btn login_btn" type="submit" value="Login">
</div>
</form>
</div>
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
<div class="mt-4">
<div class="d-flex justify-content-center links">
Don't have an account? <a href="{% url 'register' %}" class="ml-2">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
boodlesite/templates/registration/register.html 0 → 100644
View file @ d84da1ff
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #7abecc !important;
}
.user_card {
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #74cfbf;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.form_container {
margin-top: 20px;
}
#form-title{
color: #fff;
}
.login_btn {
width: 100%;
background: #33ccff !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #f7ba5b !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
</style>
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<h3 id="form-title">REGISTER ACCOUNT</h3>
</div>
<div class="d-flex justify-content-center form_container">
<form method="POST" action="">
{% csrf_token %}
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="username">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-envelope-square"></i></span>
</div>
<input type="email" name="email">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="password1">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="password2">
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<input class="btn login_btn" type="submit" value="Register Account">
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Already have an account? <a href="{% url 'login' %}" class="ml-2">Login</a>
</div>
</div>
</div>
</div>
</div>
<script>
/* Because i didnt set placeholder values in forms.py they will be set here using vanilla Javascript
//We start indexing at one because CSRF_token is considered and input field
*/
//Query All input fields
var form_fields = document.getElementsByTagName('input')
form_fields[1].placeholder='Username..';
form_fields[2].placeholder='Email..';
form_fields[3].placeholder='Enter password...';
form_fields[4].placeholder='Re-enter Password...';
for (var field in form_fields){
form_fields[field].className += ' form-control'
}
</script>
</body>
</html>
main/forms.py
View file @ d84da1ff
...@@ -12,6 +12,9 @@ import datetime, pytz ...@@ -12,6 +12,9 @@ import datetime, pytz
from django.contrib.admin.widgets import AdminSplitDateTime from django.contrib.admin.widgets import AdminSplitDateTime
from django.contrib.admin import widgets from django.contrib.admin import widgets
from django.contrib.auth.forms import UserCreationForm
from django import forms
from django.contrib.auth.models import User
from django.core.exceptions import ValidationError from django.core.exceptions import ValidationError
...@@ -123,3 +126,8 @@ class editBoodleUserForm(forms.ModelForm): ...@@ -123,3 +126,8 @@ class editBoodleUserForm(forms.ModelForm):
'username': _('User Name'), 'username': _('User Name'),
'displayname': _('Display Name') 'displayname': _('Display Name')
} }
class CreateUserForm(UserCreationForm):
class Meta:
model=User
fields=['username', 'email', 'password1', 'password2']
\ No newline at end of file
main/urls.py
View file @ d84da1ff
...@@ -21,4 +21,7 @@ urlpatterns = [ ...@@ -21,4 +21,7 @@ urlpatterns = [
path('profile/<int:pk>', profile, name='profileid'), path('profile/<int:pk>', profile, name='profileid'),
path('editstore/<int:pk>', editStore, name='editstoreid'), path('editstore/<int:pk>', editStore, name='editstoreid'),
path('editProfile/<int:pk>', editProfile, name='editProfile'), path('editProfile/<int:pk>', editProfile, name='editProfile'),
path('login', loginPage, name='login'),
path('register', registerPage, name='register'),
path('logout', logoutUser, name='logout')
] ]
\ No newline at end of file
main/views.py
View file @ d84da1ff
from django.shortcuts import render, redirect from django.shortcuts import render, redirect
from django.http import HttpResponseRedirect from django.http import HttpResponseRedirect
from django.http import HttpResponse from django.http import HttpResponse
from django.contrib.auth.forms import UserCreationForm
from django.core.exceptions import ValidationError from django.core.exceptions import ValidationError
from django.contrib import messages
from django.contrib.auth import authenticate, login, logout
from .models import * from .models import *
from .forms import * from .forms import *
from datetime import datetime, timedelta from datetime import datetime, timedelta
def registerPage(request):
form = CreateUserForm()
if request.method == 'POST':
form = CreateUserForm(request.POST)
if form.is_valid():
form.save()
user_name = form.cleaned_data.get('username')
messages.success(request, 'Account was create for ' + user_name)
return redirect('login')
context = {'form':form}
return render(request, 'boodlesite/templates/registration/register.html', context)
def loginPage(request):
if request.method == 'POST':
user_name = request.POST.get('username')
pass_word = request.POST.get('password')
boodle_user = authenticate(request, username=user_name, password=pass_word)
if boodle_user is not None:
login(request, boodle_user)
return redirect('/')
else:
messages.info(request, 'Username OR Password is incorrect') # all msgs get sent here will be output
context = {}
return render(request, 'boodlesite/templates/registration/login.html', context)
def logoutUser(request):
logout(request)
return redirect('login')
def homepage(request): def homepage(request):
print(Auction.objects.all()) print(Auction.objects.all())
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment