nx: add logout button

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/Settings.vue

@@ -61,6 +61,13 @@
         </NcCheckboxRadioSwitch>
       </NcAppSettingsSection>
 
+      <NcAppSettingsSection id="account-settings" :title="t('memories', 'Account')" v-if="hasLogout">
+        Logged in as {{ user }}
+        <NcButton @click="logout" id="sign-out">
+          {{ t('memories', 'Sign out') }}
+        </NcButton>
+      </NcAppSettingsSection>
+
       <NcAppSettingsSection id="folders-settings" :title="t('memories', 'Folders')">
         <label for="folders-path">{{ t('memories', 'Folders Path') }}</label>
         <input id="folders-path" @click="chooseFoldersPath" v-model="config.folders_path" type="text" />
@@ -107,8 +114,12 @@ input[type='text'] {
 import { defineComponent } from 'vue';
 
 import { getFilePickerBuilder } from '@nextcloud/dialogs';
+import { getCurrentUser } from '@nextcloud/auth';
 
 import UserConfig from '../mixins/UserConfig';
+import * as nativex from '../native';
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton';
 const NcAppSettingsDialog = () => import('@nextcloud/vue/dist/Components/NcAppSettingsDialog');
 const NcAppSettingsSection = () => import('@nextcloud/vue/dist/Components/NcAppSettingsSection');
 const NcCheckboxRadioSwitch = () => import('@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch');
@@ -119,6 +130,7 @@ export default defineComponent({
   name: 'Settings',
 
   components: {
+    NcButton,
     NcAppSettingsDialog,
     NcAppSettingsSection,
     NcCheckboxRadioSwitch,
@@ -138,6 +150,14 @@ export default defineComponent({
     pathSelTitle(): string {
       return this.t('memories', 'Choose Timeline Paths');
     },
+
+    hasLogout(): boolean {
+      return nativex.has();
+    },
+
+    user(): string {
+      return getCurrentUser()?.uid.toString() ?? '';
+    },
   },
 
   methods: {
@@ -145,6 +165,10 @@ export default defineComponent({
       this.$emit('update:open', false);
     },
 
+    logout() {
+      nativex.logout();
+    },
+
     async chooseFolder(title: string, initial: string) {
       const picker = getFilePickerBuilder(title)
         .setMultiSelect(false)
@@ -214,3 +238,13 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.app-settings-section {
+  margin-bottom: 20px !important;
+}
+
+#sign-out {
+  margin-top: 10px;
+}
+</style>

src/native.ts

@@ -1,6 +1,7 @@
 import axios from '@nextcloud/axios';
 import type { IDay, IPhoto } from './types';
 import { constants } from './services/Utils';
+import { generateUrl } from '@nextcloud/router';
 
 const BASE_URL = 'http://127.0.0.1';
 
@@ -32,6 +33,8 @@ export type NativeX = {
   playVideoLocal: (fileid: string) => void;
   playVideoHls: (fileid: string, url: string) => void;
   destroyVideo: (fileid: string) => void;
+
+  logout: () => void;
 };
 
 /** The native interface is a global object that is injected by the native app. */
@@ -198,6 +201,15 @@ export async function deleteLocalPhotos(photos: IPhoto[]): Promise<IPhoto[]> {
   return localPhotos;
 }
 
+/**
+ * Log out from Nextcloud and pass ahead.
+ */
+export async function logout() {
+  await axios.get(generateUrl('logout'));
+  if (!has()) window.location.reload();
+  nativex?.logout();
+}
+
 /**
  * Add current origin to URL if doesn't have any protocol or origin.
  */