Add Login page

src/newsreader/accounts/templates/accounts/login.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block head %}
+  <link href="{% static 'accounts/dist/css/accounts.css' %}" rel="stylesheet" />
+{% endblock %}
+
+{% block content %}
+  <main class="main">
+    <form class="login-form" method="POST" action="{% url 'accounts:login' %}">
+      {% csrf_token %}
+      <h4>Login</h4>
+
+      <fieldset class="login-form__fieldset">
+        {{ form }}
+      </fieldset>
+      <fieldset class="login-form__fieldset">
+        <button class="button button--confirm" type="submit">Login</button>
+        <a><small>I forgot my password</small></a>
+      </fieldset>
+    </form>
+  </main>
+{% endblock %}

src/newsreader/accounts/urls.py

@@ -0,0 +1,9 @@
+from django.urls import include, path
+
+from newsreader.accounts.views import LoginView, LogoutView
+
+
+urlpatterns = [
+    path("login/", LoginView.as_view(), name="login"),
+    path("logout/", LogoutView.as_view(), name="logout"),
+]

src/newsreader/accounts/views.py

@@ -1 +1,16 @@
-# Create your views here.
+from django.contrib.auth.views import LoginView as DjangoLoginView
+from django.contrib.auth.views import LogoutView as DjangoLogoutView
+from django.urls import reverse_lazy
+
+
+# TODO redirect to homepage when logged in
+class LoginView(DjangoLoginView):
+    template_name = "accounts/login.html"
+
+    def get_success_url(self):
+        # TODO redirect to homepage
+        return reverse_lazy("admin:index")
+
+
+class LogoutView(DjangoLogoutView):
+    next_page = reverse_lazy("accounts:login")

src/newsreader/conf/base.py

@@ -61,7 +61,7 @@ ROOT_URLCONF = "newsreader.urls"
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [],
+        "DIRS": [os.path.join(BASE_DIR, "templates")],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [

src/newsreader/static/src/scss/accounts/components/form/_form.scss

@@ -0,0 +1,27 @@
+.login-form {
+  @extend .form;
+
+  h4 {
+    margin: 0;
+    padding: 20px 24px 5px 24px;
+  }
+
+  &__fieldset {
+    @extend .form__fieldset;
+  }
+
+  &__fieldset * {
+    padding: 10px;
+  }
+
+  &__fieldset:last-child {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  &__fieldset:last-child {
+    .button {
+      padding: 10px 50px;
+    }
+  }
+}

src/newsreader/static/src/scss/accounts/components/form/index.scss

@@ -0,0 +1 @@
+@import "form";

src/newsreader/static/src/scss/accounts/components/index.scss

@@ -0,0 +1,2 @@
+@import "./main/index";
+@import "./form/index";

src/newsreader/static/src/scss/accounts/components/main/_main.scss

@@ -0,0 +1,8 @@
+.main {
+  @extend .main;
+
+  margin: 5% auto;
+  width: 50%;
+
+  border-radius: 4px;
+}

src/newsreader/static/src/scss/accounts/components/main/index.scss

@@ -0,0 +1 @@
+@import "main";

src/newsreader/static/src/scss/accounts/index.scss

@@ -0,0 +1,4 @@
+@import "../partials/variables";
+@import "../components/index";
+
+@import "./components/index";

src/newsreader/static/src/scss/components/body/_body.scss

@@ -0,0 +1,5 @@
+.body {
+  margin: 0;
+  padding: 0;
+  background-color: $gainsboro;
+}

src/newsreader/static/src/scss/components/body/index.scss

@@ -0,0 +1 @@
+@import "body";

src/newsreader/static/src/scss/components/button/_button.scss

@@ -0,0 +1,28 @@
+.button {
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  padding: 10px 50px;
+
+  width: 50px;
+
+  border: none;
+  border-radius: 2px;
+
+  font-family: $button-font;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--confirm {
+    color: $white;
+    background-color: $confirm-green;
+
+    &:hover {
+      background-color: lighten($confirm-green, +5%);
+    }
+  }
+}

src/newsreader/static/src/scss/components/button/index.scss

@@ -0,0 +1 @@
+@import "button";

src/newsreader/static/src/scss/components/error/_error.scss

@@ -0,0 +1,5 @@
+%error {
+  background-color: $error-red;
+  color: $white;
+  list-style: none;
+}

src/newsreader/static/src/scss/components/error/_errorlist.scss

@@ -0,0 +1,3 @@
+.errorlist {
+  @extend %error;
+}

src/newsreader/static/src/scss/components/error/index.scss

@@ -0,0 +1,2 @@
+@import "error";
+@import "errorlist";

src/newsreader/static/src/scss/components/form/_form.scss

@@ -0,0 +1,13 @@
+.form {
+  display: flex;
+  flex-direction: column;
+
+  font-family: $form-font;
+
+  &__fieldset {
+    display: flex;
+    flex-direction: column;
+
+    border: none;
+  }
+}

src/newsreader/static/src/scss/components/form/index.scss

@@ -0,0 +1 @@
+@import "form";

src/newsreader/static/src/scss/components/index.scss

@@ -0,0 +1,6 @@
+@import "./body/index";
+@import "./button/index";
+@import "./form/index";
+@import "./main/index";
+@import "./navbar/index";
+@import "./error/index";

src/newsreader/static/src/scss/components/main/_main.scss

@@ -0,0 +1,4 @@
+.main {
+  margin: 1% 10% 5% 10%;
+  background-color: $white;
+}

src/newsreader/static/src/scss/components/main/index.scss

@@ -0,0 +1 @@
+@import "main";

src/newsreader/static/src/scss/components/navbar/_navbar.scss

@@ -0,0 +1,43 @@
+.nav {
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+
+  background-color: $white;
+  box-shadow: 0px 5px darken($azureish-white, +10%);
+
+  ol {
+    display: flex;
+    justify-content: flex-start;
+
+    width: 80%;
+    list-style-type: none;
+  }
+
+  a {
+    color: $nickel;
+    text-decoration: none;
+  }
+
+  &__item {
+    margin: 0px 10px;
+
+    border: none;
+    border-radius: 2px;
+
+    background-color: $azureish-white;
+
+    &:hover{
+      background-color: lighten($azureish-white, +5%);
+    }
+
+    & a {
+      @extend .button;
+    }
+  }
+
+  &__item:last-child {
+    margin: 0 10px 0 auto;
+  }
+}

src/newsreader/static/src/scss/components/navbar/index.scss

@@ -0,0 +1 @@
+@import "navbar";

src/newsreader/static/src/scss/partials/_variables.scss

@@ -0,0 +1,26 @@
+@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:600&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Barlow&display=swap');
+
+$button-font: "IBM Plex Sans", sans-serif;
+$form-font: "Barlow", sans-serif;
+
+/* colors */
+$white: rgba(255, 255, 255, 1);
+
+$confirm-green: rgba(46,204,113, 1);
+$error-red: rgba(231,76,60, 1);
+
+// light blue
+$azureish-white: rgba(205, 230, 245, 1);
+
+// dark blue
+$pewter-blue: rgba(141, 167, 190, 1);
+
+// light gray
+$gainsboro: rgba(224, 221, 220, 1);
+
+// medium gray
+$roman-silver: rgba(135, 145, 158, 1);
+
+//dark gray
+$nickel: rgba(112, 112, 120, 1);

src/newsreader/templates/base.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Newreader</title>
+    {% block head %}{% endblock %}
+  </head>
+
+  <body class="body">
+    <nav class="nav">
+      <ol>
+        {% if request.user.is_authenticated %}
+          <li class="nav__item"><a href="#">Home</a></li>
+          <li class="nav__item"><a href="#">Settings</a></li>
+          <li class="nav__item"><a href="{% url 'accounts:logout' %}">Logout</a></li>
+        {% else %}
+          <li class="nav__item"><a href="{% url 'accounts:login' %}">Login</a></li>
+        {% endif %}
+      </ol>
+    </nav>
+
+    {% if messages %}
+      <ul class="messages">
+        {% for message in messages %}
+          <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+            {{ message }}
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+
+    {% block content %}{% endblock content %}
+  </body>
+</html>

src/newsreader/urls.py

@@ -2,6 +2,7 @@ from django.conf import settings
 from django.contrib import admin
 from django.urls import include, path
 
+from newsreader.accounts.urls import urlpatterns as login_urls
 from newsreader.news.collection.urls import endpoints as collection_endpoints
 from newsreader.news.core.urls import endpoints as core_endpoints
 
@@ -9,6 +10,7 @@ from newsreader.news.core.urls import endpoints as core_endpoints
 endpoints = collection_endpoints + core_endpoints
 
 urlpatterns = [
+    path("accounts/", include((login_urls, "accounts")), name="accounts"),
     path("admin/", admin.site.urls, name="admin"),
     path("api/", include((endpoints, "api")), name="api"),
 ]