From ab4fa6ee8d49b3b73925524c9fe72342d0b435e8 Mon Sep 17 00:00:00 2001
From: Karlis Cudars <karlis.cudars1996@gmail.com>
Date: Sun, 24 Oct 2021 01:42:15 +0300
Subject: [PATCH] Login button, dont show logout button if logged in, add
 login/register buttons to login/register

---
 src/components/LoginPage.vue    |  4 ++++
 src/components/MenuDesktop.vue  | 15 +++++++++++++++
 src/components/MenuMobile.vue   | 25 ++++++++++++++++++++++---
 src/components/RegisterPage.vue |  4 ++++
 src/locales/en.json             |  1 +
 5 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 31afb458..b0a5ce7f 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -31,6 +31,10 @@
                 </a>
             </div>
         </form>
+
+        <router-link to="/register" style="background: none !important;">
+            Register
+        </router-link>
     </div>
 </template>
 
diff --git a/src/components/MenuDesktop.vue b/src/components/MenuDesktop.vue
index a9ee7a87..f4da70d0 100644
--- a/src/components/MenuDesktop.vue
+++ b/src/components/MenuDesktop.vue
@@ -85,6 +85,7 @@
         </router-link>
 
         <button
+            v-if="authenticated"
             class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
             :style="{ backgroundColor: backgroundColor }"
             style="border-radius: 9999px; border: none; margin-top: 20px;"
@@ -93,6 +94,17 @@
             <span v-if="!hideText" v-t="'actions.logout'" />
             <font-awesome-icon icon="sign-out-alt" />
         </button>
+
+        <button
+            v-if="!authenticated"
+            class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
+            :style="{ backgroundColor: backgroundColor }"
+            style="border-radius: 9999px; border: none; margin-top: 20px;"
+            @click="openLogin()"
+        >
+            <span v-if="!hideText" v-t="'actions.login_or_register'" />
+            <font-awesome-icon icon="sign-out-alt" />
+        </button>
     </div>
 </template>
 
@@ -135,6 +147,9 @@ export default {
             this.removePreference("authToken" + this.hashCode(this.apiUrl()));
             window.location = "/"; // done to bypass cache
         },
+        openLogin() {
+            this.$router.push("/login");
+        },
     },
     computed: {
         enableAnimations(_this) {
diff --git a/src/components/MenuMobile.vue b/src/components/MenuMobile.vue
index 04d9f352..85865ba5 100644
--- a/src/components/MenuMobile.vue
+++ b/src/components/MenuMobile.vue
@@ -21,9 +21,13 @@
                 <font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
             </div>
             <div class="uk-flex uk-flex-middle" style="gap: 12px;" v-if="!hideText">
-                <img src="/img/pipedPlay.svg" style="height: 26px;" />
+                <router-link to="/" style="background: none !important;">
+                    <img src="/img/pipedPlay.svg" style="height: 26px;" />
+                </router-link>
 
-                <img src="/img/piped.svg" style="height: 22px;" />
+                <router-link to="/" style="background: none !important;">
+                    <img src="/img/piped.svg" style="height: 22px;" />
+                </router-link>
             </div>
         </div>
 
@@ -61,12 +65,24 @@
         </router-link>
 
         <button
+            v-if="authenticated"
             class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
             :style="{ backgroundColor: backgroundColor }"
             style="border-radius: 9999px; border: none; margin-top: 20px;"
             @click="logout()"
         >
-            <span v-t="'actions.logout'" />
+            <span v-if="!hideText" v-t="'actions.logout'" />
+            <font-awesome-icon icon="sign-out-alt" />
+        </button>
+
+        <button
+            v-if="!authenticated"
+            class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
+            :style="{ backgroundColor: backgroundColor }"
+            style="border-radius: 9999px; border: none; margin-top: 20px;"
+            @click="openLogin()"
+        >
+            <span v-if="!hideText" v-t="'actions.login_or_register'" />
             <font-awesome-icon icon="sign-out-alt" />
         </button>
     </div>
@@ -85,6 +101,9 @@ export default {
             this.removePreference("authToken" + this.hashCode(this.apiUrl()));
             window.location = "/"; // done to bypass cache
         },
+        openLogin() {
+            window.location = "/login"; // done to bypass cache
+        },
     },
     computed: {
         enableAnimations(_this) {
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index d797358d..100e2c1d 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -31,6 +31,10 @@
                 >
             </div>
         </form>
+
+        <router-link to="/login" style="background: none !important;">
+            Login
+        </router-link>
     </div>
 </template>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index aef73f40..a09d9458 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -12,6 +12,7 @@
         "watch_on": "Watch on"
     },
     "actions": {
+        "login_or_register": "Log in or Register",
         "logout": "Log out",
         "subscribe": "Subscribe",
         "unsubscribe": "Unsubscribe",