nav bar, login/logout views

imanirak · Apr 24, 2022 · b35940f · b35940f
1 parent 998321e
commit b35940f
Show file tree

Hide file tree

Showing 8 changed files with 277 additions and 31 deletions.
diff --git a/HAM/settings.py b/HAM/settings.py
@@ -119,6 +119,6 @@
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
 LOGIN_URL = '/accounts/login/'
-LOGIN_REDIRECT_URL = '/'
+LOGIN_REDIRECT_URL = '/devices/'
 LOGOUT_REDIRECT_URL = "/"
 django_heroku.settings(locals())
diff --git a/main_app/static/styles/styles.css b/main_app/static/styles/styles.css
@@ -1,3 +1,189 @@
-h1 {
-    color:blue;
-}
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Open+Sans&display=swap');
+
+:root {
+    --light-purple:#F6F5FC;
+    --pale-purple:#B9BDD2;
+    --dark-purple:#8C8FC0;
+    --dark-gray:#565656;
+}
+
+
+/*** login **/
+
+body{
+    background-color:var(--light-purple);
+    width:auto;
+    margin:0;
+}
+
+
+
+.login-page {
+    border-radius:10px;
+    box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
+    margin:100px auto auto auto;
+    padding:40px;
+    height:auto;
+    width:250px;
+
+}
+
+
+.default {
+   display:flex;
+}
+
+.nav-left {
+    all:unset;
+    background-color:white;
+    height:100vh;
+    font-family:Open sans;
+    float:left;
+    text-align: left;
+    width:15%;
+    text-transform: uppercase;
+}
+
+.nav-left a {
+    text-decoration:none;
+    display:block;
+    width:100%;
+    padding-top:20px;
+    padding-left:30px;
+    padding-bottom:20px;
+    color:var(--dark-purple);
+
+}
+
+.content {
+    justify-content:center;
+    text-align:center;
+    padding-top:50px;
+    margin:0 auto;
+
+}
+
+.loggedin {
+    background-color:white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+    text-align: right;
+    font-family:Libre Baskerville;
+    border-radius:10px;
+
+}
+
+.loggedin a {
+    display:inline-block;
+    padding:15px;
+    color:var(--dark-purple);
+
+}
+
+.loggedin li {
+    display:inline;
+
+}
+
+a {
+    text-decoration: none;
+}
+
+
+ ul {
+    list-style-type:none;
+    margin:0;
+    padding:0;
+  }
+
+ .default  li a {
+    display: block;
+    width: 60px;
+  }
+
+
+.title {
+    font-family:Libre Baskerville;
+    color:var(--dark-purple);
+}
+
+.container {
+    padding-top:200px;
+    display:flex;
+    text-align:center;
+    width:400px;
+    margin:0 auto 200px auto;
+
+
+}
+.box {
+    font-family:Open sans;
+    padding:40px;
+    border-radius:10px;
+    box-shadow: 0px 11px 25px 2px rgba(0, 0, 0, 0.14);
+}
+
+.search {
+    all:unset;
+     width: 76%;
+      color: var(--dark-purple);
+      font-weight: 700;
+      font-size: 14px;
+      letter-spacing: 1px;
+      background: rgba(136, 126, 126, 0.04);
+      padding: 10px 20px;
+      border: none;
+      border-radius: 20px;
+      outline: none;
+      box-sizing: border-box;
+      border: 2px solid rgba(0, 0, 0, 0.02);
+     text-transform:capitalize;
+        width:90px;
+
+}
+
+.register-button {
+    margin-top:50px;
+    text-transform:uppercase;
+    font-family:open sans;
+      color: var(--dark-purple);
+      font-weight: 700;
+      font-size: 14px;
+      letter-spacing: 1px;
+      background: rgba(136, 126, 126, 0.04);
+      padding: 10px 20px;
+      border: none;
+      border-radius: 20px;
+      outline: none;
+      box-sizing: border-box;
+      border: 2px solid rgba(0, 0, 0, 0.02);
+    width:175px;
+
+
+}
+
+  input {
+    all:unset;
+     width: 76%;
+      color: var(--dark-gray);
+      font-weight: 700;
+      font-size: 14px;
+      letter-spacing: 1px;
+      background: rgba(136, 126, 126, 0.04);
+      padding: 10px 20px;
+      border: none;
+      border-radius: 20px;
+      outline: none;
+      box-sizing: border-box;
+      border: 2px solid rgba(0, 0, 0, 0.02);
+    width:175px;
+
+  }
+
+
+
+
+
diff --git a/main_app/templates/base.html b/main_app/templates/base.html
@@ -15,20 +15,46 @@
 </head>
 <body>
     <nav>
-        <a href="/">HOME</a>
-        <a href="/about">About</a>
-        <a href="/admin">Admin</a>
-        <a href="/employees">All Employees</a>
-        <a href="/employees/new">Create Employees</a>
-        <a href="/devices">All Devices</a>
-        <a href="/devices/new">Create Device</a>
-        <a href="/inventory">Inventory</a>
+        {% if user.is_authenticated %}
+        <div class="loggedin">
+            <ul> 
+                <li><a href="/user/{{user.username}}">Welcome, {{user.username}}!</a></li>
+                <li><a href="/accounts/logout">Logout</a></li>
+
+        </div>
+        <div class="nav-left"> 
+            <ul>
+            <li><a href="/">HOME</a></li>
+            <li><a href="/employees">All Employees</a></li>
+           <li> <a href="/devices">All Devices</a> </li>
+           <li><a href="/inventory">Inventory</a></li> 
+        </ul> 
+        </div>
     </nav>
-    {% block nav %}
-    {% endblock %}
-    {% block body %}
-        {% block content %}
-        {% endblock %}
-    {% endblock %}
-</body>
+
+        {% else %}
+        <div class="loggedin">
+        <ul>
+            <li><span><a href="{% url 'login' %}">Login</a></span></li>
+            <li><span><a href="{% url 'signup' %}">Register</a></span></li>
+        </ul>
+    </div>
+        {% endif %}
+
+            <div class="content">
+                {% block nav %}
+                {% endblock %}
+                {% block body %}
+                    {% block content %}
+                    {% endblock %}
+                {% endblock %}
+            </body>
+           </div>
+
+
+
+
+
+
+
 </html>
diff --git a/main_app/templates/employee_list.html b/main_app/templates/employee_list.html
@@ -9,9 +9,9 @@
 <form>
     <div>
 
-        <input type="text" name="name" placeholder="name"/>
+        <!-- <input type="text" name="name" placeholder="name"/>
         <input type="submit" value="Search"/>
-    <a class ="clear" href="{% url 'employee_list' %}">Clear Search</a>
+    <a class ="clear" href="{% url 'employee_list' %}">Clear Search</a> -->
     </div>
 
 </form>

diff --git a/main_app/templates/inventory_index.html b/main_app/templates/inventory_index.html
@@ -1,15 +1,15 @@
 {% extends 'base.html' %}
 {% block content %}
 
-<form>
+<!-- <form>
     <div>
       
         <input type="text" name="name" placeholder="name"/>
         <input type="submit" value="Search"/>
  
     </div>
   
-</form>
+</form> -->
 
 <div class="container">
 

diff --git a/main_app/templates/login-style.html b/main_app/templates/login-style.html
@@ -0,0 +1,28 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="{% static 'styles/styles.css' %}">
+    <script defer src="{% static 'scripts/app.js' %}"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        {% block title %}
+        {% endblock %}
+    </title>
+</head>
+<body>
+
+            <div class="content">
+                {% block nav %}
+                {% endblock %}
+                {% block body %}
+                    {% block content %}
+                    {% endblock %}
+                {% endblock %}
+            </body>
+           </div>
+
+</html>
diff --git a/main_app/templates/registration/login.html b/main_app/templates/registration/login.html
@@ -1,11 +1,17 @@
-{% extends 'base.html' %} 
+{% extends 'login-style.html' %} 
 {% block content %}
 
-<h1 class="title">Log In</h1>
-<form method="post" action="{% url 'login' %}">
-  {% csrf_token %} {{ form.as_p }}
-  <input type="submit" value="login" />
-  <input type="hidden" name="next" value="{{ next }}" />
-</form>
+
+<div class="login-page">
+  <h1 class="title">Log In</h1>
+  <form method="post" action="{% url 'login' %}">
+    {% csrf_token %} {{ form.as_p }}
+    <input type="submit" value="login" />
+    <input type="hidden" name="next" value="{{ next }}" />
+  </form>
+</div>
+
+<a href="{% url 'signup' %}"><button class="register-button">Register</button></a>
 
 {% endblock %}
+
diff --git a/main_app/templates/signup.html b/main_app/templates/signup.html
@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'login-style.html' %} 
 
 {% block body %}
   <h2>Sign up</h2>