From d075d6837a7a874b8e6008b4263993a573f3b60f Mon Sep 17 00:00:00 2001
From: Mayank <mayankchhabra9@gmail.com>
Date: Mon, 27 Apr 2020 10:02:05 +0530
Subject: [PATCH] tor

---
 src/components/ToggleSwitch.vue |  2 +-
 src/views/Settings.vue          | 47 ++++++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/ToggleSwitch.vue b/src/components/ToggleSwitch.vue
index 3840691..07b51f1 100644
--- a/src/components/ToggleSwitch.vue
+++ b/src/components/ToggleSwitch.vue
@@ -19,7 +19,7 @@ export default {
   data() {
     return {
       state: {
-        isOn: false
+        isOn: true
       }
     };
   },
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 9fc8816..8424b1a 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,20 +2,61 @@
   <div class="p-sm-2">
     <div class="my-3 pb-2">
       <h1>settings</h1>
-      <p class="text-muted">⚙️ Coming soon</p>
+      <p class="text-muted">Your umbrel, your rules.</p>
     </div>
-    <b-row></b-row>
+    <b-row>
+      <b-col col cols="12" md="6" xl="4">
+        <card-widget
+          header="Tor"
+          :status="{text: 'Running', variant: 'success', blink: false}"
+          title="100%"
+          sub-title="Traffic relayed through Tor"
+          icon="icon-app-tor.svg"
+        >
+          <div class="pt-2">
+            <div class="d-flex w-100 justify-content-between px-3 px-lg-4 mb-4">
+              <div>
+                <span class="d-block">Bitcoin</span>
+                <small class="d-block" style="opacity: 0.4">Run Bitcoin Core on Tor</small>
+              </div>
+              <toggle-switch class="align-self-center"></toggle-switch>
+            </div>
+            <div class="d-flex w-100 justify-content-between px-3 px-lg-4 mb-4">
+              <div>
+                <span class="d-block">Lightning Network</span>
+                <small class="d-block" style="opacity: 0.4">Run Lightning on Tor</small>
+              </div>
+              <toggle-switch class="align-self-center"></toggle-switch>
+            </div>
+            <div class="d-flex w-100 justify-content-between px-3 px-lg-4 mb-4">
+              <div>
+                <span class="d-block">Remote Access</span>
+                <small class="d-block" style="opacity: 0.4">Remotely access your Umbrel on Tor</small>
+              </div>
+              <toggle-switch class="align-self-center"></toggle-switch>
+            </div>
+            <div class="px-3 px-lg-4 py-2"></div>
+          </div>
+        </card-widget>
+      </b-col>
+    </b-row>
   </div>
 </template>
 
 <script>
+import CardWidget from "@/components/CardWidget";
+import ToggleSwitch from "@/components/ToggleSwitch";
+
 export default {
   data() {
     return {};
   },
   computed: {},
   methods: {},
-  components: {}
+  components: {
+    CardWidget,
+    ToggleSwitch
+  }
 };
 </script>