static/cover.css

@@ -0,0 +1,350 @@
+/*
+ * Globals
+ */
+
+/* Links */
+/*a,
+a:focus,
+a:hover {
+  color: #fff;
+}*/
+
+
+
+/* Custom default button */
+.btn-default,
+.btn-default:hover,
+.btn-default:focus {
+  color: #fff;
+  text-shadow: none; /* Prevent inheritence from `body` */
+  /*background-color: #fff;*/
+  border: 1px solid #fff;
+}
+
+
+/*
+ * Base structure
+ */
+
+html,
+body {
+  height: 100%;
+  background-color: #333;
+}
+
+
+
+body {
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0,0,0,.5);
+}
+
+.container {
+    margin-bottom: 5vw;
+}
+
+a {
+  color: #428bca;
+
+}
+
+a:focus, a:hover {
+
+  color: #6cbdbd;
+  text-decoration: underline;
+
+}
+
+.content p {
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+.site-wrapper {
+  display: table;
+  width: 100%;
+  height: 100%; /* For at least Firefox */
+  min-height: 100%;
+  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+}
+.site-wrapper-inner {
+  display: table-cell;
+  vertical-align: top;
+}
+.cover-container {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* Padding for spacing */
+.inner {
+  padding: 30px;
+}
+
+.panel-body {
+  background-color: #444;
+}
+
+.modal-header .close {
+    color: white;
+}
+
+.modal-header {
+    background-color: #333;
+}
+
+.modal-body{
+    background-color: #444;
+    text-align: justify;
+}
+
+.modal-footer {
+    background-color: #444;
+}
+
+
+.row {
+  margin-top: 5vw;
+}
+
+.container a {
+  color #00abff;
+}
+
+.panel-body a {
+  color: #00abff;
+}
+
+.well {
+  margin-top : 7em;
+}
+
+.well a {
+  color: #00abff;
+}
+
+/*
+ * Header
+ */
+.masthead-brand {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.masthead-nav > li {
+  display: inline-block;
+}
+.masthead-nav > li + li {
+  margin-left: 20px;
+}
+.masthead-nav > li > a {
+  padding-right: 0;
+  padding-left: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff; /* IE8 proofing */
+  color: rgba(255,255,255,.75);
+  border-bottom: 2px solid transparent;
+}
+.masthead-nav > li > a:hover,
+.masthead-nav > li > a:focus {
+  background-color: transparent;
+  border-bottom-color: #a9a9a9;
+  border-bottom-color: rgba(255,255,255,.25);
+}
+.masthead-nav > .active > a,
+.masthead-nav > .active > a:hover,
+.masthead-nav > .active > a:focus {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+
+
+/* Footer */
+
+footer {
+    position: bottom;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+}
+
+
+@media (min-width: 768px) {
+  .masthead-brand {
+    float: left;
+  }
+  .masthead-nav {
+    float: right;
+  }
+}
+
+
+/*
+ * Cover
+ */
+
+.cover {
+  padding: 0 20px;
+}
+.cover .btn-lg {
+  padding: 10px 20px;
+  font-weight: bold;
+}
+
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+  color: #999; /* IE8 proofing */
+  color: rgba(255,255,255,.5);
+}
+
+
+/*
+ * Affix and center
+ */
+
+@media (min-width: 768px) {
+  /* Pull out the header and footer */
+  .masthead {
+    position: fixed;
+    top: 0;
+  }
+  .mastfoot {
+    position: fixed;
+    bottom: 0;
+  }
+  /* Start the vertical centering */
+  .site-wrapper-inner {
+    vertical-align: middle;
+  }
+  /* Handle the widths */
+  .masthead,
+  .mastfoot,
+  .cover-container {
+    width: 100%; /* Must be percentage or pixels for horizontal alignment */
+  }
+}
+
+@media (min-width: 992px) {
+  .masthead,
+  .mastfoot,
+  .cover-container {
+    width: 700px;
+  }
+}
+
+#tada {
+        text-align: center;
+        text-decoration: none;
+        display: block;
+        position: relative;
+        margin: auto;
+        font-size: 16px;
+        -webkit-animation-name: tada;
+        -webkit-animation-duration: 1s;
+        -webkit-animation-iteration-count: 1;
+        animation-name: tada;
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+}
+
+/* ######### Animations ######### */
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    -ms-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    -ms-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    -ms-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    -ms-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+/* ######### Animations ######### */
+/* ###### Simplemde editor ###### */
+
+.editor-toolbar {
+    background-color: white;
+}
+.editor-preview-side {
+    text-align: justify;
+    color: black;
+}
+
+.CodeMirror {
+    text-align: justify;
+}
+
+/* ### Style for post-it ### */
+.post-it h1 {
+    font-size: 1.5vw;
+}
+
+.post-it h2 {
+    font-size: 1.2vw;
+}
+
+.post-it h3 {
+    font-size: 1vw;
+}
+
+.post-it h3 {
+    font-size: 0.9vw;
+}
+

static/divhider.js

@@ -0,0 +1,62 @@
+function divhider() {
+   var x = document.getElementsByClassName("flashed");
+   x[0].style.visibility = "hidden";
+}
+
+
+function animation() {
+   var x = document.getElementsByClassName("flashed");
+   x[0].style.animation = "disparition 0.2s 1";
+}
+
+window.setTimeout(divhider, 8800);
+window.setTimeout(animation, 8000);
+
+let darkBoxVisible = false;
+
+window.addEventListener('load', (event) => {
+    let images = document.querySelectorAll("img");
+    if(images !== null && images !== undefined && images.length > 0) {
+	images.forEach(function(img) {
+	    img.addEventListener('click', (evt) => {
+		showDarkbox(img.src);
+	    });
+	});
+    }
+});
+
+function showDarkbox(url) {
+    if(!darkBoxVisible) {
+	let x = (window.innerWidth - 1280) / 2;
+	let y = window.scrollY + 50;
+
+	// Create the darkBox
+	var div = document.createElement("div");
+	div.id = "darkbox";
+        var tmp = url;
+        tmp = tmp.replace("thumbnails/", "");
+        tmp= tmp.trim();
+	div.innerHTML = '<img class="darkboximg" src="'+tmp+'" />';
+	document.body.appendChild(div);
+	let box = document.getElementById("darkbox");
+	box.style.left = x.toString()+"px";
+	box.style.top = y.toString()+"px";
+	box.style.height = 'auto';
+	box.addEventListener('click', (event) => {
+	    // Remove it
+	    let element = document.getElementById("darkbox");
+	    element.parentNode.removeChild(element);
+
+	    darkBoxVisible = false;
+	})
+
+	darkBoxVisible = true;
+
+    } else {
+	// Remove it
+	let element = document.getElementById("darkbox");
+	element.parentNode.removeChild(element);
+
+	darkBoxVisible = false;
+    }
+}

static/icons.css

@@ -296,19 +296,6 @@
   mask-size: 100% 100%;
 }
 
-.menu-icon {
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M48 56c0-13.3-10.7-24-24-24S0 42.7 0 56v344c0 44.2 35.8 80 80 80h408c13.3 0 24-10.7 24-24s-10.7-24-24-24H80c-17.7 0-32-14.3-32-32zm104 72h208c13.3 0 24-10.7 24-24s-10.7-24-24-24H152c-13.3 0-24 10.7-24 24s10.7 24 24 24m0 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h144c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 112c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24z'/%3E%3C/svg%3E");
-    background-color: currentColor;
-    -webkit-mask-image: var(--svg);
-    mask-image: var(--svg);
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-}
 
 /* Gallery */
 

static/medias.js

@@ -0,0 +1,122 @@
+ let cachedImageData = [];
+let isLoading = false;
+const targetHeight = 200;
+const spacing = 5;
+const preloadThreshold = 800;
+
+
+function appendRows(imageBatch) {
+  const $container = $('#mediasContainer');
+  const containerWidth = $container.width();
+  let row = [];
+  let rowWidth = 0;
+  $.each(imageBatch, function (_, imgData) {
+    const scaledWidth = targetHeight * imgData.ratio;
+    row.push(imgData);
+    rowWidth += scaledWidth + spacing;
+    if (rowWidth >= containerWidth || imgData === imageBatch[imageBatch.length - 1]) {
+      if (row.length === 1 && imgData === imageBatch[imageBatch.length - 1]) {
+        row.pop();
+        mediasQueryParams.offset -= 1;
+        return false;
+      }
+      const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
+      const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
+      const $rowDiv = $('<div>').addClass('mediasRow');
+      $.each(row, function (_, imgData) {
+        const $img = $('<img>')
+          .addClass('border-primary')
+          .attr('src', `/storage/medias/thumb_${imgData.filename}`)
+          .attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
+          .attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
+          .css({height: adjustedHeight + 'px',
+                width: adjustedHeight * imgData.ratio + 'px',
+                display: 'inline-block',
+                cursor: 'pointer'});
+        const $link = $('<a>')
+          .attr('href', `/media/${imgData.filename}`)
+          .append($img);
+        $rowDiv.append($link);
+      });
+      $container.append($rowDiv);
+      row = [];
+      rowWidth = 0;
+    }
+  });
+}
+
+function relayoutAll() {
+  const $container = $('#mediasContainer');
+  const containerWidth = $container.width();
+  $container.empty();
+  let row = [];
+  let rowWidth = 0;
+  $.each(cachedImageData, function (_, imgData) {
+    const scaledWidth = targetHeight * imgData.ratio;
+    row.push(imgData);
+    rowWidth += scaledWidth + spacing;
+    if (rowWidth >= containerWidth || imgData === cachedImageData[cachedImageData.length - 1]) {
+      if (row.length === 1 && imgData === cachedImageData[cachedImageData.length - 1]) {
+        row.pop();
+        mediasQueryParams.offset -= 1;
+        return false;
+      }
+      const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
+      const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
+      const $rowDiv = $('<div>').addClass('mediasRow');
+      $.each(row, function (_, imgData) {
+        const $img = $('<img>')
+            .addClass('border-primary')
+            .attr('src', `/storage/medias/thumb_${imgData.filename}`)
+            .attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
+            .attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
+            .css({ height: adjustedHeight + 'px',
+                  width: adjustedHeight * imgData.ratio + 'px',
+                  display: 'inline-block',
+                  cursor: 'pointer' });
+        const $link = $('<a>')
+          .attr('href', `/media/${imgData.filename}`)
+          .append($img);
+        $rowDiv.append($link);
+      });
+      $container.append($rowDiv);
+      row = [];
+      rowWidth = 0;
+    }
+  });
+}
+
+let resizeTimeout;
+$(window).on('resize', function () {
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(relayoutAll, 150);
+});
+
+$(window).on('scroll', function () {
+  const scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
+  if (!isLoading && scrollBottom < preloadThreshold) {
+    loadImages(
+    ).then(imageBatch => {
+      appendRows(imageBatch);
+    });
+  }
+});
+
+$(document).ready(function () {
+  loadImages(
+  ).then(imageBatch => {
+      appendRows(imageBatch);
+  });
+  $('#popularityButton').on('click', function () {
+    popularityButtonClicked($(this));
+  });
+  $('#filterButton').on('click', function () {
+    filterButtonClicked($(this));
+  });
+  if (mediasQueryParams.order_by !== 'uid,desc') {
+    toggleButtonClass($('#popularityButton'));
+  }
+  if (mediasQueryParams.hasOwnProperty('filter')) {
+    toggleButtonClass($('#filterButton'));
+  }
+});

static/pywallter.css

@@ -9,7 +9,7 @@ body
     grid-template-areas:
 	"Menu Menu header header header header header"
 	"Menu Menu main main main main main"
-	"Menu Menu footer footer footer footer footer";
+	"Menu Menu footer footer footer footer footer"
 }
 
 .menu-button {
@@ -92,7 +92,6 @@ main > nav
 	gap: 20px;
     }
 
-    
     nav li {
 	word-break: keep-all;
 	width: 115px;
@@ -203,9 +202,9 @@ nav > ul:first-of-type, ul
     gap: 5px;
 }
 
-.picture {
+.picture{
     text-align: center;
-}
+
 
 
 
@@ -219,15 +218,3 @@ nav > ul:first-of-type, ul
     color: var(--pico-color-grey-950);
 
 }
-
-
-.totp {
-    visibility: hidden;
-    pointer-events: none;
-}
-
-[type=checkbox]:checked~.totp {
-    visibility: visible;
-  
-    pointer-events: unset;
-}

static/up.css

@@ -0,0 +1,214 @@
+#tada {
+        text-align: center;
+        text-decoration: none;
+        display: block;
+	position: relative;
+        margin: auto;
+        font-size: 16px;
+	-webkit-animation-name: tada;
+        -webkit-animation-duration: 1s;
+        -webkit-animation-iteration-count: 1;
+        animation-name: tada;
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+}
+
+.msginfo {
+	position: relative;
+	display: inline-block;
+	margin: auto;
+	top: 5%;
+	margin-left: 5%;
+	margin-bottom: 0%;
+	text-align: center;
+	width: 90%;
+
+	-webkit-animation-name: apparition;
+        -webkit-animation-duration: 0.2s;
+        -webkit-animation-iteration-count: 1;
+        animation-name: apparition;
+        animation-duration: 0.2s;
+        animation-iteration-count: 1;
+}
+
+.flashed {
+	list-style-type: none;
+	position: center;
+	margin: auto;
+	margin-top: 5%;
+	width: 50%;
+        background-color: #333;
+}
+
+.flashed p {
+	font-family: sans-serif;
+	text-align: center;
+	border-radius: 3px;
+	/*box-shadow: 1px 1px 1px black; */
+}
+
+.success p {
+  background-color: #444;
+	color: #00C613;
+}
+
+.error p {
+	background-color: #444;
+	color: #FF4A4A;
+}
+
+#majuscule {
+	text-transform: capitalize;
+}
+
+#fic {
+	display: block;
+	margin: auto;
+}
+
+/* ######### Animations ######### */
+
+@-webkit-keyframes apparition {
+        0%   {opacity: 0; }
+        100% {opacity: 1; }
+}
+
+@keyframes apparition {
+        0%   {opacity: 0; }
+        100% {opacity: 1; }
+}
+
+@-webkit-keyframes disparition {
+        100%   {opacity: 0; }
+        0%     {opacity: 1; display: none; }
+}
+
+@keyframes disparition {
+        100%   {opacity: 0; }
+        0%     {opacity: 1; display: none; }
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    -ms-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    -ms-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    -ms-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    -ms-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+
+#gallery {
+    margin-top: 10vw;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.item{
+    margin-bottom: 1vw;
+}
+
+.item img{
+    width: 20vw;
+    display:flex;
+    flex-wrap:wrap;
+}
+
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+.control{
+    display:block;
+    position:inherit;
+    margin-top:5px;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+  flex: 30%;
+  max-width: 30%;
+  padding: 0 4px;
+ 
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+.column img:hover {
+  margin-top: 8px;
+  vertical-align: middle;
+  transform: scale(1, 1.5);
+}
+
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media (max-width: 850px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media (max-width: 600px) {
+  .column {
+    flex: 100%;
+    max-width: 100%;
+  }
+}

templates/_head.html

@@ -11,7 +11,7 @@
     <link href="{{ url_for('static', filename='vendors/picocss/pico.colors.min.css') }}" rel="stylesheet"> 
     <link href="{{ url_for('static', filename='pywallter.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='icons.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='vendors/simplemde/simplemde.min.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='vendors/glightbox/glightbox.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='simplemde.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='glightbox.min.css') }}" rel="stylesheet">
     
 </head>

templates/_js-core.html

@@ -1,3 +1,5 @@
-
-<script src="{{ url_for('static', filename='vendors/jquery/jquery.min.js') }}"></script>
+<!-- Bootstrap core JavaScript -->
+<!--================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
 <script src="{{ url_for('static', filename='vendors/picocss/theme-switcher.js') }}"></script>

templates/_js-gallery.html

@@ -1,4 +1,4 @@
-<script src="{{ url_for('static', filename='vendors/glightbox/glightbox.min.js') }}"></script>
+<script src="{{ url_for('static', filename='glightbox.min.js') }}"></script>
 <script>
   var lightbox = GLightbox();
   lightbox.on('open', (target) => {

templates/_js.html

@@ -0,0 +1,14 @@
+
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
+
+<script src="{{ url_for('static', filename='docs.min.js') }}"></script>
+<script src="{{ url_for('static', filename='simplemde.min.js') }}"></script>
+
+<script>
+	new SimpleMDE({
+		element: document.getElementById("editeurMarkdown"),
+		spellChecker: true,
+	});
+	
+</script>

templates/_js_editor.html

@@ -1,5 +1,5 @@
 
-<script src="{{ url_for('static', filename='vendors/simplemde/simplemde.min.js') }}"></script>
+<script src="{{ url_for('static', filename='simplemde.min.js') }}"></script>
 
 <script>
 	new SimpleMDE({

templates/_nav_userlogin.html

@@ -80,7 +80,7 @@
     <ul>
       <li ><a href="/profil/"  {% if request.path == "/profil/" %} class="invert" {% endif %} ><span class="icons configure-profile"></span> Personnaliser  mon profil</a></li>
       <li><a href="/profil/change-password/"  {% if request.path == "/profil/change-password/" %} class="invert" {% endif %} > <span class="icons mypassword" aria-hidden="true"></span>
-	  Mot de passe & 2FA </a></li>
+	  Changer mon mot de passe </a></li>
       <li><a href="/delete_me/"  {% if request.path == "/delete_me/" %} class="invert" {% endif %} ><span class="icons user-delete"></span> Supprimer mon compte </a></li>
       <li><a href="/invitation/"  {% if request.path == "invitation/" %} class="invert" {% endif %} ><span class="icons invite"></span> Inviter une personne</a></li>
     </ul>

templates/accueil.html

@@ -27,16 +27,9 @@
       <form method="POST" action="{{ url_for('loginlogout.login') }}">
         <input type="text" name="user" id="user" placeholder="Utilisateur" class="form-control" width="200px"><br />
         <input type="password" name="passwd" id="passwd" placeholder="Mot de passe" class="form-control"><br />
-	<input type="checkbox" id="totpcheckbox">
-	<label for="totpcheckbox">J'ai un code d'authentification 2FA</label>
-	  <br />
-	  <br />
-	  <label for="2FAInput" class="totp">Code TOTP:</label>
-	  <input type="tel" name="code_totp" id="code_totp" class="totp" maxlength="6">
-
-	<br>
+        <br>
 	<p class="center"><a href="{{ url_for('loginlogout.lost_password') }}"> Mouarf j'ai perdu mon mot de passe </a> </p>
-        <button class="btn btn-default btn-primary" type="submit"> Login </button>
+        <button id="tada" class="btn btn-default btn-primary" type="submit"> Login </button>
       </form>
  
 

templates/mailbox.html

@@ -0,0 +1,49 @@
+{% extends 'up_squelette.html' %}
+
+{% block main %}
+
+<!--<div class="page-header">
+<h1>Profil</h1>
+</div>-->
+
+<div class="row">
+
+        <div class="col-sm-3"></div>
+        <div class="col-sm-6">
+
+
+            <div class="panel panel-primary">
+            <div class="panel-heading">
+              <h3 class="panel-title"> Changer mon mot de passe </h3>
+            </div>
+
+            <div class="panel-body">
+                  <form method="POST" action="" enctype="multipart/form-data">
+		    
+                     <p> Votre Adresse e-mail sur ce serveur : {{ username }} </p>
+
+                     <label> Mot de passe </label>
+                     <input type="password" name="password" id="password" placeholder="Votre mot de passe" class="form-control"><br />
+                     <input type="password" name="passwd_confirm" id="passwd_confirm" placeholder="Confirmation du mot de passe" class="form-control"><br />
+                 <button id="tada" class="btn btn-default btn-primary" type="submit">Envoyer</button>
+                 </form>
+
+                 {# on affiche les messages d'erreur puis les messages de succes #}
+                 {% for categorie in ['error', 'succes'] %}
+                   {% with msgs = get_flashed_messages(category_filter=[categorie]) %}
+                     {% if msgs %}
+                       <div class="flashed {{ categorie }}">
+                         {% for m in msgs %}
+                           <p>{{ m|safe }}</p>
+                         {% endfor %}
+                       </div>
+                     {% endif %}
+                   {% endwith %}
+                 {% endfor %}
+
+              </div>
+          </div>
+        </div>
+</div>
+
+{% endblock %}

templates/parametres.html

@@ -0,0 +1,12 @@
+{% extends 'up_squelette.html' %}
+
+{% block main %}
+
+<div class="page-header">
+<p class="text-center"><h1>Paramètres</h1></p>
+</div>
+
+<div>
+</div>
+
+{% endblock %}