From ebe635acd9058a9eafcd6d9171f3def680bf3272 Mon Sep 17 00:00:00 2001 From: BrokenFire Date: Tue, 13 Feb 2018 16:31:57 +0100 Subject: [PATCH] Adding connection on navbar --- .gitignore | 4 + src/main/resources/static/css/style.css | 10 +- src/main/resources/static/index.html | 99 ++++++-- src/main/resources/static/js/js.cookie.js | 165 +++++++++++++ src/main/resources/static/js/navabar.js | 134 ++++++++++ src/main/resources/static/js/register.js | 40 +-- src/main/resources/templates/music.html | 95 ++++++- src/main/resources/templates/register.html | 275 +++++++++++++-------- 8 files changed, 680 insertions(+), 142 deletions(-) create mode 100644 src/main/resources/static/js/js.cookie.js create mode 100644 src/main/resources/static/js/navabar.js diff --git a/.gitignore b/.gitignore index 4cd1342..b66cef7 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,7 @@ META-INF/ classes/artifacts/Discord_Stroumpf_Beta_jar/ + +src/main/resources/templates/css + +src/main/resources/templates/js diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index 397fb88..f6d371e 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -1,8 +1,8 @@ -.nav-wrapper{ - margin-right: 1%; - margin-left: 1%; - width: 100%; -} +/*.nav-wrapper{*/ + /*!*margin-right: 1%;*!*/ + /*margin-left: 1%;*/ + /*width: 100%;*/ +/*}*/ .collapsible-body{ diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index 7f7bec9..de10685 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -15,32 +15,109 @@ - + + + + + + + + + + + + + + + + + + + + + + + +
@@ -48,14 +125,8 @@ - + + diff --git a/src/main/resources/static/js/js.cookie.js b/src/main/resources/static/js/js.cookie.js new file mode 100644 index 0000000..9a0945e --- /dev/null +++ b/src/main/resources/static/js/js.cookie.js @@ -0,0 +1,165 @@ +/*! + * JavaScript Cookie v2.2.0 + * https://github.com/js-cookie/js-cookie + * + * Copyright 2006, 2015 Klaus Hartl & Fagner Brack + * Released under the MIT license + */ +;(function (factory) { + var registeredInModuleLoader = false; + if (typeof define === 'function' && define.amd) { + define(factory); + registeredInModuleLoader = true; + } + if (typeof exports === 'object') { + module.exports = factory(); + registeredInModuleLoader = true; + } + if (!registeredInModuleLoader) { + var OldCookies = window.Cookies; + var api = window.Cookies = factory(); + api.noConflict = function () { + window.Cookies = OldCookies; + return api; + }; + } +}(function () { + function extend () { + var i = 0; + var result = {}; + for (; i < arguments.length; i++) { + var attributes = arguments[ i ]; + for (var key in attributes) { + result[key] = attributes[key]; + } + } + return result; + } + + function init (converter) { + function api (key, value, attributes) { + var result; + if (typeof document === 'undefined') { + return; + } + + // Write + + if (arguments.length > 1) { + attributes = extend({ + path: '/' + }, api.defaults, attributes); + + if (typeof attributes.expires === 'number') { + var expires = new Date(); + expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5); + attributes.expires = expires; + } + + // We're using "expires" because "max-age" is not supported by IE + attributes.expires = attributes.expires ? attributes.expires.toUTCString() : ''; + + try { + result = JSON.stringify(value); + if (/^[\{\[]/.test(result)) { + value = result; + } + } catch (e) {} + + if (!converter.write) { + value = encodeURIComponent(String(value)) + .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent); + } else { + value = converter.write(value, key); + } + + key = encodeURIComponent(String(key)); + key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent); + key = key.replace(/[\(\)]/g, escape); + + var stringifiedAttributes = ''; + + for (var attributeName in attributes) { + if (!attributes[attributeName]) { + continue; + } + stringifiedAttributes += '; ' + attributeName; + if (attributes[attributeName] === true) { + continue; + } + stringifiedAttributes += '=' + attributes[attributeName]; + } + return (document.cookie = key + '=' + value + stringifiedAttributes); + } + + // Read + + if (!key) { + result = {}; + } + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. Also prevents odd result when + // calling "get()" + var cookies = document.cookie ? document.cookie.split('; ') : []; + var rdecode = /(%[0-9A-Z]{2})+/g; + var i = 0; + + for (; i < cookies.length; i++) { + var parts = cookies[i].split('='); + var cookie = parts.slice(1).join('='); + + if (!this.json && cookie.charAt(0) === '"') { + cookie = cookie.slice(1, -1); + } + + try { + var name = parts[0].replace(rdecode, decodeURIComponent); + cookie = converter.read ? + converter.read(cookie, name) : converter(cookie, name) || + cookie.replace(rdecode, decodeURIComponent); + + if (this.json) { + try { + cookie = JSON.parse(cookie); + } catch (e) {} + } + + if (key === name) { + result = cookie; + break; + } + + if (!key) { + result[name] = cookie; + } + } catch (e) {} + } + + return result; + } + + api.set = api; + api.get = function (key) { + return api.call(api, key); + }; + api.getJSON = function () { + return api.apply({ + json: true + }, [].slice.call(arguments)); + }; + api.defaults = {}; + + api.remove = function (key, attributes) { + api(key, '', extend(attributes, { + expires: -1 + })); + }; + + api.withConverter = init; + + return api; + } + + return init(function () {}); +})); diff --git a/src/main/resources/static/js/navabar.js b/src/main/resources/static/js/navabar.js new file mode 100644 index 0000000..38e7067 --- /dev/null +++ b/src/main/resources/static/js/navabar.js @@ -0,0 +1,134 @@ +var nav_bar_account_link; +var connected_link = "account_box"; +var disconnected_link = "account_box"; +var input_name; +var input_psw; +var btn_submit; +var btn_disconnect; +var nav_name; + +$(document).ready(function() { + $('.button-navbar-mobile').sideNav({ + menuWidth: 400, // Default is 300 + edge: 'right', // Choose the horizontal origin + closeOnClick: false, // Closes side-nav on clicks, useful for Angular/Meteor + draggable: true // Choose whether you can drag to open on touch screens, + }); + + + nav_bar_account_link = $("#nav-bar-account"); + input_name = $("#user_input"); + input_psw = $("#password_input"); + btn_submit = $("#btn-submit-connect"); + btn_disconnect = $("#nav-disconnect"); + nav_name = $("#nav-name"); + + if(Cookies.get('token') === undefined){ + disconnected() + } + else{ + connected(); + } + + listeners(); +}); + + +function popOutSubmit(){ + if (btn_submit.hasClass("scale-in")) { + btn_submit.removeClass("scale-in"); + btn_submit.addClass("scale-out"); + } +} + +function popInSubmit(){ + if (btn_submit.hasClass("scale-out")) { + btn_submit.removeClass("scale-out"); + btn_submit.addClass("scale-in"); + } +} + + + +function connected(){ + console.log("Connected!"); + nav_bar_account_link.html(connected_link); + $('.dropdown-account').dropdown({ + constrainWidth: false, // Does not change width of dropdown to that of the activator + belowOrigin: true, // Displays dropdown below the button + alignment: 'left', // Displays dropdown with edge aligned to the left of button + stopPropagation: false // Stops event propagation + } + ); + nav_name.text(Cookies.get('name')); +} + +function disconnected() { + console.log("Disconnected"); + nav_bar_account_link.html(disconnected_link); + $('.modal').modal(); + +} + + +function tryConnection() { + var request = { name: input_name.val(), password: input_psw.val()}; + $.ajax({ + type: "POST", + dataType: 'json', + contentType: 'application/json', + url: "/api/userManagement/requestToken", + data: JSON.stringify(request), + success: function (data) { + console.log(data); + Cookies.set('token',data.token); + Cookies.set('name', data.name); + debugger; + location.reload(); + } + + }).fail(function (data) { + console.log(data); + switch(data.responseJSON.error){ + case "user": + input_name.addClass("invalid"); + break; + + case "password": + input_psw.addClass("invalid"); + break; + } + + }); + + + return true; +} + + +function listeners() { + input_name.on("input", function () { + if(input_name.val() !== "" && input_psw.val() !== "") { + popInSubmit(); + }else + { + popOutSubmit(); + } + }); + + input_psw.on("input", function () { + if(input_name.val() !== "" && input_psw.val() !== "") { + popInSubmit(); + }else + { + popOutSubmit(); + } + }); + + btn_disconnect.click(function () { + Cookies.remove('token'); + Cookies.remove('name'); + location.reload(); + }); + +} \ No newline at end of file diff --git a/src/main/resources/static/js/register.js b/src/main/resources/static/js/register.js index f4023cb..ea00b1c 100644 --- a/src/main/resources/static/js/register.js +++ b/src/main/resources/static/js/register.js @@ -15,13 +15,15 @@ $(document).ready(function() { $('#name').on("input", function () { if($('#name').val() === ""){ - if (!sendBtn.hasClass("disabled")) { - sendBtn.addClass("disabled"); + if (sendBtn.hasClass("scale-in")) { + sendBtn.removeClass("scale-in"); + sendBtn.addClass("scale-out"); } } else{ - if (sendBtn.hasClass("disabled") && ok_passwrd) { - sendBtn.removeClass("disabled"); + if (sendBtn.hasClass("scale-out") && ok_passwrd) { + sendBtn.removeClass("scale-out"); + sendBtn.addClass("scale-in"); } } }); @@ -40,8 +42,9 @@ $(document).ready(function() { } if($('#name').val() !== ""){ - if (sendBtn.hasClass("disabled")) { - sendBtn.removeClass("disabled"); + if (sendBtn.hasClass("scale-out")) { + sendBtn.removeClass("scale-out"); + sendBtn.addClass("scale-in"); } } ok_passwrd = true; @@ -54,8 +57,9 @@ $(document).ready(function() { confirm.removeClass("valid"); } - if (!sendBtn.hasClass("disabled")) { - sendBtn.addClass("disabled"); + if (sendBtn.hasClass("scale-in")) { + sendBtn.removeClass("scale-in"); + sendBtn.addClass("scale-out"); } ok_passwrd = false; } @@ -71,8 +75,9 @@ $(document).ready(function() { } if($('#name').val() !== ""){ - if (sendBtn.hasClass("disabled")) { - sendBtn.removeClass("disabled"); + if (sendBtn.hasClass("scale-out")) { + sendBtn.removeClass("scale-out"); + sendBtn.addClass("scale-in"); } } ok_passwrd = true; @@ -85,8 +90,9 @@ $(document).ready(function() { confirm.removeClass("valid"); } - if (!sendBtn.hasClass("disabled")) { - sendBtn.addClass("disabled"); + if (sendBtn.hasClass("scale-in")) { + sendBtn.removeClass("scale-in"); + sendBtn.addClass("scale-out"); } ok_passwrd = false; } @@ -132,13 +138,15 @@ $(document).ready(function() { $('#input_preToken').on("input", function () { var sendBtn = $('#preTokenSend'); if($('#input_preToken').val().length < 4){ - if (!sendBtn.hasClass("disabled")) { - sendBtn.addClass("disabled"); + if (sendBtn.hasClass("scale-in")) { + sendBtn.removeClass("scale-in"); + sendBtn.addClass("scale-out"); } } else{ - if (sendBtn.hasClass("disabled")) { - sendBtn.removeClass("disabled"); + if (sendBtn.hasClass("scale-out")) { + sendBtn.removeClass("scale-out"); + sendBtn.addClass("scale-in"); } } }); diff --git a/src/main/resources/templates/music.html b/src/main/resources/templates/music.html index bd5b0be..779b695 100644 --- a/src/main/resources/templates/music.html +++ b/src/main/resources/templates/music.html @@ -16,31 +16,106 @@ + + + + + + + + + + + + + + + + + + + + +
@@ -217,6 +292,8 @@ + + diff --git a/src/main/resources/templates/register.html b/src/main/resources/templates/register.html index a8f3e8b..b00a940 100644 --- a/src/main/resources/templates/register.html +++ b/src/main/resources/templates/register.html @@ -1,131 +1,210 @@ - - - - User Registration - Discord Bot - + + + + User Registration - Discord Bot + - - - - - + + + + + - + - + + + -
+ + + + + + + + + + + - - -