From c95c048c8b9c7515887ba3ae2d9f53a9063da46d Mon Sep 17 00:00:00 2001
From: Natanael Rodriguez Ramos <nathan@Natanaels-MacBook-Pro.local>
Date: Wed, 6 Sep 2023 09:51:18 +0100
Subject: [PATCH] light page improvements

---
 src/config/_default/config.toml               |   6 +
 src/themes/ivpn-v3/assets/js/api/api.js       |   5 +-
 src/themes/ivpn-v3/assets/js/app.js           |   2 +-
 .../assets/js/components/SelectLocations.vue  |  14 +-
 .../js/components/SelectLocationsMulti.vue    | 237 ++++++++++++++++--
 .../ivpn-v3/assets/js/store/module_auth.js    |   2 +-
 .../assets/js/views/Account/Account.vue       |  18 +-
 .../assets/js/views/Account/AddFunds.vue      |  10 +-
 .../assets/js/views/Account/Invoice.vue       |  12 +-
 .../assets/js/views/Account/Payment.vue       |  13 +-
 .../js/views/Account/PortForwarding.vue       |  14 +-
 .../assets/js/views/Account/Settings.vue      |  16 +-
 .../assets/js/views/Account/ThankYouLight.vue |  27 +-
 .../assets/js/views/Account/Wireguard.vue     |  13 +-
 .../js/views/Account/WireguardConfig.vue      |   9 +-
 .../assets/js/views/OnePageCheckout.vue       | 176 ++++++++-----
 16 files changed, 480 insertions(+), 94 deletions(-)

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
+    ));
+}
 </style>
\ 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 @@
 <template>
-
-    <multiselect 
-        v-model="selectedLocation" 
+    <v-select
+        v-model="selectedLocationMulti"
         :options="options"
-        :option-height="75" 
-        label="name" 
-        :show-labels="false"
-        track-by="name"
+        :getOptionLabel="getOptionLabel"
+        class="select-location-control"
+        :selectable="() =>  this.selectedLocationMulti.length < 2"
         :multiple = "multiple"
-        group-values="cities" 
-        group-label="country" 
-        :group-select="true"
-        >
-        <template slot="option" slot-scope="props"><img class="option__image" :src="props.option.img">
-      <div class="option__desc"><span class="option__title">{{ props.option.name }}</span><span class="option__small">{{ props.option.code }}</span></div>
+        :clearable="clearable"
+        :searchable="searchable"
+        :filterable="filterable"
+        appendToBody
+    >
+        <template v-slot:option="option">
+            <div class="option-element">
+                <div class="price-item-name" >
+                    <country-flag :country="option.country_code" size='normal'/> {{ option.country }},{{ option.city }}
+                </div>
+            </div>
+        </template>
+
+        <template #selected-option="{ country, city, country_code}">
+            <div class="option-element selected">
+                <div class="price-item-name" style="flex-grow: 1">
+                    <country-flag :country="country_code" size='normal'/> {{ city }}
+                </div>
+            </div>
         </template>
-  </multiselect>
+    </v-select>
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import vSelect from "vue-select";
+import VueSelectCaret from "@/components/VueSelectCaret.vue";
+import "vue-select/dist/vue-select.css";
 import CountryFlag from 'vue-country-flag-next'
 
+vSelect.props.components.default = () => ({
+    OpenIndicator: VueSelectCaret,
+});
+
+
 export default {
     components: {
-        Multiselect,
+        vSelect,
         CountryFlag,
     },
     model: {
@@ -34,14 +52,16 @@ export default {
     props: ["options", "value", "mode","multiple","clearable","searchable","filterable","selectable"],
     data() {
         return {
-            selectedLocation: [],
+            selectedLocationMulti: [],
         };
     },
     mounted() {
     },
     watch: {
-        selectedLocation: function () {
-            this.$emit("changeLocation", this.selecteLocation);
+        selectedLocationMulti: function (after, before) {
+            if( after == null){
+                this.selectedLocationMulti = [];
+            }
         },
     },
 
@@ -57,6 +77,182 @@ export default {
 @import "@/styles/_vars.scss";
 @import "@/styles/base.scss";
 
+.select-location-control {
+    margin-top: 1em;
+    font-size: 18px;
+    line-height: 30px;
+
+    @include light-theme((
+        background: $white,
+        color: $black
+    ));
+
+    @include dark-theme((
+        background: rgba($color: $white, $alpha: 0.1),
+        color: $white
+    ));
+
+    @media (max-width: $brk-mobile-xs) {
+    }
+
+    ul {
+        ::before {
+            display: none;
+        }
+
+        @include light-theme((
+            background: $white,
+            color: $black
+        ));
+
+        @include dark-theme((
+            background: #202020,
+            color: $white
+        ));
+    }
+
+    .option-element {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        line-height: 28px;
+        margin: 0px 8px;
+
+        @include light-theme((
+            color: $black
+        ));
+
+        @include dark-theme((
+            color: $white
+        ));
+
+        @media (max-width: $brk-mobile-xs) {
+        }
+
+        &.selected {
+
+            @media (max-width: $brk-mobile-xs) {
+            }
+        }
+
+        .price-item-name {
+            flex-grow: 1;
+        }
+        .price-item-price {
+            font-weight: bold;
+            font-family: $font-main-mono;
+            display: flex;
+            align-items: center;
+        }
+        .discount {
+            font-weight: normal;
+            opacity: 0.6;
+            padding: 0px 16px;
+            text-decoration: line-through;
+        }
+    }
+    .vs__selected {
+        @media (max-width: $brk-mobile-xs) {
+        }
+        @include light-theme((
+            background: $white,
+            color: $black
+        ));
+
+        @include dark-theme((
+            background: #202020,
+            color: $white
+        ));
+    }
+
+    .vs__dropdown-option--disabled{
+        @media (max-width: $brk-mobile-xs) {
+        }
+        @include light-theme((
+            background: #FFFFFF,
+            color: $black
+        ));
+
+        @include dark-theme((
+            background: transparent,
+            color: $white
+        ));
+    }
+}
+
+.vs__dropdown-menu{
+    @include light-theme((
+            background: $white,
+            color: $black
+        ));
+
+        @include dark-theme((
+            background: #202020,
+            color: $white
+        ));
+}
+
+.vs__clear{
+    @include light-theme((
+        fill: #909093
+    ));
+
+    @include dark-theme((
+        fill: #909093
+    ));
+}
+
+.vs__search{
+    @include light-theme((
+        background:  #F0F0F0,
+        color:  #222226
+    ));
+
+    @include dark-theme((
+        background: #3D3D42,
+        color: #FFFFFF
+    ));
+
+}
+
+.vs__actions{
+    @include light-theme((
+        background:  #F0F0F0,
+        color:  #222226
+    ));
+
+    @include dark-theme((
+        background: #3D3D42,
+        color: #FFFFFF
+    ));
+}
+
+
+.vs__dropdown-toggle{
+    @include light-theme((
+        background:  #F0F0F0,
+        color:  #222226
+    ));
+
+    @include dark-theme((
+        background: #3D3D42,
+        color: #FFFFFF
+    ));
+}
+
+.vs__dropdown-option--disabled{
+    @include light-theme((
+        background:  #FFFFFF,
+        color:  #222226
+    ));
+
+    @include dark-theme((
+        background: transparent,
+        color: #FFFFFF
+    ));
+}
+
+
 .select-location-control {
     margin-top: 1em;
     font-size: 18px;
@@ -166,7 +362,7 @@ export default {
         ));
 
         @include dark-theme((
-            background: #222226,
+            background: transparent,
             color: $white
         ));
     }
@@ -291,5 +487,4 @@ export default {
         ));
     }
 
-
 </style>
\ No newline at end of file
diff --git a/src/themes/ivpn-v3/assets/js/store/module_auth.js b/src/themes/ivpn-v3/assets/js/store/module_auth.js
index d77e2d09d..59a94d376 100644
--- a/src/themes/ivpn-v3/assets/js/store/module_auth.js
+++ b/src/themes/ivpn-v3/assets/js/store/module_auth.js
@@ -26,7 +26,7 @@ export default {
 
     mutations: {
 
-        setState(state, { isAuthenticated, isLegacy }) {
+        setState(state, { isAuthenticated, isLegacy}) {
             state.isAuthenticated = isAuthenticated
             state.isLegacy = isLegacy
 
diff --git a/src/themes/ivpn-v3/assets/js/views/Account/Account.vue b/src/themes/ivpn-v3/assets/js/views/Account/Account.vue
index 109816f22..13d51520e 100644
--- a/src/themes/ivpn-v3/assets/js/views/Account/Account.vue
+++ b/src/themes/ivpn-v3/assets/js/views/Account/Account.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div>
+        <div v-if="!isLight">
             <flash-box />
             <div v-if="account.is_new">
                 <signup-section>
@@ -111,11 +111,27 @@ export default {
         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";
+        }
+    },
+
+
 };
 </script>
 
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 @@
 <template>
-    <div class="payment-page-header">
+    <div v-if="!isLight" class="payment-page-header">
         <div class="back-link">
             <router-link :to="{ name: 'account' }" v-if="account.is_new">
                 <span class="icon-back"></span>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";
+        }
+    },
 };
 </script>
 
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 @@
 <template>
-    <div class="invoice">
+    <div v-if="!isLight" class="invoice">
         <img width="120" src="/images/logo.svg" />
         <div class="error" style='margin:32px 0px;' v-if="error">{{ error.message }}</div>
         <div v-if="inProgress" style='margin:32px 0px;'>
@@ -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";
+        }
+    },
 };
 </script>
 
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 @@
 <template>
-    <div class='payment-page'>
+    <div v-if="!isLight" class='payment-page'>
         <div class="back-link">
             <router-link :to="{ name: 'account' }">
                 <span class="icon-back"></span>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";
+        }
+    },
 };
 </script>
 
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 @@
 <template>
-    <div>
+    <div v-if="!isLight">
         <div v-if="!account.is_active">
             <section>
                 <h3>Your account is expired</h3>
@@ -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";
+        }
+    },
 };
 </script>
 
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 @@
 <template>
-    <div>
+    <div v-if="!isLight">
         <div class="back-link">
             <router-link :to="{ name: 'account' }">
                 <span class="icon-back"></span>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";
+        }
+    },
+
+
+    
 };
 </script>
 
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 @@
             <p>Next steps:</p>
                 <ol>
                    <li>Save the QR code or config file now to avoid losing access.</li>
-                    <li> Download and open the WireGuard app.</li>
+                    <li> Download and open the <a href="https://www.wireguard.com/" target="_blank" rel="noreferrer">WireGuard</a> app.</li>
                     <li>Scan the QR code, or add the configuration provided.</li>
                 </ol>
             </div>
@@ -18,7 +18,13 @@
           
             <div v-if="qrCodes.length > 0" v-for="qr in qrCodes">
                 <p>Access to:</p>
+                <div v-if="this.multihop">
+                    <p><country-flag :country="qr.entryCountryCode" size='normal'/> {{ qr.entryCity }}</p>
+                    <p><country-flag :country="qr.countryCode" size='normal'/> {{ qr.city }}</p>
+                </div>
+                <div v-else>
                 <p><country-flag :country="qr.countryCode" size='normal'/> {{ qr.city }}</p>
+                </div>
                 <div class="code" v-html="qr.qrCode"></div>
             </div>
             <textarea disabled v-if="qrCodes.length == 1" v-model="wireguardConfig" cols="50" rows="50">
@@ -37,7 +43,7 @@
                 />Download configuration
             </button>
 
-            <h5 v-if="isLoaded">For further access beyond {{ $filters.formatActiveUntil(account.active_until) }} pay for a separate IVPN Light access, or generate an IVPN Standard or Pro account.</h5>
+            <h5 v-if="isLoaded">For further access beyond {{ $filters.formatActiveUntil(account.active_until) }} pay for a <a target="_blank" rel="noreferrer" href="https://www.ivpn.net/light">separate IVPN Light access</a>, or <a target="_blank" rel="noreferrer" href="https://www.ivpn.net/pricing">generate</a> an IVPN Standard or Pro account.</h5>
         </div>
     </div>
 </template>
@@ -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();
     }
 };
 </script>
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 @@
 <template>
-    <div>
+    <div v-if="!isLight">
         <div v-if="!account.is_active">
             <section>
                 <h3>Your account is expired</h3>
@@ -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 @@
 <template>
-    <div class="vpn-configuration">
+    <div v-if="!isLight" class="vpn-configuration">
         <div v-if="!account.is_active">
             <section>
                 <h3>Your account is expired</h3>
@@ -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: {}
 };
 </script>
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 @@
                      <div>
                         <div class="alert alert-light">
                            <h1>IVPN Light</h1>
-                           <h2>quick IVPN access - priced in sats - pay with Lightning</h2>
-                           <p class="mb-0">Choose up to 5 exit points, or one Multi-hop setup. Works with <a href="https://www.wireguard.com/" target="_blank" rel="noreferrer">Wireguard</a> app on mobile or desktop.</p>
+                           <h2>VPN access in 60 seconds</h2>
+                           <ol>
+                            <li>Generate or upload keys</li>
+                            <li>Select servers & duration</li>
+                            <li>Pay with Lightning</li>
+                           </ol>
+                           <h3>Up to 5 exit points or one Multi-hop setup. </h3>
+                           <h3>Works with <a href="https://www.wireguard.com/" target="_blank" rel="noreferrer">Wireguard</a> app on mobile or desktop.</h3>
                         </div>
                      </div> 
                      <div id="key-input">
@@ -26,8 +32,12 @@
                                  </div>
                                  <div class="accordion-collapse collapse" v-if="!keysHidden">
                                     <div class="card-body">
-                                       <div role="alert" v-if="!this.keysAdded" class="fade alert alert-light show">{{ showKeysTitle }}</div>
-                                       <div role="alert" v-else class="fade alert alert-light show">{{ usedCustomKeysText }}</div>
+                                        
+                                        <div role="alert" class="fade alert alert-light show">
+                                        Private keys are <a href='https://github.com/ivpn/ivpn.net/blob/41645f63cdd76eeb757db4f9325d91b8215072a6/src/themes/ivpn-v3/assets/js/wireguard.js#L175'>generated and processed</a> client side - IVPN does not gain access to them.<br><br>WireGuard key pair generated for your setup:<br><br>
+                                       </div>
+
+                                       <div role="alert" v-if="this.keysAdded" class="fade alert alert-light show">{{ usedCustomKeysText }}</div>
                                        
                                        <form>
                                           <label>Public Key</label><input class="form-control" type="text" v-model="publicKey" autofocus="">
@@ -40,6 +50,9 @@
                                  </div>
                                  <div class="accordion-collapse collapse" v-if="!useKeysHidden">
                                     <div class="card-body">
+                                          <div role="alert" class="fade alert alert-light show">
+                                              Private keys are <a href='https://github.com/ivpn/ivpn.net/blob/41645f63cdd76eeb757db4f9325d91b8215072a6/src/themes/ivpn-v3/assets/js/wireguard.js#L175'>generated and processed</a> client side - IVPN does not gain access to them.
+                                         </div>
                                           <form>
                                             <label for="public_key">Public Key:</label>
                                             <input  id="public_key" type="text" v-model="customPublicKey" autofocus="" required placeholder="Enter your 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 @@
                 <div v-if="multihop">
                     <h4>Select entry server location</h4>
 
-                    <SelectLocations 
+                    <SelectLocationsMulti
                        :options="filteredServers"
                        v-model="selectedEntryLocation"
                        placeholder="Select a location"
                        :clearable="true"
                        :searchable="true"
                        :filterable="true"
-                       :multiple= "false"
+                       multiple
                        >
-                    </SelectLocations>
+                    </SelectLocationsMulti>
                     <h4>Select exit server location</h4>
 
-                    <SelectLocations 
+                    <SelectLocationsMulti
                        :options="filteredServers"
                        v-model="selectedMultihopExitLocation"
                        placeholder="Select a location"
                        :clearable="true"
                        :searchable="true"
                        :filterable="true"
-                       :multiple= "false"
+                       multiple
                        >
-                    </SelectLocations>
+                    </SelectLocationsMulti>
 
                 </div>
                      </div>
@@ -138,6 +151,7 @@
                               <div class="bitcoin-lightning-icon" ></div> Purchase access
                           </button>
                           <h4>We host our own BTCPay Server to generate a Lightning invoice for payment.</h4>
+                          <h4>By making a payment you are agreeing to our <a href="/tos">Terms of Service</a>.</h4>
                      </div>
                   </div>
                </div>
@@ -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;
+}
+
+
 </style>