added frontend to log in form

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-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>
 
 {% endblock %}
\ No newline at end of file

redbrickboard/static/css/custom.css

@@ -2,32 +2,96 @@
 
 :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);
+}
+
 .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

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