<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: nūh ben</title>
    <description>The latest articles on DEV Community by nūh ben (@nuh).</description>
    <link>https://dev.to/nuh</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F265420%2F49dca611-5fdf-4e2b-9b30-c06323a0c6ec.jpeg</url>
      <title>DEV Community: nūh ben</title>
      <link>https://dev.to/nuh</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nuh"/>
    <language>en</language>
    <item>
      <title>Django LoginView and flash messages</title>
      <dc:creator>nūh ben</dc:creator>
      <pubDate>Sat, 06 Jun 2020 16:19:41 +0000</pubDate>
      <link>https://dev.to/nuh/django-loginview-and-flash-messages-4k9k</link>
      <guid>https://dev.to/nuh/django-loginview-and-flash-messages-4k9k</guid>
      <description>&lt;h2&gt;
  
  
  The strory
&lt;/h2&gt;

&lt;p&gt;Today I was working on an authentication system with &lt;strong&gt;Django&lt;/strong&gt;, so I created a function based view that handles users registration, once the registration is complete it makes sense to redirect the users somewhere else typically a login page and notify them with a &lt;em&gt;flash message&lt;/em&gt; (an alert on the front-end) to tell them what is going on. This was easily achieved by combining django &lt;em&gt;flash messages&lt;/em&gt; and &lt;em&gt;bootstrap alerts&lt;/em&gt;, but when I wanted to to use the same approach for the login part, I struggled because for login in the users I used the pre-built django class &lt;strong&gt;LoginView&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The solution
&lt;/h2&gt;

&lt;p&gt;The trick was to use my own &lt;strong&gt;login view&lt;/strong&gt; that extends the django default &lt;strong&gt;LoginView&lt;/strong&gt; and also uses the django &lt;em&gt;messages mixins&lt;/em&gt;:&lt;/p&gt;

&lt;h3&gt;
  
  
  views.py
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;django.contrib.messages.views&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;SuccessMessageMixin&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;django.contrib.auth.views&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;LoginView&lt;/span&gt;
&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MyLoginView&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;SuccessMessageMixin&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;LoginView&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;template_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;'users/login.html'&lt;/span&gt;
    &lt;span class="n"&gt;success_url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;'blog-home'&lt;/span&gt;
    &lt;span class="n"&gt;success_message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;'Welcome to your profile'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;On the template, it is best to display the messages on the base template so we are sure they would be seen where ever the user is right now.&lt;/p&gt;

&lt;h3&gt;
  
  
  templates.html
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight jinja"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"col-10 ml-auto&amp;gt;
   &lt;/span&gt;&lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nv"&gt;messages&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;&lt;span class="s"&gt;
       &lt;/span&gt;&lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="nv"&gt;message&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nv"&gt;messages&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;&lt;span class="s"&gt;
          &amp;lt;div class="&lt;/span&gt;&lt;span class="na"&gt;row&lt;/span&gt; &lt;span class="na"&gt;justify-content-end&lt;/span&gt;&lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
             &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"col-4 text-center"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
                 &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"alert alert-&lt;/span&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="nv"&gt;message.tags&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
                         &lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;message&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt;
                 &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
              &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
           &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endfor&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
   &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt;&lt;span class="cp"&gt;%}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



</description>
      <category>django</category>
      <category>html</category>
      <category>css</category>
      <category>python</category>
    </item>
  </channel>
</rss>
