updated webUI according to param changes

Flask/static/css/flask.css

@@ -0,0 +1,405 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+/* Colors */
+:root {
+    --color-background0: #212121;
+    --color-background1: #212121;
+    --color-background2: dimgray;
+    --color-border0: #FFFFFF;
+    --color-border1: grey;
+    --color-text: #FFFFFF;
+    --color-green: green;
+    --color-lime: #BADA55;
+    --color-red: red;
+    --color-switch-button: #FFFFFF;
+    --color-switch-background: grey;
+    --color-transparent: rgba(0, 0, 0, 0);
+}
+
+/* Sidebar size is the left panel size when opened */
+:root {
+    --sidebar-size: max(20vw, 160px);
+    --sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
+    --sidebar-sz-plus30: calc(var(--sidebar-size) + 30px);
+}
+
+html {
+    text-align: center;
+    font-family: Montserrat;
+    height: 95%;
+}
+
+form {
+    width: 100%;
+}
+
+table {
+    width: 100%;
+    height: 100%;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: var(--color-text);
+}
+
+iframe{
+    border: none;
+}
+
+input[type=text] {
+
+    width: 90%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    background-color: var(--color-background1);
+    border: 2px solid var(--color-border1);
+    border-radius: 4px;
+    outline: none;
+    color: var(--color-text);
+    text-align: center;
+}
+
+input[type=password] {
+
+    width: 90%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    text-align: center;
+    border: 2px solid var(--color-border1);
+    border-radius: 4px;
+    outline: none;
+    color: var(--color-text);
+    background-color: var(--color-background1);
+}
+
+.button{
+    border-radius: 4px;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background1);
+    color: var(--color-text);
+    padding: 12px 20px;
+    width: 70%;
+    margin: 10px;
+}
+
+.left-button{
+    width: 10%;
+}
+
+.ban{
+    border-radius: 4px;
+    border: 2px solid var(--color-red);
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-red) 50%);
+    -webkit-transition: background-position 0.5s;
+    -moz-transition: background-position 0.5s;
+    transition: background-position 0.5s;
+    color: var(--color-text);
+    padding: 12px 0px;
+    width: 70%;
+    margin: 10px;
+}
+.ban:hover{
+    background-position: -100% 0;
+}
+
+.confirm{
+    color: var(--color-text);
+    padding: 12px 20px;
+    width: 70%;
+    margin: 10px;
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
+    -webkit-transition: background-position 0.5s;
+    -moz-transition: background-position 0.5s;
+    transition: background-position 0.5s;
+    border: 2px solid var(--color-border1);
+}
+
+.confirm:hover{
+    background-position: -100% 0;
+}
+
+.confirm{
+    color: var(--color-text);
+    padding: 12px 20px;
+    width: 70%;
+    margin: 10px;
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
+    -webkit-transition: background-position 0.5s;
+    -moz-transition: background-position 0.5s;
+    transition: background-position 0.5s;
+    border: 2px solid var(--color-border1);
+}
+
+.confirm:hover{
+    background-position: -100% 0;
+}
+.unselected{
+    border-radius: 4px;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background1);
+    color: var(--color-text);
+    padding: 12px 20px;
+    width: 70%;
+    margin: 10px;
+}
+.selected{
+    border-radius: 4px;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background2);
+    color: var(--color-text);
+    padding: 12px 20px;
+    width: 70%;
+    margin: 10px;
+}
+
+
+button:hover{
+    border: 2px solid var(--color-border0);
+    cursor: pointer;
+}
+input:hover{
+    border: 2px solid var(--color-border0);
+}
+
+
+
+
+.submit{
+    border-radius: 4px;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background1);
+    color: var(--color-text);
+    padding: 12px 20px;
+    width: 100%;
+    margin: 10px;
+}
+
+body {
+    background-color: var(--color-background0);
+    color: var(--color-text);
+    height: 100%;
+}
+
+
+
+.left-pannel{
+    flex: 1;
+    margin: 20px;
+    border: 1px solid var(--color-border0);
+    border-radius: 5px;
+    padding: 20px;
+    width: 80%;
+    height: 90%;
+    
+}
+
+.content{
+    flex: 3;
+    margin: 20px;
+    border: 1px solid var(--color-border0);
+    border-radius: 5px;
+    padding: 20px;
+    height: 90%;
+    
+}
+
+.content > ul {
+    display: inline-block;
+}
+.container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.row-item {
+    margin: 10px 0;
+    text-align: center;
+}
+
+#image img {
+    display: block;
+    margin: auto;
+    width: 20%;
+}
+.comlumn-name{
+    width: 20%;
+}
+
+
+/* 
+    For toggle switch
+*/
+
+
+input.toogle[type=checkbox]{
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+  
+label {
+    padding: 8px;
+    margin: auto;
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 100px;
+    height: 50px;
+    background: var(--color-switch-background);
+    display: block;
+    border-radius: 100px;
+    position: relative;
+}
+
+/*
+width: height of label /2 ;
+height: height of label /2px;
+*/
+label:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 40px;
+    height: 40px;
+    background: var(--color-switch-button);
+    border-radius: 90px;
+    transition: 0.3s;
+}
+
+input:checked + label {
+    background: var(--color-lime);
+}
+
+input:checked + label:after {
+    left: calc(100% - 5px);
+    transform: translateX(-100%);
+}
+/*changer l'épaisseur du click */
+label:active:after {
+    width: 30px;
+}
+
+select {
+    width: 90%;
+    /*height: 100%;*/
+    padding: 12px 20px;
+    margin: 8px 0;
+    background-color: var(--color-background1);
+    border: 2px solid var(--color-border1);
+    border-radius: 4px;
+    outline: none;
+    color: var(--color-text);
+    text-align: center;
+}
+
+select:hover {
+    border: 2px solid var(--color-border0);
+}
+
+
+input[type="time"] {
+    width: 70%;
+    padding: 8px 12px;
+    margin: 8px 0;
+    background-color: var(--color-background1);
+    border: 2px solid var(--color-border1);
+    border-radius: 4px;
+    outline: none;
+    color: var(--color-text);
+    text-align: center;
+}
+  
+input[type="time"]::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    opacity: 0.7;
+    cursor: pointer;
+}
+  
+input[type="time"]::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+}
+
+
+/** Sidebar stuff */
+#slide-sidebar {
+    display: none;
+}
+
+label[for="slide-sidebar"] {
+    all: initial;
+    z-index: 1; /* Always on top */
+    position: absolute;
+    top: 20px;
+    left: var(--sidebar-sz-plus30);
+
+    -moz-transition: left 0.5s ease;
+    transition: left 0.5s ease;
+    background: var(--color-transparent);
+}
+
+label[for="slide-sidebar"]:after {
+    all:unset;
+}
+
+input:checked + label[for="slide-sidebar"] {
+    background: var(--color-transparent);
+}
+
+#slide {
+    border-style: solid;
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: var(--color-border0);
+
+    color: var(--color-text);
+    background-color: var(--color-background0);
+    padding: 8px 8px 2px 8px;
+}
+
+/* When opened behaviour */
+.left-pannel {
+  width: var(--sidebar-size);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    left: var(--sidebar-sz-plus10);
+    right: 0;
+    bottom: 0;
+
+    -moz-transition: left 0.5s ease;
+    transition: left 0.5s ease;
+
+    padding: 0 25px;
+    background-color: var(--color-background0); /* we need no transparency when switching */
+    overflow: hidden;
+}
+
+/* When closed behaviour */
+input:checked#slide-sidebar~label {
+    left: 20px;
+}
+
+input:checked#slide-sidebar~.left-pannel {
+    display: none;
+    transition: display 0s 0.5s;
+}
+
+input:checked#slide-sidebar~.content {
+    left: 0;
+}

Flask/static/images/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 0 C 19.355469 0 18 1.355469 18 3 L 18 5 L 10.1875 5 C 10.0625 4.976563 9.9375 4.976563 9.8125 5 L 8 5 C 7.96875 5 7.9375 5 7.90625 5 C 7.355469 5.027344 6.925781 5.496094 6.953125 6.046875 C 6.980469 6.597656 7.449219 7.027344 8 7 L 9.09375 7 L 12.6875 47.5 C 12.8125 48.898438 14.003906 50 15.40625 50 L 34.59375 50 C 35.996094 50 37.1875 48.898438 37.3125 47.5 L 40.90625 7 L 42 7 C 42.359375 7.003906 42.695313 6.816406 42.878906 6.503906 C 43.058594 6.191406 43.058594 5.808594 42.878906 5.496094 C 42.695313 5.183594 42.359375 4.996094 42 5 L 32 5 L 32 3 C 32 1.355469 30.644531 0 29 0 Z M 21 2 L 29 2 C 29.5625 2 30 2.4375 30 3 L 30 5 L 20 5 L 20 3 C 20 2.4375 20.4375 2 21 2 Z M 11.09375 7 L 38.90625 7 L 35.3125 47.34375 C 35.28125 47.691406 34.910156 48 34.59375 48 L 15.40625 48 C 15.089844 48 14.71875 47.691406 14.6875 47.34375 Z M 18.90625 9.96875 C 18.863281 9.976563 18.820313 9.988281 18.78125 10 C 18.316406 10.105469 17.988281 10.523438 18 11 L 18 44 C 17.996094 44.359375 18.183594 44.695313 18.496094 44.878906 C 18.808594 45.058594 19.191406 45.058594 19.503906 44.878906 C 19.816406 44.695313 20.003906 44.359375 20 44 L 20 11 C 20.011719 10.710938 19.894531 10.433594 19.6875 10.238281 C 19.476563 10.039063 19.191406 9.941406 18.90625 9.96875 Z M 24.90625 9.96875 C 24.863281 9.976563 24.820313 9.988281 24.78125 10 C 24.316406 10.105469 23.988281 10.523438 24 11 L 24 44 C 23.996094 44.359375 24.183594 44.695313 24.496094 44.878906 C 24.808594 45.058594 25.191406 45.058594 25.503906 44.878906 C 25.816406 44.695313 26.003906 44.359375 26 44 L 26 11 C 26.011719 10.710938 25.894531 10.433594 25.6875 10.238281 C 25.476563 10.039063 25.191406 9.941406 24.90625 9.96875 Z M 30.90625 9.96875 C 30.863281 9.976563 30.820313 9.988281 30.78125 10 C 30.316406 10.105469 29.988281 10.523438 30 11 L 30 44 C 29.996094 44.359375 30.183594 44.695313 30.496094 44.878906 C 30.808594 45.058594 31.191406 45.058594 31.503906 44.878906 C 31.816406 44.695313 32.003906 44.359375 32 44 L 32 11 C 32.011719 10.710938 31.894531 10.433594 31.6875 10.238281 C 31.476563 10.039063 31.191406 9.941406 30.90625 9.96875 Z"/></svg>

Flask/static/js/main.js

@@ -0,0 +1,102 @@
+function addline(ligne){
+    var lplus = parseInt(ligne) + 1;
+    document.getElementById("table").insertRow(lplus).insertCell(0).innerHTML = '<input type="file" id="file' + lplus + '" name="file' + lplus + '" onchange="addline(' + lplus + ')">'
+}
+
+function change_discord(value, data, len) {
+    if (value == len){
+        document.getElementById("name").value = "";
+        document.getElementById("submit").value = "Create !";
+        document.getElementById("successT").checked = false;
+        document.getElementById("errorsT").checked = false;
+        document.getElementById("successL").value = "";
+        document.getElementById("errorsL").value = "";
+    }
+    else {
+        console.log(data[parseInt(value)]["successL"]);
+        document.getElementById("submit").value = "Update";
+        document.getElementById("successT").checked = data[parseInt(value)]["successT"] == "True";
+        document.getElementById("errorsT").checked = data[parseInt(value)]["errorsT"] == "True";
+        document.getElementById("successL").value = data[parseInt(value)]["successL"];
+        document.getElementById("errorsL").value = data[parseInt(value)]["errorsL"];
+        document.getElementById("name").value = data[parseInt(value)]["name"];
+    }
+}
+
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function change_config(value, data, len) {
+    console.log(data[2]);
+    document.getElementById("delete").style.visibility = "hidden";
+    if (value == len){
+        document.getElementById("submit").value = "Create !";
+        document.getElementById("discord").value = "-1";
+        document.getElementById("proxy").value = "-1";
+        document.getElementById("name").value = "";
+        for (let i = 1; i < 6; i++) {
+            document.getElementById("mail"+ i).value = "";
+            document.getElementById("pwd"+  i).value = "" ;
+            document.getElementById("2fa"+  i).value = "" ;
+        }
+    }
+    else {
+        document.getElementById("delete").style.visibility = "visible";
+        document.getElementById("submit").value = "Update !";
+        document.getElementById("discord").value = data[parseInt(value)]["discord"];
+        document.getElementById("proxy").value = data[parseInt(value)]["proxy"];
+        document.getElementById("name").value = data[parseInt(value)]["name"];
+        for (let i = 1; i < 6; i++) {
+            document.getElementById("mail"+ i).value = data[parseInt(value)]['accounts'][i]["mail"] ;
+            document.getElementById("pwd"+  i).value = data[parseInt(value)]['accounts'][i]["pwd"] ;
+            document.getElementById("2fa"+  i).value = data[parseInt(value)]['accounts'][i]["2fa"] ;
+        }
+        
+    }
+}
+
+function change_proxy(value, data, len) {
+    if (value == len){
+        document.getElementById("submit").value = "Create";
+        document.getElementById("address").value = "";
+        document.getElementById("port").value = "";
+        document.getElementById("name").value = "";
+    }
+    else {
+        document.getElementById("submit").value = "Update";
+        document.getElementById("address").value = data[parseInt(value)]["address"];
+        document.getElementById("port").value = data[parseInt(value)]["port"];
+        document.getElementById("name").value = data[parseInt(value)]["name"];
+    }
+}
+
+function change_override(value, data) {
+    for (let i = 1; i < 6; i++) {
+        document.getElementById("compte_"+ i).innerHTML = data[parseInt(value)]['accounts'][i]["mail"];
+        if (!(data[parseInt(value)]['accounts'][i]["mail"])){
+            console.log("hiding" + i);
+            for (let j = 1; j <= 5; j++) {
+                
+                document.getElementById(i.toString() +j.toString()).style.visibility = "hidden";
+            }   
+        } else {
+            console.log("showing" + i);
+            for (let j = 1; j <= 5; j++) {
+                console.log("element " + i.toString()+j.toString());
+                document.getElementById(i.toString()+j.toString()).style.visibility = "visible";
+            } 
+        }
+    }
+}
+
+
+function change_logs(value) {
+    var myIframe = document.getElementById('embed');
+        myIframe.addEventListener("load", function() {
+            let doc = myIframe.contentDocument;
+            doc.body.innerHTML = doc.body.innerHTML + '<style>html{color:white;}</style>';
+            myIframe.contentWindow.scrollTo(0, myIframe.contentDocument.body.scrollHeight);
+    });
+    myIframe.src = "/static/logs/" + value + ".txt";
+}

Flask/static/logs/.gitignore

@@ -0,0 +1 @@
+*.txt