Merge branch 'qwann/html/user' into 'master'

Qwann/html/user

See merge request !6

evenementiel/settings_dev.py

@@ -35,6 +35,7 @@ INSTALLED_APPS = [
     'equipment.apps.EquipmentConfig',
     'event.apps.EventConfig',
     'user.apps.UserConfig',
+    'shared.apps.SharedConfig',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -43,6 +44,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'bootstrapform',
     'debug_toolbar',
+    'widget_tweaks',
 ]
 
 MIDDLEWARE_CLASSES = [
@@ -59,14 +61,10 @@ MIDDLEWARE_CLASSES = [
 
 ROOT_URLCONF = 'evenementiel.urls'
 
-STATICFILES_DIRS = [
-    os.path.join(BASE_DIR, 'var/static/'),
-]
-
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': ["var/templates/", ],
+        'DIRS': [],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -74,6 +72,7 @@ TEMPLATES = [
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'shared.shared.context_processor',
             ],
         },
     },

event/templates/event/base.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block sidenav %}
+    <div class="centered">
+        <h5 class="centered banner-text">La Nuit 2017</h5>
+    </div>
+
+    <li>
+        <a href="index.html">
+            <i class="fa fa-dashboard"></i>
+            <span>Looool</span>
+        </a>
+    </li>
+    <li class="sub-menu">
+        <a href="javascript:;" >
+            <i class="fa fa-desktop"></i>
+            <span>Prout</span>
+        </a>
+        <ul class="sub">
+            <li><a  href="general.html">Lolilol</a></li>
+            <li><a  href="buttons.html">Lorem</a></li>
+            <li><a  href="panels.html">Ipsum</a></li>
+        </ul>
+    </li>
+{% endblock %}

event/templates/event/index.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "event/base.html" %}
 
 {% block page_title %}Titre{% endblock %}
 

requirements.txt

@@ -2,3 +2,4 @@ Django==1.10.*
 Pillow==3.3.0
 psycopg2==2.6.2
 django-bootstrap-form==3.2.1
+django-widget-tweaks

shared/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

shared/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class SharedConfig(AppConfig):
+    name = 'shared'

shared/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

shared/shared.py

@@ -0,0 +1,11 @@
+from django.contrib.auth import get_user_model
+
+User = get_user_model()
+
+
+def context_processor(request):
+    '''Append extra data to the context of the given request'''
+    data = {
+            "user": request.user,
+           }
+    return data

shared/static/css/style.css

@@ -61,6 +61,18 @@ a, a:hover, a:focus {
 	text-decoration: none;
 }	
 
+/* centered columns styles */
+.row-centered {
+    text-align:center;
+}
+.col-centered {
+    display:inline-block;
+    float:none;
+    /* reset the text-align */
+    text-align:left;
+    /* inline-block space fix */
+}
+
 
 
 /*Helpers*/
@@ -157,6 +169,25 @@ ul.sidebar-menu {
     margin-top: 75px;
 }
 
+.sidebar-menu hr {
+    margin: 5px 10px;
+    border-color: #818899;
+}
+
+.sidebar-menu .banner-text {
+    text-transform: uppercase;
+    display: inline-block;
+    border-color: white;
+    border-width: 1px 0px;
+    border-style: solid;
+    margin: 15px;
+    padding: 5px;
+}
+
+.sidebar-menu .username {
+    color: #818899!important;
+}
+
 #sidebar > ul > li > ul.sub {
     display: none;
 }
@@ -324,7 +355,7 @@ a.logo span {
   margin-right: 15px;
 }
 .navbar-top-links li > a {
-  padding: 20px;
+  padding: 20px 10px;
   min-height: 60px;
   color: #797979;
 }
@@ -416,6 +447,11 @@ a.logo span {
 	font-weight: 700;
 }
 
+.ds h5 {
+	font-size: 10px;
+	font-weight: 700;
+}
+
 .ds h3 {
 	color: #ffffff;
 	font-size: 16px;
@@ -615,7 +651,7 @@ PANELS CONFIGURATIONS
 	background: #ffffff;
 	color: #ccd1d9;
 }
-
+²
 .white-panel p {
 	margin-top: 5px;
 	font-weight: 700;
@@ -649,13 +685,18 @@ PANELS CONFIGURATIONS
 	margin-left: 10px;
 }
 
+.content-panel h5 {
+	margin-left: 10px;
+        color:#fff;
+}
+
 
 
 /* FORMS CONFIGURATION */
 .form-panel {
 	background: #ffffff;
 	margin: 10px;
-	padding: 10px;
+	padding: 20px;
 	box-shadow: 0px 3px 2px #aab2bd;
 	text-align: left;
 }

shared/templates/base.html

@@ -8,9 +8,22 @@
             {% block sub_main_page_title %}{% endblock %}
 {% endblock %}
 
+{% block sidebar_menu %}
+    {% if user.is_authenticated %}
+    <h5 class="centered username">{{ user.username }}</h5>
+    {% else %}
+    <h5 class="centered username">non connecté&middot;e</h5>
+    {% endif %}
+
+    <hr/>
+        
+    {% block sidenav %}
+    {% endblock %}
+{% endblock %}
+
 {% block real_content %}
-    <div class="row">
-        <div class="col-lg-12">
+    <div class="row row-centered">
+        <div class="{% block page_size %}col-lg-12{% endblock %} col-centered">
             <h2><i class="fa fa-angle-right"></i>{% block page_title %}{% endblock %}</h2>
             {% block content %}{% endblock %}
         </div>

shared/templates/base_html.html

@@ -38,7 +38,15 @@
             <!--logo end-->
             {% include "base_nav.html" %}
         </header>
-      {% include "base_sidebar_menu.html" %}
+      <aside>
+          <div id="sidebar"  class="nav-collapse ">
+              <!-- sidebar menu start-->
+              <ul class="sidebar-menu" id="nav-accordion">
+                  {% block sidebar_menu %}{% endblock %}
+              </ul>
+              <!-- sidebar menu end-->
+          </div>
+      </aside>
       <section id="main-content">
           <section class="wrapper site-min-height">
               {% block real_content %}{% endblock %}

shared/templates/base_nav.html

@@ -1,4 +1,5 @@
             <ul class="nav navbar-top-links pull-right">
+                {% if user.is_authenticated %}
                 <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                         <i class="fa fa-bell fa-fw fa-lg"></i> <i class="fa fa-caret-down"></i>
@@ -59,21 +60,29 @@
                     <!-- /.dropdown-alerts -->
                 </li>
                 <!-- /.dropdown -->
+                {% endif %}
+                {% if user.is_authenticated %}
                 <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                         <i class="fa fa-user fa-fw fa-lg"></i> <i class="fa fa-caret-down"></i>
                     </a>
                     <ul class="dropdown-menu dropdown-user">
-                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
+                        <li><a href="#"><i class="fa fa-user fa-fw"></i>Mon profile</a>
                         </li>
-                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
+                        <li><a href="{% url "user:password_change" %}"><i class="fa fa-unlock-alt fa-fw"></i>Changer de mot de passe</a>
                         </li>
                         <li class="divider"></li>
-                        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
+                        <li><a href="{% url "user:logout" %}"><i class="fa fa-sign-out fa-fw"></i>Se déconnecter</a>
                         </li>
                     </ul>
                     <!-- /.dropdown-user -->
                 </li>
                 <!-- /.dropdown -->
+                {% else %}
+                <li>
+                    <a href="{% url "user:login" %}">
+                        <i class="fa fa-sign-in fa-fw fa-lg"></i></a>
+                </li>
+                {% endif %}
             </ul>
             <!-- /.navbar-top-links -->

shared/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

shared/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

user/templates/user/base_user.html

@@ -1,7 +1,38 @@
 {% extends "base.html" %}
 
-{% block aside %}
-    {% block user_aside_before %}{% endblock %}
-    <p>Les comptes utilisateurs vous donnent accès à la gestion et d'évènements. Vous pouvez vous connecter par le CAS ENS ou via votre compte si vous n'avez pas d'identifiants CAS. Pour créer un tel compte il est nécessaire d'avoir une clée ; merci de contacter un-e administrat-rice-eur pour en obtenir une.</p>
-    {% block user_aside_after %}{% endblock %}
+{% block sidenav %}
+    {% if not user.is_authenticated %}
+    <li>
+        <a href="{% url "user:login" %}">
+            <i class="fa fa-sign-in"></i>
+            <span>Se connecter</span>
+        </a>
+    </li>
+    <li>
+        <a href="{% url "user:create_user" %}">
+            <i class="fa fa-user"></i>
+            <span>Créer un compte</span>
+        </a>
+    </li>
+    <li>
+        <a href="{% url "user:password_reset" %}">
+            <i class="fa fa-question"></i>
+            <span>Mot de passe oublié</span>
+        </a>
+    </li>
+    {% endif %}
+    {% if user.is_authenticated %}
+    <li>
+        <a href="{% url "user:password_change" %}">
+            <i class="fa fa-unlock-alt"></i>
+            <span>Changer de mot de passe</span>
+        </a>
+    </li>
+    <li>
+        <a href="{% url "user:logout"%}">
+            <i class="fa fa-sign-out"></i>
+            <span>Se déconnecter</span>
+        </a>
+    </li>
+    {% endif %}
 {% endblock %}

user/templates/user/login.html

@@ -6,23 +6,3 @@
 {% block extra_form_input %}
     <input type="hidden" name="next" value="{{ next }}" />
 {% endblock %}
-
-{% block user_aside_after %}
-    <hr/>
-    <p>Vous n'avez pas de compte utilisateur et vous souhaiteriez en créer un ?</p>
-    <form action="{% url 'user:create_user' %}" class="form-horizontal">
-        <input type="submit" value="Créer un compte" class="btn btn-default btn-block btn-lg">
-    </form>
-    <hr/>
-    <p>Vous avez déjà un compte utilisateur et vous avez oublié votre mot de passe ?</p>
-    <form action="{% url 'user:password_reset' %}" class="form-horizontal">
-        <input type="submit" value="Réinitialiser le mot de passe" class="btn btn-default btn-block btn-lg">
-    </form>
-    <script type="text/javascript">
-    jQuery(document).ready(function() {
-        /* Met le focus sur le champ user
-         * du formulaire de connexion */
-        $('#id_username').focus();
-    });
-    </script>
-{% endblock %}

user/templates/user/user_form.html

@@ -1,25 +1,59 @@
 {% extends "user/base_user.html" %}
+{% load widget_tweaks %}
+
 {% load bootstrap %}
 
-{% block section_title %}{{ sec_title }}{% endblock %}
+{% block page_title %}{{ page_title }}{% endblock %}
+
+{% block page_size %}col-lg-8{% endblock %}
+
 {% block content %}
+  <!-- BASIC FORM ELELEMNTS -->
+    <div class="row">
+        <div class="col-lg-12">
+        <div class="form-panel">
+             <h4 class="mb"><i class="fa fa-angle-right"></i> Formulaire</h4>
             {% if form.errors %}
             <p class="text-danger">{% block user_error %}{% endblock %}</p>
             {% endif %}
-    <form class="form-horizontal" method="post" action="{%block action_name%}{%endblock%}">
+            <form class="form-horizontal style-form" method="post" action="{%block action_name%}{%endblock%}">
                 {% csrf_token %}
                 <fieldset>
                 {% for field in form %}
-                {{ field | bootstrap }}
+                    {% if field.errors %}
+                        <div class="form-group error">
+                            <label class="col-sm-2 control-label">{{ field.label }}</label> 
+                            <div class="controls col-sm-10">{{ field }}
+                                <span class="help-inline">
+                                    {% for error in  field.errors %}{{ error }}{% endfor %}
+                                </span>
+                            </div>
+                        </div>
+                    {% else %}
+                        <div class="form-group">
+                            <label class="col-sm-2 control-label">{{ field.label }}</label> 
+                            <div class="col-sm-10 controls">{{ field | attr:"class:form-control" }}
+                                {% if field.help_text %}
+                                    <p class="help-inline"><small>{{ field.help_text | safe }}</small></p>
+                                {% endif %}
+                            </div>
+                        </div>
+                    {% endif %}
                 {% endfor %}
                 </fieldset>
                 <div class="form-action">
-            <button type="submit" class="btn btn-primary pull-right">
+                    <div class=text-right>
+                        <button type="submit" class="btn btn-theme">
                             {{ button }}
                         </button>
+                    </div>
                     {% block extra_form_input %}{% endblock %}
                 </div>
             </form>
+        </div>
+        </div><!-- col-lg-12-->      	
+    </div><!-- /row -->
+
     <script type="text/javascript">
     jQuery(document).ready(function() {
         /* Met le focus sur le premier champ input

user/urls.py

@@ -1,4 +1,4 @@
-from django.conf.urls import url, include
+from django.conf.urls import url
 from django.contrib.auth import views as auth_views
 from django.core.urlresolvers import reverse_lazy
 from event.views import Index  # TODO : mettre le vrai home
@@ -13,7 +13,7 @@ urlpatterns = [
             auth_views.login,
             {'template_name': 'user/login.html',
              'extra_context': {
-                    'sec_title' : 'Connexion',
+                 'page_title': 'Connexion',
                  'button': 'Se connecter',
                  },
              },
@@ -33,7 +33,7 @@ urlpatterns = [
              # TODO : mettre le vrai home
              'post_change_redirect': reverse_lazy('event:index'),
              'extra_context': {
-                    'sec_title' : 'Changement de mot de passe',
+                 'page_title': 'Changement de mot de passe',
                  'button': 'Modifier',
                  },
              },
@@ -47,7 +47,7 @@ urlpatterns = [
              'subject_template_name': 'subject_password_reset.txt',
              'post_reset_redirect': reverse_lazy('user:password_reset_done'),
              'extra_context': {
-                    'sec_title' : 'Demande de nouveau mot de passe',
+                 'page_title': 'Demander un nouveau mot de passe',
                  'button': 'Envoyer'
                  },
              },
@@ -64,7 +64,7 @@ urlpatterns = [
              'template_name': 'user/user_form.html',
              'post_reset_redirect': reverse_lazy('user:password_reset_complete'),
              'extra_context': {
-                    'sec_title' : 'Changer de mot de passe',
+                 'page_title': 'Changer de mot de passe',
                  'button': 'Changer'
                  },
               },
@@ -75,14 +75,3 @@ urlpatterns = [
             Index.as_view(),
             name='password_reset_complete'),
         ]
-
-# Inclu les vues suivantes :
-
-# ^login/$ [name='login']
-# ^logout/$ [name='logout']
-# ^password_change/$ [name='password_change']
-# ^password_change/done/$ [name='password_change_done']
-# ^password_reset/$ [name='password_reset']
-# ^password_reset/done/$ [name='password_reset_done']
-# ^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$ [name='password_reset_confirm']
-# ^reset/done/$ [name='password_reset_complete']

user/views.py

@@ -11,5 +11,5 @@ class CreateUser(SuccessMessageMixin, CreateView):
     def get_context_data(self, **kwargs):
         ctx     = super(CreateUser, self).get_context_data(**kwargs)
         ctx['button']    = 'Créer'
-        ctx['sec_title'] = "Création d'utilisateur"
+        ctx['page_title'] = "Création d'utilisateur"
         return ctx

var/static/css/index2.css

@@ -1,298 +0,0 @@
-/*
- * Index
- */
-html {
-    height  : 100% ;
-}
-
-body{
-    display	  : flex;
-    flex-direction: column;
-    height	  : 100%;
-}
-
-header, footer {
-    flex: 0 0 auto;
-}
-
-#principal {
-    flex    : 1 0 auto ;
-}
-
-
-.pad_list_last_modif {
-    font-style  : italic ;
-}
-
-a.pad_list_title {
-    font-weight : bold ; 
-}
-
-.strong-banner {
-  padding-top       : 10px;
-  padding-bottom    : 10px ;
-  background-color  : #869C98;
-}
-
-.page-header {
-    margin-top : 0px ;
-}
-
-.navbar {
-    margin-bottom : 0px;
-}
-
-.soft-banner h1 {
-    margin      : 0px ;
-    padding     : 15px 0px 10px 0px ;
-    color       : white ;
-}
-
-main h1 {
-    border-bottom   : 7px solid #DB4437 ;
-    padding-bottom  : 5px ;
-}
-
-main h2 {
-    border-bottom   : 2px solid #DB4437 ;
-    padding-bottom  : 5px ;
-}
-
-.soft-banner {
-    background-color : #B1D0C8;
-}
-
-main,
-aside {
-  padding-top 		: 10px ;
-  padding-bottom 	: 10px ;
-}
-
-aside {
-  margin-top		: 25px ;
-}
-
-.row-eq-height {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display:         flex;
-}
-
-@media (min-width: 992px) {
-    .navbar-nav {
-    float : right ;
-    }
-}
-
-.navbar-inverse {
-  background-color : transparent ;
-  border-style	   : none ;
-}
-
-aside {
-  background-color 	: #F1F1F1 ;
-  border-style		: solid ;
-  border-width	        : 3px 0px 0px 0px;
-  border-color		: #DADADA ;
-}
-
-.navbar-collapse {
-  padding : 0px ;
-}
-
-a {
-  color	: #D81138 ;
-}
-
-a:hover,
-a:active,
-a:focus {
-  color : #D81138 ;
-}
-
-
-hr {
-  border-top : 1px solid #D1D1D1 ;
-}
-
-.navbar-brand {
-  padding : 0px ;
-}
-
-.navbar-inverse .navbar-nav > li > a {
-    color           : white ;
-    text-transform  : uppercase ;
-    font-family     : 'Teko', sans-serif;
-    font-size       : x-large;
-    font-weight     : 500;
-}
-
-.navbar-inverse .navbar-nav > .active > a,
-.navbar-inverse .navbar-nav > .active > a:hover,
-.navbar-inverse .navbar-nav > .active > a:focus {
-    color               : #DB7E76 ;
-    background-color    : transparent ;
-}
-
-.navbar-inverse .navbar-nav > li > a:hover,
-.navbar-inverse .navbar-nav > li > a:focus {
-    color           : #EFB0AA ;
-    background      : transparent ;
-}
-
-.copyrights {
-    font-family     : 'Nunito', sans-serif;
-    color           : #D5B091 ;
-}
-
-.navbar-inverse .navbar-toggle {
-    border-color    : #DB7E76 ;
-}
-
-.navbar-inverse .navbar-toggle:hover,
-.navbar-inverse .navbar-toggle:focus {
-    background-color : #DB7E76 ;
-    border-color     : #DB4437 ;
-}
-
-.navbar-collapse {
-    border-top: 0px solid transparent ;
-}
-
-.navbar-inverse .navbar-nav > .open > a,
-.navbar-inverse .navbar-nav > .open > a:focus, 
-.navbar-inverse .navbar-nav > .open > a:hover {
-    background-color: #DB7E76 ;
-}
-
-.soft-banner a,
-.soft-banner a:hover {
-    color : white ;
-}
-
-.bottom-banner {
-    padding-top : 15px ;
-    color: white;
-}
-
-.bottom-banner ul {
-    list-style-type: none ;
-    padding-left: 0px;
-    padding-top: 5px;
-}
-
-/*
- * Messages
- *
-.message-info {
-    color           : #31708f;
-    background-color: #d9edf7;
-    border-color    : #bce8f1;
-}
-.message-success {
-    color           : #3c763d;
-    background-color: #dff0d8;
-    border-color    : #d6e9c6;
-}
-.message-warning {
-    color           : #8a6d3b;
-    background-color: #fcf8e3;
-    border-color    : #faebcc;
-}
-.message-error {
-    color           : #a94442;
-    background-color: #f2dede;
-    border-color    : #ebccd1;
-}*/
-
-/*
- * Formulaires
- */
-
-.form-horizontal .form-group {
-    margin-right: 0px;
-    margin-left: 0px;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #DB4437;
-  border-color: #B6443A;
-}
-
-.btn-primary:focus,
-.btn-primary.focus {
-  color: #fff;
-  background-color: #286090;
-  border-color: #B6443A;
-}
-.btn-primary:hover {
-  color: #fff;
-  background-color: #DB7E76;
-  border-color: #B6443A;
-}
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-  color: #fff;
-  background-color: #B45951;
-  border-color: #B6443A;
-}
-.btn-primary:active:hover,
-.btn-primary.active:hover,
-.open > .dropdown-toggle.btn-primary:hover,
-.btn-primary:active:focus,
-.btn-primary.active:focus,
-.open > .dropdown-toggle.btn-primary:focus,
-.btn-primary:active.focus,
-.btn-primary.active.focus,
-.open > .dropdown-toggle.btn-primary.focus {
-  color: #fff;
-  background-color: #B45951;
-  border-color: #B6443A;
-}
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-  background-image: none;
-}
-.btn-primary.disabled:hover,
-.btn-primary[disabled]:hover,
-fieldset[disabled] .btn-primary:hover,
-.btn-primary.disabled:focus,
-.btn-primary[disabled]:focus,
-fieldset[disabled] .btn-primary:focus,
-.btn-primary.disabled.focus,
-.btn-primary[disabled].focus,
-fieldset[disabled] .btn-primary.focus {
-  background-color: #B45951;
-  border-color: #B6443A;
-}
-
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="time"]:focus,
-input[type="week"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-input[type="url"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="color"]:focus,
-.uneditable-input:focus,
-.form-control:focus {   
-  border-color: rgba(219, 126, 118, 0.8);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(219, 118, 118, 0.6);
-  outline: 0 none;
-}
-
-/*
-input.slug-suggest {
-    color : #999894;
-}*/