Merge pull request #2 from owncloud/feature/file-picker

owncloud · Aug 27, 2020 · ab37342 · ab37342
2 parents 1e6160f + 5b2e009
commit ab37342
Show file tree

Hide file tree

Showing 31 changed files with 11,623 additions and 1 deletion.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/prettier'],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,20 @@
-/hugo
+**/l10n/locale
+**/l10n/template.pot
+
+/hugo
+
+.idea
+
+package-lock.json
+
+node_modules
+dist
+
+*.log
+.DS_Store
+.envrc
+
+public/file-picker-config.json
+public/demo.html
+public/file-picker.js
+public/img
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,27 @@
+# ownCloud File picker
+Easily integrate ownCloud into your own web applications.
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Run your unit tests
+```
+yarn test:unit
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+}
diff --git a/changelog/unreleased/file-picker b/changelog/unreleased/file-picker
@@ -0,0 +1,6 @@
+Enhancement: Add basic implementation of file picker
+
+We've added a basic implementation of ownCloud file picker.
+File picker is a web component which can be integrated into existing products and is firing event providing array of selected resources
+
+https://github.com/owncloud/file-picker/pull/2
diff --git a/file-picker-config.example.json b/file-picker-config.example.json
@@ -0,0 +1,8 @@
+{
+  "server": "http://host.docker.internal:8080",
+  "auth" : {
+    "clientId": "EFB5Z5lBsFX4ejcRaCeSKAbn3171i09WpvSX5voC1iB2KwRzrrsZ3S3xnsPTWfrP",
+    "url": "http://host.docker.internal:8080/index.php/apps/oauth2/api/v1/token",
+    "authUrl": "http://host.docker.internal:8080/index.php/apps/oauth2/authorize"
+  }
+}
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest'
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "file-picker",
+  "version": "0.1.0",
+  "author": "ownclouders <[email protected]>",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target wc --name file-picker",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "filesize": "^6.1.0",
+    "lodash": "^4.17.19",
+    "moment": "^2.27.0",
+    "oidc-client": "^1.10.1",
+    "owncloud-design-system": "^1.9.0",
+    "owncloud-sdk": "^1.0.0-728",
+    "path": "^0.12.7",
+    "vue": "^2.6.11",
+    "vue-virtual-scroller": "^1.0.10"
+  },
+  "devDependencies": {
+    "@babel/polyfill": "^7.10.4",
+    "@vue/cli-plugin-babel": "^4.4.0",
+    "@vue/cli-plugin-eslint": "^4.4.0",
+    "@vue/cli-plugin-unit-jest": "^4.4.0",
+    "@vue/cli-service": "^4.4.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.0.3",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/public/oidc-callback.html b/public/oidc-callback.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Waiting...</title>
+</head>
+
+<body>
+  <script src="oidc-client.min.js"></script>
+  <script>
+
+    var mgr = new Oidc.UserManager({userStore: new Oidc.WebStorageStateStore(), loadUserInfo: true, filterProtocolClaims: true});
+
+    mgr.signinPopupCallback().then(function (user) {
+      console.log(user)
+      window.location.href = '../';
+    }).catch(function (err) {
+      console.log(err);
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/public/oidc-client.min.js b/public/oidc-client.min.js
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,128 @@
+<template>
+  <div id="oc-file-picker" class="uk-height-1-1">
+    <div
+      v-if="state === 'loading'"
+      class="uk-height-1-1 uk-width-1-1 uk-flex uk-flex-middle uk-flex-center oc-border"
+    >
+      <oc-spinner aria-label="Loading ownCloud file picker" />
+    </div>
+    <login v-if="state === 'unauthorized'" key="login-form" @login="authenticate" />
+    <file-picker
+      v-if="state === 'authorized'"
+      key="file-picker"
+      class="uk-height-1-1"
+      :variation="variation"
+      @selectResources="selectResources"
+    />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import sdk from 'owncloud-sdk'
+import DesignSystem from 'owncloud-design-system'
+import initVueAuthenticate from './services/auth'
+import FilePicker from './components/FilePicker.vue'
+import Login from './components/Login.vue'
+
+// Init sdk and design system
+Vue.prototype.$client = new sdk()
+Vue.use(DesignSystem)
+
+export default {
+  name: 'App',
+
+  components: {
+    FilePicker,
+    Login
+  },
+
+  props: {
+    variation: {
+      type: String,
+      required: true,
+      validator: value => value === 'resource' || value === 'location'
+    },
+    configLocation: {
+      type: String,
+      required: false,
+      default: () => window.location.origin + '/file-picker-config.json'
+    }
+  },
+
+  data: () => ({
+    authInstance: null,
+    bearerToken: '',
+    state: 'loading',
+    config: null
+  }),
+
+  created() {
+    this.initAuthentication()
+  },
+
+  beforeDestroy() {
+    this.authInstance.mgr.events.removeUserLoaded()
+  },
+
+  methods: {
+    initApp() {
+      this.bearerToken = this.authInstance.getToken()
+
+      // Init owncloud-sdk
+      this.$client.init({
+        baseUrl: this.config.server,
+        auth: {
+          bearer: this.bearerToken
+        },
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      })
+
+      this.state = 'authorized'
+
+      return
+    },
+
+    async initAuthentication() {
+      let config = await fetch(this.configLocation)
+
+      this.config = await config.json()
+      this.authInstance = initVueAuthenticate(this.config)
+      this.checkUserAuthentication()
+    },
+
+    checkUserAuthentication() {
+      if (this.authInstance.isAuthenticated()) {
+        return this.initApp()
+      }
+
+      this.state = 'unauthorized'
+
+      // If the user is not authenticated, we add event listener when he logs in to automatically init the application afterwards
+      this.authInstance.mgr.events.addUserLoaded(() => {
+        this.initApp()
+      })
+    },
+
+    authenticate() {
+      this.authInstance.authenticate()
+    },
+
+    selectResources(resources) {
+      this.$emit('selectResources', resources)
+    }
+  }
+}
+</script>
+
+<style>
+/* Import oC CI font and design system styles */
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
+@import '../node_modules/owncloud-design-system/dist/system/system.css';
+
+* {
+  font-family: 'Source Sans Pro', sans-serif;
+}
+</style>
diff --git a/src/assets/img/background.jpg b/src/assets/img/background.jpg