Login button, dont show logout button if logged in, add login/register buttons to login/register

src/components/LoginPage.vue

@@ -31,6 +31,10 @@
                 </a>
             </div>
         </form>
+
+        <router-link to="/register" style="background: none !important;">
+            Register
+        </router-link>
     </div>
 </template>
 

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) {

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) {

src/components/RegisterPage.vue

@@ -31,6 +31,10 @@
                 >
             </div>
         </form>
+
+        <router-link to="/login" style="background: none !important;">
+            Login
+        </router-link>
     </div>
 </template>
 

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",