Browse Source

update: themes & headers auth

pull/1228/head
tetuaoro 2 years ago
parent
commit
46fe661803
  1. 2
      docker-compose.dev.yml
  2. 18
      src/lib/Server.js
  3. 8
      src/templates/Settings.vue
  4. 10
      src/www/css/app.css
  5. 10
      src/www/index.html
  6. 2
      src/www/js/vendor/vue-settings.umd.min.js
  7. 2
      src/www/js/vendor/vue-settings.umd.min.js.map

2
docker-compose.dev.yml

@ -13,5 +13,5 @@ services:
- NET_ADMIN
- SYS_MODULE
environment:
# - PASSWORD_HASH=p
# - PASSWORD=p
- WG_HOST=192.168.1.233

18
src/lib/Server.js

@ -128,7 +128,7 @@ module.exports = class Server {
// WireGuard
app.use(
fromNodeMiddleware((req, res, next) => {
fromNodeMiddleware(async (req, res, next) => {
if (!requiresPassword || !req.url.startsWith('/api/')) {
return next();
}
@ -138,14 +138,14 @@ module.exports = class Server {
}
if (req.url.startsWith('/api/') && req.headers['authorization']) {
// when I debug req.headers['authorization'], I have nothing
// if (isPasswordValid(req.headers['authorization'])) {
// return next();
// }
// return res.status(401).json({
// error: 'Incorrect Password',
// });
return next();
// headers are base64
const [username, password] = Buffer.from(req.headers['authorization'].split(' ')[1], 'base64')
.toString()
.split(':');
if (await isPasswordValid(username, password)) {
return next();
}
}
return res.status(401).json({

8
src/templates/Settings.vue

@ -54,7 +54,7 @@ export default {
{{ $t('currentPassword') }}
</label>
<input id="currentPassword" v-model="currentPassword" type="password" :placeholder="$t('currentPassword')"
class="outline-none bg-transparent border border-neutral-500 p-2 rounded-md w-full" required />
class="outline-none focus:border-red-800 bg-transparent border border-neutral-500 p-2 rounded-md w-full" required />
</div>
<div class="mb-4">
@ -62,7 +62,7 @@ export default {
{{ $t('newPassword') }}
</label>
<input id="newPassword" v-model="newPassword" type="password" :placeholder="$t('newPassword')"
class="outline-none bg-transparent border border-neutral-500 p-2 rounded-md w-full" required />
class="outline-none focus:border-red-800 bg-transparent border border-neutral-500 p-2 rounded-md w-full" required />
</div>
<div class="mb-4">
@ -70,10 +70,10 @@ export default {
{{ $t('confirmNewPassword') }}
</label>
<input id="confirmNewPassword" v-model="confirmNewPassword" type="password" :placeholder="$t('confirmNewPassword')"
class="outline-none bg-transparent border border-neutral-500 p-2 rounded-md w-full" required />
class="outline-none focus:border-red-800 bg-transparent border border-neutral-500 p-2 rounded-md w-full" required />
</div>
<button type="submit" class="bg-neutral-400 text-white p-2 rounded-md w-full hover:bg-red-800 transition">
<button type="submit" :disabled="!newPassword || !confirmNewPassword || newPassword != confirmNewPassword" :class="!newPassword || !confirmNewPassword || newPassword != confirmNewPassword ? 'bg-neutral-400 text-white p-2 rounded-md w-full transition' : 'bg-red-800 text-white p-2 rounded-md w-full transition'">
{{ $t('updatePassword') }}
</button>
</form>

10
src/www/css/app.css

@ -895,8 +895,8 @@ video {
min-width: 5rem;
}
.max-w-3xl {
max-width: 48rem;
.max-w-5xl {
max-width: 64rem;
}
.flex-auto {
@ -1461,6 +1461,12 @@ video {
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

10
src/www/index.html

@ -25,12 +25,12 @@
<div id="app">
<div v-cloak class="container mx-auto max-w-5xl px-3 md:px-0 mt-4 xs:mt-6">
<div v-if="authenticated === true">
<div class="flex flex-col-reverse xxs:flex-row flex-auto items-end gap-3">
<div class="flex flex-col-reverse xxs:flex-row flex-auto items-center items-end gap-3">
<h1 class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4">
<img src="./img/logo.png" width="32" class="inline align-middle dark:bg mr-2"/><span
class="align-middle">WireGuard</span>
</h1>
<div class="flex grow-0 gap-3 items-end self-end xxs:self-center">
<div class="flex grow-0 gap-3 items-center items-end self-end xxs:self-center">
<!-- Dark / light theme -->
<button @click="toggleTheme"
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition"
@ -96,11 +96,11 @@
<div class="flex max-md:flex-col max-md:gap-y-8 md:gap-x-8">
<!-- Navigation -->
<nav class="shadow-md rounded-lg bg-white dark:bg-neutral-700 text-white p-4">
<nav class="shadow-md rounded-lg bg-white dark:bg-neutral-700 text-gray-700 dark:text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex flex-col">
<button @click="showPage = 'home'"
class="flex items-center rounded hover:bg-red-800 transition-colors px-3 py-2 text-lg">
class="flex items-center rounded hover:bg-red-800 hover:text-white transition-colors px-3 py-2 text-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
@ -109,7 +109,7 @@
</span>
</button>
<button @click="showPage = 'settings'"
class="flex items-center rounded hover:bg-red-800 transition-colors px-3 py-2 text-lg">
class="flex items-center rounded hover:bg-red-800 hover:text-white transition-colors px-3 py-2 text-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
</svg>

2
src/www/js/vendor/vue-settings.umd.min.js

@ -1,2 +1,2 @@
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VueSettings"]=t():e["VueSettings"]=t()})("undefined"!==typeof self?self:this,(()=>(()=>{"use strict";var e={};(()=>{e.d=(t,s)=>{for(var r in s)e.o(s,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:s[r]})}})(),(()=>{e.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{e.p=""})();var t={};if(e.d(t,{default:()=>c}),"undefined"!==typeof window){var s=window.document.currentScript,r=s&&s.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(e.p=r[1])}var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"w-full shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"},[s("div",{staticClass:"flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-neutral-500/50 dark:border-neutral-600"},[s("div",{staticClass:"flex-grow"},[s("p",{staticClass:"text-2xl font-medium dark:text-neutral-200"},[e._v(e._s(e.$t("settings")))])])]),s("div",{staticClass:"container p-2 flex flex-col md:items-center py-8"},[s("form",{staticClass:"w-full md:w-[75%]",on:{submit:e.updatePassword}},[s("div",{staticClass:"mb-4"},[s("label",{staticClass:"block text-sm font-medium dark:text-neutral-200 mb-4",attrs:{for:"currentPassword"}},[e._v(" "+e._s(e.$t("currentPassword"))+" ")]),s("input",{directives:[{name:"model",rawName:"v-model",value:e.currentPassword,expression:"currentPassword"}],staticClass:"outline-none bg-transparent border border-neutral-500 p-2 rounded-md w-full",attrs:{id:"currentPassword",type:"password",placeholder:e.$t("currentPassword"),required:""},domProps:{value:e.currentPassword},on:{input:function(t){t.target.composing||(e.currentPassword=t.target.value)}}})]),s("div",{staticClass:"mb-4"},[s("label",{staticClass:"block text-sm font-medium dark:text-neutral-200 mb-4",attrs:{for:"newPassword"}},[e._v(" "+e._s(e.$t("newPassword"))+" ")]),s("input",{directives:[{name:"model",rawName:"v-model",value:e.newPassword,expression:"newPassword"}],staticClass:"outline-none bg-transparent border border-neutral-500 p-2 rounded-md w-full",attrs:{id:"newPassword",type:"password",placeholder:e.$t("newPassword"),required:""},domProps:{value:e.newPassword},on:{input:function(t){t.target.composing||(e.newPassword=t.target.value)}}})]),s("div",{staticClass:"mb-4"},[s("label",{staticClass:"block text-sm font-medium dark:text-neutral-200 mb-4",attrs:{for:"confirmNewPassword"}},[e._v(" "+e._s(e.$t("confirmNewPassword"))+" ")]),s("input",{directives:[{name:"model",rawName:"v-model",value:e.confirmNewPassword,expression:"confirmNewPassword"}],staticClass:"outline-none bg-transparent border border-neutral-500 p-2 rounded-md w-full",attrs:{id:"confirmNewPassword",type:"password",placeholder:e.$t("confirmNewPassword"),required:""},domProps:{value:e.confirmNewPassword},on:{input:function(t){t.target.composing||(e.confirmNewPassword=t.target.value)}}})]),s("button",{staticClass:"bg-neutral-400 text-white p-2 rounded-md w-full hover:bg-red-800 transition",attrs:{type:"submit"}},[e._v(" "+e._s(e.$t("updatePassword"))+" ")])])])])},a=[];const n={name:"Settings",data(){return{currentPassword:"",newPassword:"",confirmNewPassword:""}},methods:{async updatePassword(e){e.preventDefault(),this.newPassword===this.confirmNewPassword?this.api.updatePassword({username:"admin",oldPassword:this.currentPassword,newPassword:this.newPassword}).then((e=>{this.currentPassword="",this.newPassword="",this.confirmNewPassword="",alert("Password updated")})).catch((e=>{alert(e.message||e.toString())})):alert("Password Mismatch")}},mounted(){this.api=new API}},d=n;function i(e,t,s,r,o,a,n,d){var i,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=s,l._compiled=!0),r&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),n?(i=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(n)},l._ssrRegister=i):o&&(i=d?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),i)if(l.functional){l._injectStyles=i;var u=l.render;l.render=function(e,t){return i.call(t),u(e,t)}}else{var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,i):[i]}return{exports:e,options:l}}var l=i(d,o,a,!1,null,null,null);const u=l.exports,c=u;return t=t["default"],t})()));
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VueSettings"]=t():e["VueSettings"]=t()})("undefined"!==typeof self?self:this,(()=>(()=>{"use strict";var e={};(()=>{e.d=(t,s)=>{for(var r in s)e.o(s,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:s[r]})}})(),(()=>{e.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{e.p=""})();var t={};if(e.d(t,{default:()=>w}),"undefined"!==typeof window){var s=window.document.currentScript,r=s&&s.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(e.p=r[1])}var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"w-full shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"},[s("div",{staticClass:"flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-neutral-500/50 dark:border-neutral-600"},[s("div",{staticClass:"flex-grow"},[s("p",{staticClass:"text-2xl font-medium dark:text-neutral-200"},[e._v(e._s(e.$t("settings")))])])]),s("div",{staticClass:"container p-2 flex flex-col md:items-center py-8"},[s("form",{staticClass:"w-full md:w-[75%]",on:{submit:e.updatePassword}},[s("div",{staticClass:"mb-4"},[s("label",{staticClass:"block text-sm font-medium dark:text-neutral-200 mb-4",attrs:{for:"currentPassword"}},[e._v(" "+e._s(e.$t("currentPassword"))+" ")]),s("input",{directives:[{name:"model",rawName:"v-model",value:e.currentPassword,expression:"currentPassword"}],staticClass:"outline-none focus:border-red-800 bg-transparent border border-neutral-500 p-2 rounded-md w-full",attrs:{id:"currentPassword",type:"password",placeholder:e.$t("currentPassword"),required:""},domProps:{value:e.currentPassword},on:{input:function(t){t.target.composing||(e.currentPassword=t.target.value)}}})]),s("div",{staticClass:"mb-4"},[s("label",{staticClass:"block text-sm font-medium dark:text-neutral-200 mb-4",attrs:{for:"newPassword"}},[e._v(" "+e._s(e.$t("newPassword"))+" ")]),s("input",{directives:[{name:"model",rawName:"v-model",value:e.newPassword,expression:"newPassword"}],staticClass:"outline-none focus:border-red-800 bg-transparent border border-neutral-500 p-2 rounded-md w-full",attrs:{id:"newPassword",type:"password",placeholder:e.$t("newPassword"),required:""},domProps:{value:e.newPassword},on:{input:function(t){t.target.composing||(e.newPassword=t.target.value)}}})]),s("div",{staticClass:"mb-4"},[s("label",{staticClass:"block text-sm font-medium dark:text-neutral-200 mb-4",attrs:{for:"confirmNewPassword"}},[e._v(" "+e._s(e.$t("confirmNewPassword"))+" ")]),s("input",{directives:[{name:"model",rawName:"v-model",value:e.confirmNewPassword,expression:"confirmNewPassword"}],staticClass:"outline-none focus:border-red-800 bg-transparent border border-neutral-500 p-2 rounded-md w-full",attrs:{id:"confirmNewPassword",type:"password",placeholder:e.$t("confirmNewPassword"),required:""},domProps:{value:e.confirmNewPassword},on:{input:function(t){t.target.composing||(e.confirmNewPassword=t.target.value)}}})]),s("button",{class:e.newPassword&&e.confirmNewPassword&&e.newPassword==e.confirmNewPassword?"bg-red-800 text-white p-2 rounded-md w-full transition":"bg-neutral-400 text-white p-2 rounded-md w-full transition",attrs:{type:"submit",disabled:!e.newPassword||!e.confirmNewPassword||e.newPassword!=e.confirmNewPassword}},[e._v(" "+e._s(e.$t("updatePassword"))+" ")])])])])},a=[];const n={name:"Settings",data(){return{currentPassword:"",newPassword:"",confirmNewPassword:""}},methods:{async updatePassword(e){e.preventDefault(),this.newPassword===this.confirmNewPassword?this.api.updatePassword({username:"admin",oldPassword:this.currentPassword,newPassword:this.newPassword}).then((e=>{this.currentPassword="",this.newPassword="",this.confirmNewPassword="",alert("Password updated")})).catch((e=>{alert(e.message||e.toString())})):alert("Password Mismatch")}},mounted(){this.api=new API}},d=n;function i(e,t,s,r,o,a,n,d){var i,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=s,l._compiled=!0),r&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),n?(i=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(n)},l._ssrRegister=i):o&&(i=d?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),i)if(l.functional){l._injectStyles=i;var u=l.render;l.render=function(e,t){return i.call(t),u(e,t)}}else{var w=l.beforeCreate;l.beforeCreate=w?[].concat(w,i):[i]}return{exports:e,options:l}}var l=i(d,o,a,!1,null,null,null);const u=l.exports,w=u;return t=t["default"],t})()));
//# sourceMappingURL=vue-settings.umd.min.js.map

2
src/www/js/vendor/vue-settings.umd.min.js.map

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save