Login and logout

Author: Andres Vargas

demo/static/src/Pages/Login.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="p-6 bg-indigo-800 min-h-screen flex justify-center items-center">
+    <div class="w-full max-w-md">
+      <logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
+      <form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="submit">
+        <div class="px-10 py-12">
+          <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
+          <div class="mx-auto mt-6 w-24 border-b-2" />
+          <text-input v-model="form.email" :errors="$page.errors.email" class="mt-10" label="Email" type="text" autofocus autocapitalize="off" />
+          <text-input v-model="form.password" class="mt-6" label="Password" type="password" />
+          <label class="mt-6 select-none flex items-center" for="remember">
+            <input id="remember" v-model="form.remember" class="mr-1" type="checkbox">
+            <span class="text-sm">Remember Me</span>
+          </label>
+        </div>
+        <div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center">
+          <a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
+          <loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import LoadingButton from '../Shared/LoadingButton'
+import Logo from '../Shared/Logo'
+import TextInput from '../Shared/TextInput'
+
+export default {
+  metaInfo: { title: 'Login' },
+  components: {
+    LoadingButton,
+    Logo,
+    TextInput,
+  },
+  props: {
+    errors: Object,
+  },
+  data() {
+    return {
+      sending: false,
+      form: {
+        email: '[email protected]',
+        password: 'secret',
+        remember: null,
+      },
+    }
+  },
+  methods: {
+    submit() {
+      this.sending = true
+      this.$inertia.post(this.route('demo:login'), {
+        email: this.form.email,
+        password: this.form.password,
+        remember: this.form.remember,
+      }).then(() => this.sending = false)
+    },
+  },
+}
+</script>

demo/static/src/app.js

@@ -26,8 +26,10 @@ import OrganizationEdit from "./Pages/Organizations.Edit";
 import ContactCreate from "./Pages/Contacts.Create";
 import OrganizationCreate from "./Pages/Organizations.Create";
 
+import Login from "./Pages/Login";
 
 const pages = {
+  'Login': Login,
   'Index': Index,
   'Contacts': Contacts,
   'Contacts.Edit': ContactEdit,

demo/urls.py

@@ -3,14 +3,20 @@
 from demo.views import index , contacts,organizations
 from demo.views import contact_edit, organization_edit
 from demo.views import contact_create, organization_create
+from demo.views import login_view as login
+from demo.views import logout_view as logout
 
 app_name="demo"
 
 urlpatterns = [
 
+    path('login', login, name='login'),
+    path('users/logout', logout, name='logout'),
+
     path('reports', index, name='reports'),
     path('users/', index, name='users'),
-    path('users/logout', index, name='logout'),
+
+
     path('users/edit/<int:id>', index, name='users.edit'),
     path('contacts/edit/<int:id>', contact_edit, name='contacts.edit'),
     path('contacts/create/', contact_create, name='contacts.create'),

demo/views.py

@@ -10,6 +10,8 @@
 from .serializers import ContactSchema, OrganizationSchema
 import json
 from marshmallow import  INCLUDE, ValidationError
+from django.contrib.auth import authenticate, login, logout
+
 
 
 def organization_create(request):
@@ -155,3 +157,26 @@ def contact_create(request):
 def index(request):
     # share_flash(request, errors=["yeah",])
     return render_inertia(request, "Index")
+
+def logout_view(request):
+    logout(request)
+    return redirect(reverse("demo:login"))
+
+def login_view(request):
+    errors = {}
+    if request.user.is_authenticated:
+        return redirect(reverse("demo:dashboard"))
+
+    if request.method == "POST":
+        data  = json.loads(request.body)
+        username = data.get("email")
+        password = data.get("password")
+        user = authenticate(request, username=username, password=password)
+        if user is not None:
+            login(request, user)
+            return redirect(reverse("demo:dashboard"))
+        else:
+            errors = {'email':["Wrong login",]}
+            share_flash(request, errors=errors)
+    props = {'errors':errors}
+    return render_inertia(request, "Login",props)