diff --git a/src/config/_default/config.toml b/src/config/_default/config.toml index 1e9becfd5..3fae752c0 100644 --- a/src/config/_default/config.toml +++ b/src/config/_default/config.toml @@ -102,6 +102,12 @@ disableKinds = ["sitemap", "taxonomyTerm"] url = "/signup/" weight = 5 + [[menu.footercolone]] + identifier = "light" + name = "IVPN Light" + url = "/light/" + weight = 5 + [[menu.footercolone]] identifier = "wireguard" name = "WireGuard® VPN" diff --git a/src/themes/ivpn-v3/assets/js/api/api.js b/src/themes/ivpn-v3/assets/js/api/api.js index e82bd6f69..665dd443b 100644 --- a/src/themes/ivpn-v3/assets/js/api/api.js +++ b/src/themes/ivpn-v3/assets/js/api/api.js @@ -396,12 +396,15 @@ export default { async createLightInvoice(priceID, exitServer, entryServer, privateKey, publicKey) { + if( !Array.isArray(entryServer) ) { + entryServer = [ entryServer ] + } let response = await this.Post('/web/accounts/btc/create-light-invoice', { price_id: priceID, private_key: privateKey, public_key: publicKey, exit_server: exitServer, - entry_server: [ entryServer ] + entry_server: entryServer }) return response diff --git a/src/themes/ivpn-v3/assets/js/app.js b/src/themes/ivpn-v3/assets/js/app.js index ecd8760f4..3b2580899 100644 --- a/src/themes/ivpn-v3/assets/js/app.js +++ b/src/themes/ivpn-v3/assets/js/app.js @@ -47,7 +47,7 @@ const app = createApp({ computed: { ...mapState({ isAuthenticated: state => state.auth.isAuthenticated, - isLegacy: state => state.auth.isLegacy + isLegacy: state => state.auth.isLegacy, }) } }) diff --git a/src/themes/ivpn-v3/assets/js/components/SelectLocations.vue b/src/themes/ivpn-v3/assets/js/components/SelectLocations.vue index 50697cd95..dfa28ef10 100644 --- a/src/themes/ivpn-v3/assets/js/components/SelectLocations.vue +++ b/src/themes/ivpn-v3/assets/js/components/SelectLocations.vue @@ -169,7 +169,7 @@ export default { @media (max-width: $brk-mobile-xs) { } @include light-theme(( - background: $white, + background: #FFFFFF, color: $black )); @@ -239,4 +239,16 @@ export default { color: #FFFFFF )); } + +.vs__dropdown-option--disabled{ + @include light-theme(( + background: #FFFFFF, + color: #222226 + )); + + @include dark-theme(( + background: #202020, + color: #FFFFFF + )); +} \ No newline at end of file diff --git a/src/themes/ivpn-v3/assets/js/components/SelectLocationsMulti.vue b/src/themes/ivpn-v3/assets/js/components/SelectLocationsMulti.vue index ccba5eaa0..b61728878 100644 --- a/src/themes/ivpn-v3/assets/js/components/SelectLocationsMulti.vue +++ b/src/themes/ivpn-v3/assets/js/components/SelectLocationsMulti.vue @@ -1,30 +1,48 @@ - - - - {{ props.option.name }}{{ props.option.code }} + :clearable="clearable" + :searchable="searchable" + :filterable="filterable" + appendToBody + > + + + + {{ option.country }},{{ option.city }} + + + + + + + + {{ city }} + + - + diff --git a/src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue b/src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue index 3802d1107..523e4b4f3 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue @@ -1,5 +1,5 @@ - + Select payment method @@ -32,6 +32,7 @@ export default { return { price: null, title: String, + isLight : false }; }, created() { @@ -66,6 +67,13 @@ export default { account: (state) => state.auth.account, }), }, + + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, }; diff --git a/src/themes/ivpn-v3/assets/js/views/Account/Invoice.vue b/src/themes/ivpn-v3/assets/js/views/Account/Invoice.vue index b2a6342fd..01a5d3726 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/Invoice.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/Invoice.vue @@ -1,5 +1,5 @@ - + {{ error.message }} @@ -64,7 +64,8 @@ export default { data() { return { refId: "", - payment: null, + payment: null, + isLight : false }; }, computed: { @@ -87,6 +88,13 @@ export default { console.log("Payment", payment) this.payment = payment }, + + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, }; diff --git a/src/themes/ivpn-v3/assets/js/views/Account/Payment.vue b/src/themes/ivpn-v3/assets/js/views/Account/Payment.vue index 031b3b502..10eebf570 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/Payment.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/Payment.vue @@ -1,5 +1,5 @@ - + Back to account @@ -24,11 +24,22 @@ export default { components: { SelectPaymentMethod, }, + data() { + return { + isLight : false + }; + }, computed: { ...mapState({ account: (state) => state.auth.account, }), }, + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, }; diff --git a/src/themes/ivpn-v3/assets/js/views/Account/PortForwarding.vue b/src/themes/ivpn-v3/assets/js/views/Account/PortForwarding.vue index 031ccf576..04afd2f17 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/PortForwarding.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/PortForwarding.vue @@ -1,5 +1,5 @@ - + Your account is expired @@ -108,6 +108,11 @@ export default { components: { Spinner, }, + data() { + return { + isLight : false + }; + }, computed: { ...mapState({ ports: (state) => state.portForwarding.ports, @@ -128,6 +133,13 @@ export default { this.$store.dispatch("portForwarding/disable"); }, }, + + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, }; diff --git a/src/themes/ivpn-v3/assets/js/views/Account/Settings.vue b/src/themes/ivpn-v3/assets/js/views/Account/Settings.vue index ee6fcdab1..a18255b83 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/Settings.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/Settings.vue @@ -1,5 +1,5 @@ - + Back to account @@ -58,6 +58,11 @@ export default { account: (state) => state.auth.account, }), }, + data() { + return { + isLight : false + }; + }, methods: { deleteAccount() { this.$store.commit("popup/show", { @@ -66,6 +71,15 @@ export default { }); }, }, + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, + + + }; diff --git a/src/themes/ivpn-v3/assets/js/views/Account/ThankYouLight.vue b/src/themes/ivpn-v3/assets/js/views/Account/ThankYouLight.vue index 8cb4fb8ef..448bc317b 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/ThankYouLight.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/ThankYouLight.vue @@ -10,7 +10,7 @@ Next steps: Save the QR code or config file now to avoid losing access. - Download and open the WireGuard app. + Download and open the WireGuard app. Scan the QR code, or add the configuration provided. @@ -18,7 +18,13 @@ Access to: + + {{ qr.entryCity }} + {{ qr.city }} + + {{ qr.city }} + @@ -37,7 +43,7 @@ />Download configuration - For further access beyond {{ $filters.formatActiveUntil(account.active_until) }} pay for a separate IVPN Light access, or generate an IVPN Standard or Pro account. + For further access beyond {{ $filters.formatActiveUntil(account.active_until) }} pay for a separate IVPN Light access, or generate an IVPN Standard or Pro account. @@ -66,6 +72,7 @@ export default { }, async created() { + document.getElementById("my-account").remove(); await this.$store.dispatch("auth/reload"); await this.$store.dispatch("wireguard/load"); await this.$store.dispatch("wireguard/loadConfigs"); @@ -81,7 +88,7 @@ export default { let zip = new JSZip(); let basename = this.multihop ? (this.multihop_basename + ".conf") : null this.wireguardConfigs.forEach(function (config) { - zip.file(basename || config.basename, self.configString(config)); + zip.file(config.basename, self.configString(config)); }); zip.generateAsync({ type: "blob" }).then(function(content) { FileSaver.saveAs(content, "ivpn-wireguard-config.zip"); @@ -100,6 +107,16 @@ export default { location.qrCode = qr.createSvgTag(4) location.countryCode = res.country_code; location.city = res.city; + if( res.multihop ){ + this.multihop = true; + location.countryCode = res.exit_country_code; + location.city = res.exit_city; + location.entryCity = res.city; + location.entryCountryCode = res.country_code; + }else{ + location.countryCode = res.country_code; + location.city = res.city; + } this.qrCodes.push(location); }, configString(config) { @@ -142,7 +159,11 @@ export default { }, }, + beforeMount(){ + document.getElementById("my-account").remove(); + }, mounted(){ + document.getElementById("my-account").remove(); } }; diff --git a/src/themes/ivpn-v3/assets/js/views/Account/Wireguard.vue b/src/themes/ivpn-v3/assets/js/views/Account/Wireguard.vue index d58a18ba1..cabefeca8 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/Wireguard.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/Wireguard.vue @@ -1,5 +1,5 @@ - + Your account is expired @@ -79,6 +79,17 @@ export default { WireguardKey, Spinner, }, + data() { + return { + isLight : false + }; + }, + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, mounted() { this.$store.dispatch("wireguard/load"); }, diff --git a/src/themes/ivpn-v3/assets/js/views/Account/WireguardConfig.vue b/src/themes/ivpn-v3/assets/js/views/Account/WireguardConfig.vue index e7f775573..b1f977e06 100644 --- a/src/themes/ivpn-v3/assets/js/views/Account/WireguardConfig.vue +++ b/src/themes/ivpn-v3/assets/js/views/Account/WireguardConfig.vue @@ -1,5 +1,5 @@ - + Your account is expired @@ -257,6 +257,7 @@ export default { qrCode: "", hostKey: 0, dns: null, + isLight : false }; }, watch: { @@ -577,6 +578,12 @@ export default { return ipv46_regex.test(ip); }, }, + beforeMount(){ + if( this.$store.state.auth.account.product.name == "IVPN Light"){ + this.isLight = true; + window.location = "/light"; + } + }, components: {} }; diff --git a/src/themes/ivpn-v3/assets/js/views/OnePageCheckout.vue b/src/themes/ivpn-v3/assets/js/views/OnePageCheckout.vue index c2103490f..00104ab5d 100644 --- a/src/themes/ivpn-v3/assets/js/views/OnePageCheckout.vue +++ b/src/themes/ivpn-v3/assets/js/views/OnePageCheckout.vue @@ -8,8 +8,14 @@ IVPN Light - quick IVPN access - priced in sats - pay with Lightning - Choose up to 5 exit points, or one Multi-hop setup. Works with Wireguard app on mobile or desktop. + VPN access in 60 seconds + + Generate or upload keys + Select servers & duration + Pay with Lightning + + Up to 5 exit points or one Multi-hop setup. + Works with Wireguard app on mobile or desktop. @@ -26,8 +32,12 @@ - {{ showKeysTitle }} - {{ usedCustomKeysText }} + + + Private keys are generated and processed client side - IVPN does not gain access to them.WireGuard key pair generated for your setup: + + + {{ usedCustomKeysText }} Public Key @@ -40,6 +50,9 @@ + + Private keys are generated and processed client side - IVPN does not gain access to them. + Public Key: @@ -79,7 +92,7 @@ v-model="selectedExitLocation" multiple placeholder="Select a location" - :clearable="false" + :clearable="true" :searchable="true" :filterable="true" > @@ -90,28 +103,28 @@ Select entry server location - - + Select exit server location - - + @@ -138,6 +151,7 @@ Purchase access We host our own BTCPay Server to generate a Lightning invoice for payment. + By making a payment you are agreeing to our Terms of Service. @@ -205,19 +219,10 @@ export default { exitServers: [], entryCities: [], entryServers: [], - query: { - country: null, - city: null, - host: null, - port: 2049, - ipv4: true, - ipv6: true, - }, error: { addKey: null, }, keysAdded: false, - showKeysTitle: "WireGuard key pair generated for your setup:", usedCustomKeysText: "You have added the following custom key pair:", generateKeysClicked: false, addKeysClicked: false, @@ -225,11 +230,6 @@ export default { }; }, watch: { - query: { - handler: function (after, before) { - }, - deep: true - }, validation: { handler: function (after, before) { }, @@ -244,17 +244,40 @@ export default { } }, selectedEntryLocation: function(){ - if(this.selectedExitLocation.length > 0){ + if( this.selectedEntryLocation != null && this.selectedEntryLocation.length > 1){ + this.selectedEntryLocation.shift(); + let [entry] = this.selectedEntryLocation + this.selectedEntryLocation = entry; + } + + if(this.selectedEntryLocation != null && this.selectedEntryLocation.length > 0 && this.selectedMultihopExitLocation != null && this.selectedMultihopExitLocation.length > 0){ this.validation.submit = false; + if( this.selectedMultihopExitLocation[0].city == this.selectedEntryLocation[0].city){ + this.selectedMultihopExitLocation = []; + this.validation.submit = true; + } }else{ this.validation.submit = true; - } + } }, selectedMultihopExitLocation: function(){ - this.selectedExitLocation = [this.selectedMultihopExitLocation]; - if(this.selectedEntryLocation !== null){ + + if( this.selectedMultihopExitLocation != null && this.selectedMultihopExitLocation.length > 1){ + this.selectedMultihopExitLocation.shift(); + let [exit] = this.selectedMultihopExitLocation + this.selectedMultihopExitLocation = [exit]; + } + if(this.selectedEntryLocation != null && this.selectedEntryLocation.length > 0 && this.selectedMultihopExitLocation != null && this.selectedMultihopExitLocation.length > 0){ this.validation.submit = false; + if( this.selectedMultihopExitLocation[0].city == this.selectedEntryLocation[0].city){ + this.selectedEntryLocation = []; + this.validation.submit = true; + } + }else{ + this.validation.submit = true; } + this.selectedExitLocation = this.selectedMultihopExitLocation; + console.log(this.validation.submit); }, }, @@ -307,13 +330,7 @@ export default { publicKey: this.publicKey, } try { - await Api.logout(); - let account = await Api.createNewAccount("IVPN Light"); - if (account == null) { - this.validation.submit = true; - throw { message: "Invalid result returned from API" } - return; - } + await this.$store.dispatch("auth/createAccount", {product: "IVPN Light"} ); let URL = await this.$store.dispatch("account/createLightInvoice", { exitServer: this.selectedExitLocation, @@ -323,9 +340,9 @@ export default { priceID: this.selectedBillingCycle, }); if( URL ){ - JSCookie.set('lpv', this.privateKey, { expires: 0.5, }) JSCookie.set('lmh', this.multihop , { expires: 0.5, }) - //JSCookie.set('logged_in', 2) + JSCookie.set('lpv', this.privateKey, { expires: 0.5, }) + console.log(this.$store.state.auth); window.location = URL; } this.validation.submit = true; @@ -343,17 +360,17 @@ export default { this.publicKey = keypair.publicKey; }, showKeys(){ - this.keysHidden = !this.keysHidden ; - this.useKeysHidden = true; - this.addKeysClicked = true; - this.generateKeysClicked = true; - this.addKeysClicked = false; + this.keysHidden = !this.keysHidden ; + this.useKeysHidden = true; + this.addKeysClicked = true; + this.generateKeysClicked = true; + this.addKeysClicked = false; }, useKeys(){ - this.useKeysHidden = !this.useKeysHidden ; - this.keysHidden = true ; - this.generateKeysClicked = false; - this.addKeysClicked = true; + this.useKeysHidden = !this.useKeysHidden ; + this.keysHidden = true ; + this.generateKeysClicked = false; + this.addKeysClicked = true; }, addKeys(){ if( wireguard.isValidKey(this.customPrivateKey) && wireguard.isValidKey(this.customPublicKey)){ @@ -428,6 +445,7 @@ section { .alert-light{ text-align:center; + line-height: 20px } .card { @@ -596,11 +614,8 @@ form .btn-border{ width: 100%; margin-bottom:14px; } - .keys-buttons { - margin-bottom:30px !important; - } + .alert-light h3{ - font-size: 30px !important; } .tabs ul li:not(:last-child) { @@ -610,18 +625,25 @@ form .btn-border{ .light-price span{ font-size: 14px; } -} -@media (min-width: 768px) and (max-width: 1024px) { - .alert-light h3{ - font-size: 48px !important; + font-size:14px; + font-weight: normal; + line-height: 15px !important; } +} + +@media (min-width: 768px) and (max-width: 1024px) { + .alert-light p{ font-size: 16px; padding: 15px; } + + .alert-light h3{ + line-height: 15px !important; + } } @@ -651,7 +673,6 @@ form .btn-border{ } .keys-buttons{ - margin-bottom:100px; } @@ -673,7 +694,14 @@ form .btn-border{ hr{ width:100%; - background:rgba(61, 61, 66, 0.5); + margin: 15px 0 15px 0; + @include light-theme(( + background:rgba(61, 61, 66, 0.5), + )); + + @include dark-theme(( + background: #F0F0F0, + )); } @@ -752,4 +780,38 @@ font-family: "Roboto Mono"; )); } +.alert-light h1{ + font-size:28px; +} + +.alert-light h2{ + font-size:20px; +} + +.alert-light h3{ + font-size:14px; + font-weight: normal; + line-height: 10px; +} + +.alert-light ol li{ +} + +.alert-light ol li:before{ + float:none; +} + +.alert-light ol{ +} + + +.alert-light p{ + margin-bottom: 0px; +} + +.one-page-tabs h4{ + line-height: 50px; +} + +
Next steps:
Access to:
{{ qr.entryCity }}
{{ qr.city }}
Choose up to 5 exit points, or one Multi-hop setup. Works with Wireguard app on mobile or desktop.