interface basis for the new members area

members-space/static/css/members-space-header.css

+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: white;
+    overflow: hidden;
+    border-bottom: 1px solid #e7e9ed;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+    float: left;
+    display: block;
+    color: #333;
+    text-align: center;
+    padding: 2rem 1.5rem;
+    text-decoration: none;
+    font-size: 17px;
+    font-weight: bold;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+    background-color: #e7e9ed;
+    color: #333;
+}
+
+/* Add an active class to highlight the current page */
+.topnav a.active {
+    background-color: #5cb85c;
+    color: white;
+}
+
+/* Hide the link that should open and close the topnav on small screens */
+.topnav .icon {
+    display: none;
+} 
+
+@media screen and (max-width: 768px) {
+    /* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
+    .topnav a:not(:first-child) {display: none;}
+    .topnav a.icon {
+        float: right;
+        display: block;
+    }
+
+    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
+    .topnav.responsive {position: relative;}
+    .topnav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+    .topnav.responsive a {
+        float: none;
+        display: block;
+        text-align: left;
+    }
+
+    #deconnect {
+        float: none;
+    }
+}
\ No newline at end of file

members-space/static/css/members-space.css

+body {
+    margin: 0;
+}
+
+.page_title {
+    margin: 35px 0 30px 0;
+}
+
+.tiles_container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tile {
+    flex: 1 0 45%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 30px;
+    min-height: 350px;
+    margin: 1rem 1rem;
+    box-shadow: 2px 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
+}
+
+.tile_title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid #e7e9ed;
+    font-size: 2.7rem;
+    padding: 2rem 0;
+    width: 80%;
+}
+
+.tile_content {
+    margin: 3rem 0;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file

members-space/static/js/members-space-header.js

+/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+function toggleHeader() {
+    var x = document.getElementById("topnav");
+    if (x.className === "topnav") {
+      x.className += " responsive";
+    } else {
+      x.className = "topnav";
+    }
+} 
+
+$(document).ready(function() {
+    // let location = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
+    var url = window.location.href.replace(/\/$/, '');  /* remove optional end / */ 
+    var location = url.substr(url.lastIndexOf('/') + 1);
+    
+    $(".nav_item").removeClass('active');
+    if (location === "mes-infos") {
+        $("#nav_my_info").addClass("active");
+    } else {
+        $("#nav_home").addClass("active");
+    }
+
+    // Navbar redirections
+    let base_location = (app_env === 'dev') ? '/members-space/' : '/';
+
+    $('#nav_home').on('click', function() {
+        document.location.href = base_location;
+    });
+    $('#nav_my_info').on('click', function() {
+        document.location.href = base_location + "mes-infos";
+    });
+});

members-space/static/js/members-space.js

@@ -2,6 +2,4 @@ var test = null;
 
 $(document).ready(function() {
     $.ajaxSetup({ headers: { "X-CSRFToken": getCookie('csrftoken') } });
-
-    console.log('coucou !');
 });

members-space/urls.py

@@ -5,4 +5,5 @@ from . import views
 
 urlpatterns = [
     url(r'^$', views.index),
+    url(r'^mes-infos$', views.my_info),
 ]

members-space/views.py

 from outils.common_imports import *
 from outils.for_view_imports import *
 
+from django.urls import reverse
+
 from sales.models import CagetteSales
+from members.models import CagetteMember
+from shifts.models import CagetteShift
+
+import hashlib
+
+
+def _get_response_according_to_credentials(request, credentials, context, template):
+    response = HttpResponse(template.render(context, request))
+    if ('token' in credentials and 'auth_token' in credentials):
+        response.set_cookie('id', credentials['id'])
+        response.set_cookie('token', credentials['token'])
+        response.set_cookie('auth_token', credentials['auth_token'])
+        response.set_cookie('deconnect_option', 'true')
+    return response
 
+def index(request, exception=None):
+    """Display main screen for the members space"""
 
-def index(request):
-    """Display sales export screen"""
+    credentials = CagetteMember.get_credentials(request)
 
-    context = {'title': 'Espace Membre'}
+    context = {
+        'title': 'Espace Membre',
+        'app_env': getattr(settings, 'APP_ENV', 'prod')
+    }
     template = loader.get_template('members-space/index.html')
 
+    if ('failure' in credentials):
+        # Bad credentials (or none)
+        template = loader.get_template('website/connect.html')
+        context['msg'] = ''
+        if 'msg' in credentials:
+            context['msg'] = credentials['msg']
+        context['password_placeholder'] = 'Naissance (jjmmaaaa)'
+    elif ('validation_state' in credentials) and credentials['validation_state'] == 'waiting_validation_member':
+        # First connection, until the member validated his account
+        template = loader.get_template('members/validation_coop.html')
+
+        referer = request.META.get('HTTP_REFERER')
+
+        doc = CagetteMember.get_couchdb_data(credentials['login'])
+
+        if len(doc) > 1:
+            context = {'title': 'Validation inscription',
+                       'coop': json.dumps(doc),
+                       'coop_msg': doc.get('coop_msg'),
+                       'warning_placeholder':
+                       """Signaler ici une anomalie du formulaire,
+                       un problème lié à votre souscription""",
+                       'referer': referer,
+                       'mag_place_string': settings.MAG_NAME,
+                       'office_place_string': settings.OFFICE_NAME,
+                       'max_begin_hour': settings.MAX_BEGIN_HOUR,
+                       'payment_meanings': settings.SUBSCRIPTION_PAYMENT_MEANINGS,
+                       'em_url': settings.EM_URL,
+                       'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG,
+                       'WELCOME_SUBTITLE_ENTRANCE_MSG': getattr(settings, 'WELCOME_SUBTITLE_ENTRANCE_MSG', '')}
+            if hasattr(settings, 'SUBSCRIPTION_ASK_FOR_SEX'):
+                context['ask_for_sex'] = settings.SUBSCRIPTION_ASK_FOR_SEX
+            if hasattr(settings, 'SUBSCRIPTION_ADD_STREET2'):
+                context['ask_for_street2'] = settings.SUBSCRIPTION_ADD_STREET2
+            if hasattr(settings, 'SUBSCRIPTION_ADD_SECOND_PHONE'):
+                context['ask_for_second_phone'] = settings.SUBSCRIPTION_ADD_SECOND_PHONE
+    else:
+        # Members space
+        if 'id' in request.COOKIES:
+            partner_id = request.COOKIES['id']
+        else:
+            partner_id = credentials['id']
+
+        cs = CagetteShift()
+        partnerData = cs.get_data_partner(partner_id)
+
+        if 'create_date' in partnerData:
+            md5_calc = hashlib.md5(partnerData['create_date'].encode('utf-8')).hexdigest()
+            partnerData['verif_token'] = md5_calc
+
+            # Error case encountered from Odoo: member in delay state and last extension is over -> member is suspended
+            try:
+                if partnerData['cooperative_state'] == "delay" and datetime.datetime.strptime(partnerData['date_delay_stop'], '%Y-%m-%d') < datetime.datetime.now():
+                    partnerData['cooperative_state'] = "suspended"
+            except:
+                pass
+
+            context['partnerData'] = partnerData
+
+            # Days to hide in the calendar
+            days_to_hide = "0"
+            context['ADDITIONAL_INFO_SHIFT_PAGE'] = getattr(settings, 'ADDITIONAL_INFO_SHIFT_PAGE', '')
+            if hasattr(settings, 'SHIFT_EXCHANGE_DAYS_TO_HIDE'):
+                days_to_hide = settings.SHIFT_EXCHANGE_DAYS_TO_HIDE
+            context['daysToHide'] = days_to_hide
+        else:
+            # may arrive when switching database without cleaning cookie
+            return redirect('/website/deconnect')
+
+    return _get_response_according_to_credentials(request, credentials, context, template)
+
+def my_info(request):
+    template = loader.get_template('members-space/my-info.html')
+    context = {
+        'title': 'Mes Infos',
+        'app_env': getattr(settings, 'APP_ENV', 'prod')
+    }
     return HttpResponse(template.render(context, request))
\ No newline at end of file

outils/settings_example.py

@@ -226,3 +226,5 @@ DEBUG = True
 CORS_ORIGIN_ALLOW_ALL = True # Needed to make dev test with different IP and ports
 
 ADMIN_IDS = [1]
+
+APP_ENV = 'dev' # Default is prod
\ No newline at end of file

outils/static/js/all_common.js

@@ -386,7 +386,7 @@ try {
 }
 
 if (getCookie('deconnect_option') && $('#deconnect').length == 0) {
-    //Add deconnect button
+    // Add deconnect button
     //$('body').prepend($('<button>').attr('id','password_change').text('Changer mon mot de passe'));
     $('body').prepend($('<button>').attr('id', 'deconnect')
         .attr('type', 'button')
@@ -397,6 +397,11 @@ if (getCookie('deconnect_option') && $('#deconnect').length == 0) {
     $('#password_change').click(function() {
         window.location.href = '/website/change_pwd';
     });
+} else if (getCookie('deconnect_option') && $('#deconnect').length !== 0) {
+    // If a deconnect button already exists
+    $('#deconnect').click(function() {
+        window.location.href = "/website/deconnect";
+    });
 }
 
 function eanCheckDigit(s) {

templates/members-space/header.html

+{% load static %}
+
+{% block additionnal_css %}
+<link rel="stylesheet" href="{% static 'css/members-space-header.css' %}">
+{% endblock %}
+    
+{% block content %}
+    <div class="topnav" id="topnav">
+        <a href="#" class="nav_item active" id="nav_home">Espace Membre</a>
+        <a href="#" class="nav_item" id="nav_my_info">Mes Infos</a>
+        <a href="#" class="nav_item" id="nav_my_services">Mes Services</a>
+        <a href="#" class="nav_item" id="nav_services_exchange">Échange de services</a>
+        <a href="#" class="nav_item" id="nav_calendar">Calendrier</a>
+        {# Disconnection button must have this id (logic in all_common.js) #}
+        <a href="#" id="deconnect">Déconnexion</a>
+        <a href="javascript:void(0);" class="icon" onclick="toggleHeader()">
+            <i class="fa fa-bars"></i>
+        </a>
+    </div>
+
+    <script type="text/javascript" src="{% static 'js/members-space-header.js' %}"></script>
+{% endblock %}

templates/members-space/index.html

@@ -5,22 +5,64 @@
 <link rel="stylesheet" href="{% static "css/members-space.css" %}?v=">
 {% endblock %}
 
-{% block additionnal_scripts %}
-{% endblock %}
+{% block additionnal_scripts %}{% endblock %}
 
 {% block content %}
 
 <div class="page_body">
-  <div id="content_main" class="page_content">
-    <div class="header txtcenter">
-      <h1>Nouvel espace membres</h1>
+  {% include "members-space/header.html" %}
+
+  <div id="main_content" class="page_content">
+    {% block members_space_content %}
+
+    <div class="page_title txtcenter">
+      <h1>Mon espace membre</h1>
+    </div>
+    <div class="tiles_container">
+      <div class="tile tile_my_info">
+        <div class="tile_title">
+          Mes Infos
+        </div>
+        <div class="tile_content">
+          À venir...
+        </div>
+      </div>
+      <div class="tile tile_my_info">
+        <div class="tile_title">
+          Mes Services
+        </div>
+        <div class="tile_content">
+          À venir...
+        </div>
       </div>
+      <div class="tile tile_my_info">
+        <div class="tile_title">
+          Échange de services
+        </div>
+        <div class="tile_content">
+          À venir...
+        </div>
+      </div>
+      <div class="tile tile_my_info">
+        <div class="tile_title">
+          J'ai une demande
+        </div>
+        <div class="tile_content">
+          À venir...
+        </div>
+      </div>
+    </div>
+
+    {% endblock %}
   </div>
 
   <div id="templates" style="display:none;">
   </div>
 </div>
 
+<script>
+  var app_env = '{{app_env}}';
+</script>
 <script src="{% static "js/all_common.js" %}?v="></script>
 <script src="{% static "js/members-space.js" %}?v="></script>
 {% endblock %}

templates/members-space/my-info.html

+{% extends "members-space/index.html" %}
+
+{% block members_space_content %}
+    <div>À venir...</div>
+{% endblock %}
\ No newline at end of file