diff options
Diffstat (limited to 'apps/settings/src/components/AuthToken.vue')
| -rw-r--r-- | apps/settings/src/components/AuthToken.vue | 306 |
1 files changed, 306 insertions, 0 deletions
diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/components/AuthToken.vue new file mode 100644 index 00000000000..fb5a331b72e --- /dev/null +++ b/apps/settings/src/components/AuthToken.vue @@ -0,0 +1,306 @@ +<!-- + - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at> + - + - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + --> + +<template> + <tr :data-id="token.id" + :class="wiping"> + <td class="client"> + <div :class="iconName.icon"></div> + </td> + <td class="token-name"> + <input v-if="token.canRename && renaming" + type="text" + ref="input" + v-model="newName" + @keyup.enter="rename" + @blur="cancelRename" + @keyup.esc="cancelRename"> + <span v-else>{{iconName.name}}</span> + <span v-if="wiping" + class="wiping-warning">({{ t('settings', 'Marked for remote wipe') }})</span> + </td> + <td> + <span class="last-activity" v-tooltip="lastActivity">{{lastActivityRelative}}</span> + </td> + <td class="more"> + <Actions v-if="!token.current" + :actions="actions" + :open.sync="actionOpen" + v-tooltip.auto="{ + content: t('settings', 'Device settings'), + container: 'body' + }"> + <ActionCheckbox v-if="token.type === 1" + :checked="token.scope.filesystem" + @change.stop.prevent="$emit('toggleScope', token, 'filesystem', !token.scope.filesystem)"> + <!-- TODO: add text/longtext with some description --> + {{ t('settings', 'Allow filesystem access') }} + </ActionCheckbox> + <ActionButton v-if="token.canRename" + icon="icon-rename" + @click.stop.prevent="startRename"> + <!-- TODO: add text/longtext with some description --> + {{ t('settings', 'Rename') }} + </ActionButton> + + <!-- revoke & wipe --> + <template v-if="token.canDelete"> + <template v-if="token.type !== 2"> + <ActionButton icon="icon-delete" + @click.stop.prevent="revoke"> + <!-- TODO: add text/longtext with some description --> + {{ t('settings', 'Revoke') }} + </ActionButton> + <ActionButton icon="icon-delete" + @click.stop.prevent="wipe"> + {{ t('settings', 'Wipe device') }} + </ActionButton> + </template> + <ActionButton v-else-if="token.type === 2" + icon="icon-delete" + :title="t('settings', 'Revoke')" + @click.stop.prevent="revoke"> + {{ t('settings', 'Revoking this token might prevent the wiping of your device if it hasn\'t started the wipe yet.') }} + </ActionButton> + </template> + </Actions> + </td> + </tr> +</template> + +<script> +import { + Actions, + ActionButton, + ActionCheckbox +} from 'nextcloud-vue'; + +const userAgentMap = { + ie: /(?:MSIE|Trident|Trident\/7.0; rv)[ :](\d+)/, + // Microsoft Edge User Agent from https://msdn.microsoft.com/en-us/library/hh869301(v=vs.85).aspx + edge: /^Mozilla\/5\.0 \([^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\) Chrome\/[0-9.]+ (?:Mobile Safari|Safari)\/[0-9.]+ Edge\/[0-9.]+$/, + // Firefox User Agent from https://developer.mozilla.org/en-US/docs/Web/HTTP/Gecko_user_agent_string_reference + firefox: /^Mozilla\/5\.0 \([^)]*(Windows|OS X|Linux)[^)]+\) Gecko\/[0-9.]+ Firefox\/(\d+)(?:\.\d)?$/, + // Chrome User Agent from https://developer.chrome.com/multidevice/user-agent + chrome: /^Mozilla\/5\.0 \([^)]*(Windows|OS X|Linux)[^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\) Chrome\/(\d+)[0-9.]+ (?:Mobile Safari|Safari)\/[0-9.]+$/, + // Safari User Agent from http://www.useragentstring.com/pages/Safari/ + safari: /^Mozilla\/5\.0 \([^)]*(Windows|OS X)[^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\)(?: Version\/([0-9]+)[0-9.]+)? Safari\/[0-9.A-Z]+$/, + // Android Chrome user agent: https://developers.google.com/chrome/mobile/docs/user-agent + androidChrome: /Android.*(?:; (.*) Build\/).*Chrome\/(\d+)[0-9.]+/, + iphone: / *CPU +iPhone +OS +([0-9]+)_(?:[0-9_])+ +like +Mac +OS +X */, + ipad: /\(iPad\; *CPU +OS +([0-9]+)_(?:[0-9_])+ +like +Mac +OS +X */, + iosClient: /^Mozilla\/5\.0 \(iOS\) (ownCloud|Nextcloud)\-iOS.*$/, + androidClient: /^Mozilla\/5\.0 \(Android\) ownCloud\-android.*$/, + iosTalkClient: /^Mozilla\/5\.0 \(iOS\) Nextcloud\-Talk.*$/, + androidTalkClient: /^Mozilla\/5\.0 \(Android\) Nextcloud\-Talk.*$/, + // DAVdroid/1.2 (2016/07/03; dav4android; okhttp3) Android/6.0.1 + davDroid: /DAV(droid|x5)\/([0-9.]+)/, + // Mozilla/5.0 (U; Linux; Maemo; Jolla; Sailfish; like Android 4.3) AppleWebKit/538.1 (KHTML, like Gecko) WebPirate/2.0 like Mobile Safari/538.1 (compatible) + webPirate: /(Sailfish).*WebPirate\/(\d+)/, + // Mozilla/5.0 (Maemo; Linux; U; Jolla; Sailfish; Mobile; rv:31.0) Gecko/31.0 Firefox/31.0 SailfishBrowser/1.0 + sailfishBrowser: /(Sailfish).*SailfishBrowser\/(\d+)/ +}; +const nameMap = { + ie: t('setting', 'Internet Explorer'), + edge: t('setting', 'Edge'), + firefox: t('setting', 'Firefox'), + chrome: t('setting', 'Google Chrome'), + safari: t('setting', 'Safari'), + androidChrome: t('setting', 'Google Chrome for Android'), + iphone: t('setting', 'iPhone'), + ipad: t('setting', 'iPad'), + iosClient: t('setting', 'Nextcloud iOS app'), + androidClient: t('setting', 'Nextcloud Android app'), + iosTalkClient: t('setting', 'Nextcloud Talk for iOS'), + androidTalkClient: t('setting', 'Nextcloud Talk for Android'), + davDroid: 'DAVdroid', + webPirate: 'WebPirate', + sailfishBrowser: 'SailfishBrowser' +}; +const iconMap = { + ie: 'icon-desktop', + edge: 'icon-desktop', + firefox: 'icon-desktop', + chrome: 'icon-desktop', + safari: 'icon-desktop', + androidChrome: 'icon-phone', + iphone: 'icon-phone', + ipad: 'icon-tablet', + iosClient: 'icon-phone', + androidClient: 'icon-phone', + iosTalkClient: 'icon-phone', + androidTalkClient: 'icon-phone', + davDroid: 'icon-phone', + webPirate: 'icon-link', + sailfishBrowser: 'icon-link' +}; + +export default { + name: "AuthToken", + components: { + Actions, + ActionButton, + ActionCheckbox + }, + props: { + token: { + type: Object, + required: true, + } + }, + computed: { + lastActivityRelative () { + return OC.Util.relativeModifiedDate(this.token.lastActivity * 1000); + }, + lastActivity () { + return OC.Util.formatDate(this.token.lastActivity * 1000, 'LLL'); + }, + iconName () { + // pretty format sync client user agent + let matches = this.token.name.match(/Mozilla\/5\.0 \((\w+)\) (?:mirall|csyncoC)\/(\d+\.\d+\.\d+)/); + + let icon = ''; + if (matches) { + this.token.name = t('settings', 'Sync client - {os}', { + os: matches[1], + version: matches[2] + }); + icon = 'icon-desktop'; + } + + // preserve title for cases where we format it further + const title = this.token.name; + let name = this.token.name; + for (let client in userAgentMap) { + if (matches = title.match(userAgentMap[client])) { + if (matches[2] && matches[1]) { // version number and os + name = nameMap[client] + ' ' + matches[2] + ' - ' + matches[1]; + } else if (matches[1]) { // only version number + name = nameMap[client] + ' ' + matches[1]; + } else { + name = nameMap[client]; + } + + icon = iconMap[client]; + } + } + if (this.token.current) { + name = t('settings', 'This session'); + } + + return { + icon, + name, + }; + }, + wiping() { + return this.token.type === 2; + } + }, + data () { + return { + showMore: this.token.canScope || this.token.canDelete, + renaming: false, + newName: '', + actionOpen: false, + }; + }, + methods: { + startRename() { + // Close action (popover menu) + this.actionOpen = false; + + this.newName = this.token.name; + this.renaming = true; + this.$nextTick(() => { + this.$refs.input.select(); + }); + }, + cancelRename() { + this.renaming = false; + }, + revoke() { + this.actionOpen = false; + this.$emit('delete', this.token) + }, + rename() { + this.renaming = false; + this.$emit('rename', this.token, this.newName); + }, + wipe() { + this.actionOpen = false; + this.$emit('wipe', this.token); + } + } +} +</script> + +<style lang="scss" scoped> + .wiping { + background-color: var(--color-background-darker); + } + + td { + border-top: 1px solid var(--color-border); + max-width: 200px; + white-space: normal; + vertical-align: middle; + position: relative; + + &%icon { + overflow: visible; + position: relative; + width: 44px; + height: 44px; + } + + &.token-name { + padding: 10px 6px; + + &.token-rename { + padding: 0; + } + + input { + width: 100%; + margin: 0; + } + } + &.token-name .wiping-warning { + color: var(--color-text-lighter); + } + + &.more { + @extend %icon; + padding: 0 10px; + } + + &.client { + @extend %icon; + + div { + opacity: 0.57; + width: 44px; + height: 44px; + } + } + } +</style> |