Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
R
red_brick_board
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Ciella Francisco
red_brick_board
Commits
ed355c41
Commit
ed355c41
authored
Mar 17, 2024
by
gab
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
added frontend to log in form
parent
71609e47
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
135 additions
and
51 deletions
+135
-51
forms.py
redbrickboard/accounts/forms.py
+2
-0
login.html
redbrickboard/accounts/templates/accounts/login.html
+31
-20
custom.css
redbrickboard/static/css/custom.css
+71
-7
base.html
redbrickboard/templates/base.html
+31
-24
No files found.
redbrickboard/accounts/forms.py
View file @
ed355c41
...
...
@@ -14,6 +14,8 @@ class CustomUserAuthenticationForm(AuthenticationForm):
self
.
fields
[
'email'
]
.
required
=
True
self
.
fields
.
pop
(
'username'
)
self
.
order_fields
([
'email'
,
'password'
])
for
visible
in
self
.
visible_fields
():
visible
.
field
.
widget
.
attrs
[
'class'
]
=
'form-control'
# Registering a User Form
class
CustomUserCreationForm
(
UserCreationForm
):
...
...
redbrickboard/accounts/templates/accounts/login.html
View file @
ed355c41
{% extends "base.html" %}
{% block head %}
<script
src=
"https://accounts.google.com/gsi/client"
async
></script>
<script
src=
"https://accounts.google.com/gsi/client"
async
defer
></script>
{% endblock %}
{% block content %}
<form
method=
"POST"
autocomplete=
"off"
>
<div
id=
"login-form"
class=
"mx-auto px-3 py-4 bg-white"
style=
"width: 23rem;"
>
<p
class=
"h1"
>
Log in
</p>
<form
method=
"POST"
autocomplete=
"off"
>
{% csrf_token %}
{{ loginform.as_p }}
<input
type=
"submit"
value=
"Log In"
/>
<div
class=
"form-group"
>
<label
class=
"h5"
for=
"email"
>
Email
</label>
{{ loginform.email }}
</div>
<div
class=
"form-group"
>
<label
class=
"h5"
for=
"password"
>
Password
</label>
{{ loginform.password }}
</div>
<input
class=
"btn-red login-btn"
type=
"submit"
value=
"Log In"
/>
<a
href=
"{% url 'accounts:register' %}"
><input
class=
"btn-red login-btn"
type=
"button"
value=
"Register"
/></a>
<div
id=
"g_id_onload"
data-client_id=
"1091426130026-resqtjvbfu1mguphrr5seg6d31k1ttqf.apps.googleusercontent.com"
data-context=
"signin"
data-ux_mode=
"redirect"
data-login_uri=
"http://localhost:8000/accounts/auth-receiver"
data-itp_support=
"tru
e"
>
data-auto_prompt=
"fals
e"
>
</div>
<div
class=
"
g_id_signin"
<div
class=
"login-btn
g_id_signin"
data-type=
"standard"
data-shape=
"pill
"
data-theme=
"filled_black
"
data-text=
"signin
_with"
data-shape=
"rectangle
"
data-theme=
"filled_blue
"
data-text=
"continue
_with"
data-size=
"large"
data-logo_alignment=
"left"
>
</div>
</form>
</form>
</div>
{% endblock %}
\ No newline at end of file
redbrickboard/static/css/custom.css
View file @
ed355c41
...
...
@@ -2,32 +2,96 @@
:root
{
--theme-prusian-blue
:
#003049
;
--theme-bright-red
:
#D62
828
;
--theme-bright-red
:
#D62
727
;
--theme-orange
:
#F77F00
;
--theme-yellow-red
:
#FCBF49
;
--theme-dutch-white
:
#EAE2B7
;
}
body
{
*
{
font-family
:
"Inter"
;
font-size
:
1rem
;
}
body
{
background-color
:
var
(
--theme-dutch-white
);
/* background-image: url("/static/images/Continuous Background.png"); */
background-image
:
url("/static/images/Continuous Background.png")
;
background-position
:
left
top
;
background-repeat
:
repeat-y
;
background-size
:
80%
;
}
.btn-red
{
transition
:
all
0.3s
ease-in
;
font-size
:
1.5vw
;
background-color
:
var
(
--theme-bright-red
);
color
:
#fff
;
border-color
:
var
(
--theme-bright-red
);
white-space
:
nowrap
;
}
.btn-red
:hover
{
transition
:
all
0.3s
ease-in
;
font-size
:
1.55vw
;
background-color
:
var
(
--theme-prusian-blue
);
color
:
#fff
;
border-color
:
var
(
--theme-prusian-blue
);
}
.nav-link
{
color
:
var
(
--theme-orange
);
transition
:
all
0.3s
ease-in
;
color
:
var
(
--theme-bright-red
)
!important
;
font-size
:
1.5vw
;
}
.col-form-label
{
font-family
:
Verdana
,
sans-serif
;
font-size
:
2vw
;
.nav-link
:hover
{
transition
:
all
0.3s
ease-in
;
font-size
:
1.55vw
;
color
:
var
(
--theme-prusian-blue
)
!important
;
text-decoration
:
underline
;
}
#trial
{
align-items
:
center
;
background-color
:
white
;
}
#featured-events-div
{
margin-top
:
7.5rem
;
height
:
100vh
;
}
#login-form
{
/* Really Bad Code Start */
margin
:
0
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
-ms-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
/* Really Bad Code End */
border-radius
:
0.625rem
;
border
:
1px
solid
#000
;
background
:
#FFF
;
box-shadow
:
0px
4px
4px
0px
rgba
(
0
,
0
,
0
,
0.25
);
}
.form-group
>
label
{
margin-top
:
1.19rem
;
}
.form-group
>
input
:not
([
type
=
"submit"
])
{
border-radius
:
0.625rem
!important
;
border
:
1px
solid
#000
!important
;
background
:
#FFF
!important
;
}
.login-btn
{
margin-top
:
1.62rem
;
width
:
100%
;
border-radius
:
0.3125rem
;
background
:
#DF4E4E
;
border-color
:
#DF4E4E
;
}
\ No newline at end of file
redbrickboard/templates/base.html
View file @
ed355c41
...
...
@@ -6,37 +6,44 @@
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}
{% block head %}
{% endblock %}
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
charset=
"utf-8"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"{% static '/css/custom.css' %}"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"static/images/Logo.png"
>
<title>
{% block title %}Red Brick Board{% endblock %}
</title>
{% block head %}
{% endblock %}
</head>
<body>
<main>
<nav
class=
"navbar navbar-expand-md navbar-light bg-light"
>
<div
class=
"container-fluid"
>
<a
class=
"navbar-brand"
href=
"#"
>
<img
src=
"{% static '/images/Logo with Name.png' %}"
alt=
"Red Brick Board"
style=
"width:30%; height:auto; padding-left:10%;"
>
<nav
class=
"px-5 navbar navbar-expand navbar-light bg-light"
>
<div
class=
"container-fluid justify-content-end"
>
<a
class=
"navbar-brand"
href=
"/"
>
<img
src=
"{% static '/images/Logo with Name.png' %}"
alt=
"Red Brick Board"
style=
"width:30%; height:auto;"
>
</a>
<button
class=
"navbar-toggler"
type=
"button"
data-bs-toggle=
"collapse"
data-bs-target=
"#navbarNavAltMarkup"
aria-controls=
"navbarNavAltMarkup"
aria-expanded=
"false"
aria-label=
"Toggle navigation"
>
<span
class=
"navbar-toggler-icon"
></span>
</button>
<div
class=
"collapse navbar-collapse justify-content-end align-center"
id=
"navbarNavAltMarkup"
>
<div
class=
"navbar-nav"
>
<a
class=
"nav-link"
href=
"#"
>
Event Catalog
</a>
</div>
{% comment %}
<form
class=
"container-fluid justify-content-start"
>
<button
class=
"btn"
type=
"button"
>
Log Out
</button>
</form>
{% endcomment %}
<div
class=
"collapse navbar-collapse justify-content-end"
id=
"navbarNav"
>
<div
class=
"navbar-nav d-flex"
>
<a
class=
"nav-link"
href=
"/eventcatalog"
style=
"margin-right: 2.94rem;"
>
Event Catalog
</a>
{% if user.is_authenticated %}
<form
role=
"Log Out"
action=
"{% url 'accounts:logout' %}"
method=
"post"
>
{% csrf_token %}
<button
class=
"btn btn-red"
type=
"submit"
>
Log Out
</button>
</form>
{% else %}
<form
role=
"Log In"
action=
"{% url 'accounts:login' %}"
method=
"post"
>
{% csrf_token %}
<button
class=
"btn btn-red"
type=
"submit"
>
Log In
</button>
</form>
{% endif %}
</div>
</div>
</nav>
</nav>
{% block content %}
{% endblock %}
</main>
</body>
</html>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment