3 <title> Surfer
</title>
5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <link rel=
"icon" type=
"image/png" href=
"/_admin/img/logo.png">
9 <link rel=
"stylesheet" href=
"/_admin/css/theme-chalk_2.11.1.css">
10 <link rel=
"stylesheet" href=
"/_admin/css/style.css">
12 <script src=
"/_admin/js/jquery-1.12.1.min.js"></script>
13 <script src=
"/_admin/js/vue.min.js"></script>
14 <script src=
"/_admin/js/element-ui_2.11.1.min.js"></script>
15 <script src=
"/_admin/js/element-ui_en_2.11.1.min.js"></script>
16 <script src=
"/_admin/js/filesize.min.js"></script>
17 <script src=
"/_admin/js/superagent.js"></script>
22 <div id=
"app" @
drop=
"drop" @
dragover=
"dragOver">
25 <input type=
"file" ref=
"upload" style=
"display: none" multiple
/>
26 <input type=
"file" ref=
"uploadFolder" style=
"display: none" multiple webkitdirectory directory
/>
28 <el-dialog title=
"Login" :visible.
sync=
"ready && !session.valid" width=
"30%" :
close-on-press-escape=
"false" :
show-close=
"false">
29 <el-form :
model=
"loginData" label-position=
"top" @submit.native.prevent
>
30 <el-form-item label=
"Username"><el-input v-model=
"loginData.username" id=
"loginUsernameInput" required autofocus :
disabled=
"loginData.busy"></el-input></el-form-item>
31 <el-form-item label=
"Password"><el-input v-model=
"loginData.password" id=
"loginPasswordInput" type=
"password" required :
disabled=
"loginData.busy"></el-input></el-form-item>
32 <input type=
"submit" @
click=
"onLogin" v-show=
"false"/>
34 <span slot=
"footer" class=
"dialog-footer">
35 <el-button type=
"primary" @
click=
"onLogin" id=
"loginSubmitButton"><i class=
"el-icon-loading" v-show=
"loginData.busy"></i><span v-show=
"!loginData.busy">Login
</span></el-button>
39 <el-dialog title=
"Access Tokens" :visible.
sync=
"accessTokensDialogVisible" width=
"40%">
40 Access tokens are useful to programmatically deploy assets for example within a CI/CD pipeline.
41 See the
<a href=
"https://cloudron.io/documentation/apps/surfer/" target=
"_blank">docs
</a> for more information on how to use this token.
44 <el-alert title=
"Tokens are shared between all users." type=
"warning" show-icon :
closable=
"false"></el-alert>
47 <div v-for=
"accessToken in accessTokens">
48 <el-input suffix-icon=
"el-icon-copy-document" v-model=
"accessToken" class=
"access-token-input" @
focus=
"onCopyAccessToken" size=
"small"></el-input>
49 <el-button icon=
"el-icon-delete" type=
"danger" size=
"small" @
click=
"onDeleteAccessToken(accessToken)"></el-button>
53 <el-button @
click=
"onCreateAccessToken()" size=
"small" type=
"primary">Create Access Token
</el-button>
57 <el-row type=
"flex" justify=
"space-between">
58 <div v-show=
"session.valid">
59 <el-button type=
"primary" size=
"small" icon=
"el-icon-arrow-left" :
disabled=
"!pathParts.slice(-1).length" @
click=
"onUp"></el-button>
61 <div style=
"flex-grow: 2; padding: 0 7px;" v-show=
"session.valid">
62 <el-breadcrumb separator-class=
"el-icon-arrow-right">
63 <el-breadcrumb-item><a href=
"#/">Path /
</a></el-breadcrumb-item>
64 <el-breadcrumb-item v-for=
"part in pathParts.slice(0, -1)"><a :
href=
"part.link">{{ part.name }}
</a></el-breadcrumb-item>
65 <el-breadcrumb-item v-show=
"pathParts.slice(-1).length">{{ pathParts.slice(-
1).length ? pathParts.slice(-
1)[
0].name : '' }}
</el-breadcrumb-item>
68 <div align=
"right" v-show=
"session.valid">
70 <a v-bind:
href=
"'/raw' + path">
71 <el-button type=
"primary" icon=
"el-icon-download" size=
"small">Raw (curl/wget friendly)
</el-button>
73 <a v-bind:
href=
"'/tar' + path">
74 <el-button type=
"primary" icon=
"el-icon-download" size=
"small">Download Tar.gz
</el-button>
76 <a v-bind:
href=
"'/zip' + path">
77 <el-button type=
"primary" icon=
"el-icon-download" size=
"small">Download Zip
</el-button>
81 <el-button type=
"primary" icon=
"el-icon-upload2" size=
"small" @
click=
"onUpload">Upload File
</el-button>
82 <el-button type=
"primary" icon=
"el-icon-upload" size=
"small" @
click=
"onUploadFolder">Upload Folder
</el-button>
83 <el-button type=
"primary" icon=
"el-icon-plus" size=
"small" @
click=
"onNewFolder">New Folder
</el-button>
85 <el-dropdown @
command=
"onOptionsMenu" :
hide-on-click=
"false" trigger=
"click">
86 <el-button size=
"small" icon=
"el-icon-more" id=
"burgerMenuButton"></el-button>
87 <el-dropdown-menu slot=
"dropdown">
88 <el-dropdown-item disabled
>Public Folder Listing
</el-dropdown-item>
89 <el-dropdown-item command=
"folderListing">
90 <el-switch v-model=
"folderListingEnabled" active-text=
"Enabled" inactive-text=
"Disabled"></el-switch>
92 <el-dropdown-item disabled divided
>WebDAV Endpoint
</el-dropdown-item>
93 <el-dropdown-item><a href=
"/_webdav/" target=
"_blank">{{ origin }}/_webdav/
</a></el-dropdown-item>
94 <el-dropdown-item command=
"apiAccess" divided
><i class=
"el-icon-connection"></i> Access Tokens
</el-dropdown-item>
95 <el-dropdown-item command=
"about" divided
><i class=
"el-icon-info"></i> About
</el-dropdown-item>
96 <el-dropdown-item command=
"logout" id=
"logoutButton"><i class=
"el-icon-circle-close"></i> Logout
</el-dropdown-item>
105 <center><h1><i class=
"el-icon-loading"></i></h1></center>
108 <div v-show=
"!busy && session.valid" v-cloak
>
110 <el-table :
data=
"entries" style=
"max-width: 1280px; width: 100%" height=
"100%" empty-text=
"Folder is emtpy" :
default-sort=
"{ prop: 'filePath', order: 'descending' }" @
row-click=
"open">
111 <el-table-column prop=
"previewUrl" label=
"Type" width=
"80px" sortable
>
112 <template slot-scope=
"scope">
113 <el-image v-bind:
src=
"scope.row.previewUrl" class=
"list-icon" style=
"width: 32px; height: 32px" fit=
"cover"></el-image>
116 <el-table-column prop=
"filePath" label=
"Name" sortable
>
117 <template slot-scope=
"scope">
118 <el-input size=
"small" v-on:keyup.native.
enter=
"onRenameSubmit(scope.row)" v-on:keyup.native.
esc=
"onRenameEnd(scope.row)" @
blur=
"onRenameEnd(scope.row)" v-model=
"scope.row.filePathNew" :
id=
"'filePathRenameInputId-' + scope.$index" v-show=
"scope.row.rename"></el-input>
119 <span v-show=
"!scope.row.rename">{{ scope.row.filePath }}
</span>
120 <el-button size=
"small" icon=
"el-icon-edit" type=
"text" plain circle
class=
"rename-action" v-show=
"!scope.row.rename" @click.
stop=
"onRename(scope.row, scope)"></el-button>
123 <el-table-column prop=
"size" label=
"Size" width=
"150px" sortable :
formatter=
"prettyFileSize"></el-table-column>
124 <el-table-column prop=
"mtime" label=
"Modified" width=
"150px" sortable :
formatter=
"prettyDate"></el-table-column>
125 <el-table-column label=
"Actions" align=
"right" width=
"200px" class-name=
"list-actions">
126 <template slot-scope=
"scope">
127 <el-button size=
"small" icon=
"el-icon-download" type=
"text" plain circle
v-show=
"!scope.row.rename && scope.row.isFile" @click.
stop=
"onDownload(scope.row)"></el-button>
128 <el-button size=
"small" icon=
"el-icon-delete" type=
"text" plain circle
v-show=
"!scope.row.rename" @click.
stop=
"onDelete(scope.row)"></el-button>
129 <a :
href=
"sanitize(path + '/' + scope.row.filePath)" target=
"_blank">
130 <el-button size=
"small" icon=
"el-icon-link" style=
"margin: 10px;">Link
</el-button>
138 <el-drawer :
title=
"activeEntry.filePath":
with-header=
"false" :visible.
sync=
"previewDrawerVisible" direction=
"rtl" size=
"50%">
139 <div style=
"display: flex; flex-direction: column; height: 100%;">
140 <iframe :
src=
"activeEntry.fullPath" style=
"width: 100%; height: 100%; border: none; margin: 10px;"></iframe>
142 <el-button size=
"small" icon=
"el-icon-download" style=
"margin: 10px;" @click.
stop=
"onDownload(activeEntry)">Download
</el-button>
143 <a :
href=
"activeEntry.fullPath" target=
"_blank">
144 <el-button size=
"small" icon=
"el-icon-link" style=
"margin: 10px;">Open
</el-button>
151 <el-footer v-show=
"uploadStatus.busy">
152 <el-row v-if=
"uploadStatus.uploadListCount">
153 <center><i class=
"el-icon-loading"></i> Fetching file information for upload
<el-badge class=
"mark" :
value=
"uploadStatus.uploadListCount"/></center>
157 Uploading {{ uploadStatus.count }} files ({{ Math.round(uploadStatus.done/
1000/
1000) }}MB / {{ Math.round(uploadStatus.size/
1000/
1000) }}MB)
160 <el-progress :
text-inside=
"true" :
stroke-width=
"18" :
percentage=
"uploadStatus.percentDone"></el-progress>
168 <script src=
"/_admin/js/app.js"></script>