Merge pull request #6 from avraiel/user_auth

adds log in frontend and home app

redbrickboard/accounts/forms.py

@@ -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

 {% 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-container" class="d-flex my-5">
+    <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="true">
+            data-auto_prompt="false">
             </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>
+</div>
 {% endblock %}
\ No newline at end of file

redbrickboard/eventcatalog/templates/eventcatalog/index.html

@@ -2,16 +2,6 @@
 
 {% block content %}
 
-{% if user.is_authenticated %}
-Hi {{ user.first_name }} {{ user.last_name }}!
-<form action="{% url 'accounts:logout' %}" method="post">
-    {% csrf_token %}
-    <button type="submit">Log Out</button>
-</form>
-{% else %}
-<p>You are not logged in</p>
-<a href="{% url 'accounts:login' %}">Log In</a>
-<a href="{% url 'accounts:register' %}">Register</a>
-{% endif %}
+
 
 {% endblock %}
\ No newline at end of file

redbrickboard/eventcatalog/urls.py

@@ -3,5 +3,5 @@ from django.urls import path
 from . import views
 
 urlpatterns = [
-    path('', views.homepage, name="index"),
+    path('', views.index, name="index"),
 ]
\ No newline at end of file

redbrickboard/eventcatalog/views.py

@@ -2,5 +2,5 @@ from django.shortcuts import render
 from django.http import HttpResponse
 
 # Create your views here.
-def homepage(request):
+def index(request):
     return render(request, "eventcatalog/index.html")
\ No newline at end of file

redbrickboard/home/admin.py

+from django.contrib import admin
+
+# Register your models here.

redbrickboard/home/apps.py

+from django.apps import AppConfig
+
+
+class HomeConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'home'

redbrickboard/home/models.py

+from django.db import models
+
+# Create your models here.

redbrickboard/home/templates/home/index.html

+{% extends "base.html" %}
+
+{% block content %}
+<div id="featured-events-div" class="py-3 px-5 container-fluid bg-white">
+    <p class="h1">Featured Events</p>
+    {% comment %} Delete text-center if you want it to be left-aligned {% endcomment %}
+    <div class="container text-center">
+        {% comment %} 
+        Loop for events 
+        https://getbootstrap.com/docs/5.3/components/card/#images
+        {% endcomment %}
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file

redbrickboard/home/tests.py

+from django.test import TestCase
+
+# Create your tests here.

redbrickboard/home/urls.py

+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('', views.home, name="index"),
+]
\ No newline at end of file

redbrickboard/home/views.py

+from django.shortcuts import render
+
+# Create your views here.
+def home(request): 
+    return render(request, "home/index.html")
\ No newline at end of file

redbrickboard/redbrickboard/settings.py

@@ -40,6 +40,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'home',
     'accounts',
     'eventcatalog',
     'event_management',

redbrickboard/redbrickboard/urls.py

@@ -22,5 +22,6 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path("accounts/", include("accounts.urls"), name="accounts"),
     path("event_management/", include("event_management.urls", namespace="event_management")),
-    path("", include("eventcatalog.urls"), name="index"),
+    path("eventcatalog/", include("eventcatalog.urls"), name="eventcatalog"),
+    path("", include("home.urls"), name="index"),
 ]

redbrickboard/static/css/custom.css

@@ -2,32 +2,118 @@
 
 :root {
      --theme-prusian-blue: #003049;
-     --theme-bright-red: #D62828;
+     --theme-bright-red: #D62727;
      --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);
+}
+
+@media (max-width: 950px) {
+     .navbar-brand { 
+        width: 90%; 
+     } 
+}
+
+@media (max-width: 780px) {
+     .navbar-brand { 
+        width: 85%; 
+     } 
+}
+
+@media (max-width: 560px) {
+     .navbar-brand { 
+        width: 75%; 
+     } 
+}
+
+@media (max-width: 425px) {
+     .navbar-brand { 
+        width: 70%; 
+     } 
+}
+
 .nav-link {
-     color: var(--theme-orange);
+     transition: all 0.3s ease-in;
+     color: var(--theme-bright-red) !important;
      font-size: 1.5vw;
+     white-space: nowrap;
 }
 
-.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-container {
+     align-items: center;
+     justify-content: center;
+}
+
+#login-form {
+     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

@@ -6,37 +6,47 @@
   {% 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-lg 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>
+    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
+      <ul class="navbar-nav d-flex">
+        <li class="nav-item">
+          <a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>
+        </li>
+        <li class="nav-item">
+        {% 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 %}
+        </li>
+      </ul>
   </div>
-     </nav>
+</nav>
   {% block content %}
   {% endblock %}
-  </main>
 </body>
 </html>
\ No newline at end of file