diff --git a/browser/.babelrc b/browser/.babelrc
new file mode 100644
index 000000000..9cd3d553f
--- /dev/null
+++ b/browser/.babelrc
@@ -0,0 +1,8 @@
+{
+ "presets": [
+ "es2015",
+ "react"
+ ],
+
+ "plugins": ["transform-object-rest-spread"]
+}
diff --git a/browser/.editorconfig b/browser/.editorconfig
new file mode 100644
index 000000000..92926b6de
--- /dev/null
+++ b/browser/.editorconfig
@@ -0,0 +1,16 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.json]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/browser/.esformatter b/browser/.esformatter
new file mode 100644
index 000000000..1677d7c4b
--- /dev/null
+++ b/browser/.esformatter
@@ -0,0 +1,23 @@
+{
+ "plugins": [
+ "esformatter-jsx"
+ ],
+ // Copied from https://github.com/royriojas/esformatter-jsx
+ "jsx": {
+ "formatJSX": true, //Duh! that's the default
+ "attrsOnSameLineAsTag": false, // move each attribute to its own line
+ "maxAttrsOnTag": 3, // if lower or equal than 3 attributes, they will be kept on a single line
+ "firstAttributeOnSameLine": true, // keep the first attribute in the same line as the tag
+ "formatJSXExpressions": true, // default true, if false jsxExpressions won't be recursively formatted
+ "JSXExpressionsSingleLine": true, // default true, if false the JSXExpressions might span several lines
+ "alignWithFirstAttribute": false, // do not align attributes with the first tag
+ "spaceInJSXExpressionContainers": " ", // default to one space. Make it empty if you don't like spaces between JSXExpressionContainers
+ "removeSpaceBeforeClosingJSX": false, // default false. if true
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+ Minio Logo
+
+
+
+
+
diff --git a/browser/app/img/more-h-light.svg b/browser/app/img/more-h-light.svg
new file mode 100644
index 000000000..0c2e2da60
--- /dev/null
+++ b/browser/app/img/more-h-light.svg
@@ -0,0 +1,3 @@
+
+
+Minio Browser
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/browser/app/index.js b/browser/app/index.js
new file mode 100644
index 000000000..d750577bc
--- /dev/null
+++ b/browser/app/index.js
@@ -0,0 +1,116 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './less/main.less'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import thunkMiddleware from 'redux-thunk'
+import createStore from 'redux/lib/createStore'
+import applyMiddleware from 'redux/lib/applyMiddleware'
+
+import Route from 'react-router/lib/Route'
+import Router from 'react-router/lib/Router'
+import browserHistory from 'react-router/lib/browserHistory'
+import IndexRoute from 'react-router/lib/IndexRoute'
+
+import Provider from 'react-redux/lib/components/Provider'
+import connect from 'react-redux/lib/components/connect'
+
+import Moment from 'moment'
+
+import { minioBrowserPrefix } from './js/constants.js'
+import * as actions from './js/actions.js'
+import reducer from './js/reducers.js'
+
+import _Login from './js/components/Login.js'
+import _Browse from './js/components/Browse.js'
+import fontAwesome from 'font-awesome/css/font-awesome.css'
+
+import Web from './js/web'
+window.Web = Web
+
+import storage from 'local-storage-fallback'
+
+const store = applyMiddleware(thunkMiddleware)(createStore)(reducer)
+const Browse = connect(state => state)(_Browse)
+const Login = connect(state => state)(_Login)
+
+let web = new Web(`${window.location.protocol}//${window.location.host}${minioBrowserPrefix}/webrpc`, store.dispatch)
+
+window.web = web
+
+store.dispatch(actions.setWeb(web))
+
+function authNeeded(nextState, replace, cb) {
+ if (web.LoggedIn()) {
+ return cb()
+ }
+ if (location.pathname === minioBrowserPrefix || location.pathname === minioBrowserPrefix + '/') {
+ replace(`${minioBrowserPrefix}/login`)
+ }
+ return cb()
+}
+
+function authNotNeeded(nextState, replace) {
+ if (web.LoggedIn()) {
+ replace(`${minioBrowserPrefix}`)
+ }
+}
+
+const App = (props) => {
+ return
+ { props.children }
+
+}
+
+ReactDOM.render((
+
+
+
+
+
+
+
+
+ ), document.getElementById('root'))
+
+//Page loader
+let delay = [0, 400]
+let i = 0
+
+function handleLoader() {
+ if (i < 2) {
+ setTimeout(function() {
+ document.querySelector('.page-load').classList.add('pl-' + i)
+ i++
+ handleLoader()
+ }, delay[i])
+ }
+}
+handleLoader()
+
+if (storage.getItem('newlyUpdated')) {
+ store.dispatch(actions.showAlert({
+ type: 'success',
+ message: "Updated to the latest UI Version."
+ }))
+ storage.removeItem('newlyUpdated')
+}
diff --git a/browser/app/js/__tests__/jsonrpc-test.js b/browser/app/js/__tests__/jsonrpc-test.js
new file mode 100644
index 000000000..341d0c286
--- /dev/null
+++ b/browser/app/js/__tests__/jsonrpc-test.js
@@ -0,0 +1,43 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import expect from 'expect';
+import JSONrpc from '../jsonrpc';
+
+describe('jsonrpc', () => {
+ it('should fail with invalid endpoint', (done) => {
+ try {
+ let jsonRPC = new JSONrpc({
+ endpoint: 'htt://localhost:9000',
+ namespace: 'Test'
+ });
+ } catch (e) {
+ done();
+ }
+ });
+ it('should succeed with valid endpoint', () => {
+ let jsonRPC = new JSONrpc({
+ endpoint: 'http://localhost:9000/webrpc',
+ namespace: 'Test'
+ });
+ expect(jsonRPC.version).toEqual('2.0');
+ expect(jsonRPC.host).toEqual('localhost');
+ expect(jsonRPC.port).toEqual('9000');
+ expect(jsonRPC.path).toEqual('/webrpc');
+ expect(jsonRPC.scheme).toEqual('http');
+ });
+});
+
diff --git a/browser/app/js/actions.js b/browser/app/js/actions.js
new file mode 100644
index 000000000..598124b84
--- /dev/null
+++ b/browser/app/js/actions.js
@@ -0,0 +1,509 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import url from 'url'
+import Moment from 'moment'
+import web from './web'
+import * as utils from './utils'
+import storage from 'local-storage-fallback'
+
+export const SET_WEB = 'SET_WEB'
+export const SET_CURRENT_BUCKET = 'SET_CURRENT_BUCKET'
+export const SET_CURRENT_PATH = 'SET_CURRENT_PATH'
+export const SET_BUCKETS = 'SET_BUCKETS'
+export const ADD_BUCKET = 'ADD_BUCKET'
+export const ADD_OBJECT = 'ADD_OBJECT'
+export const SET_VISIBLE_BUCKETS = 'SET_VISIBLE_BUCKETS'
+export const SET_OBJECTS = 'SET_OBJECTS'
+export const SET_STORAGE_INFO = 'SET_STORAGE_INFO'
+export const SET_SERVER_INFO = 'SET_SERVER_INFO'
+export const SHOW_MAKEBUCKET_MODAL = 'SHOW_MAKEBUCKET_MODAL'
+export const ADD_UPLOAD = 'ADD_UPLOAD'
+export const STOP_UPLOAD = 'STOP_UPLOAD'
+export const UPLOAD_PROGRESS = 'UPLOAD_PROGRESS'
+export const SET_ALERT = 'SET_ALERT'
+export const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR'
+export const SET_SHOW_ABORT_MODAL = 'SET_SHOW_ABORT_MODAL'
+export const SHOW_ABOUT = 'SHOW_ABOUT'
+export const SET_SORT_NAME_ORDER = 'SET_SORT_NAME_ORDER'
+export const SET_SORT_SIZE_ORDER = 'SET_SORT_SIZE_ORDER'
+export const SET_SORT_DATE_ORDER = 'SET_SORT_DATE_ORDER'
+export const SET_LATEST_UI_VERSION = 'SET_LATEST_UI_VERSION'
+export const SET_SIDEBAR_STATUS = 'SET_SIDEBAR_STATUS'
+export const SET_LOGIN_REDIRECT_PATH = 'SET_LOGIN_REDIRECT_PATH'
+export const SET_LOAD_BUCKET = 'SET_LOAD_BUCKET'
+export const SET_LOAD_PATH = 'SET_LOAD_PATH'
+export const SHOW_SETTINGS = 'SHOW_SETTINGS'
+export const SET_SETTINGS = 'SET_SETTINGS'
+export const SHOW_BUCKET_POLICY = 'SHOW_BUCKET_POLICY'
+export const SET_POLICIES = 'SET_POLICIES'
+export const SET_SHARE_OBJECT = 'SET_SHARE_OBJECT'
+export const DELETE_CONFIRMATION = 'DELETE_CONFIRMATION'
+export const SET_PREFIX_WRITABLE = 'SET_PREFIX_WRITABLE'
+
+export const showDeleteConfirmation = (object) => {
+ return {
+ type: DELETE_CONFIRMATION,
+ payload: {
+ object,
+ show: true
+ }
+ }
+}
+
+export const hideDeleteConfirmation = () => {
+ return {
+ type: DELETE_CONFIRMATION,
+ payload: {
+ object: '',
+ show: false
+ }
+ }
+}
+
+export const showShareObject = url => {
+ return {
+ type: SET_SHARE_OBJECT,
+ shareObject: {
+ url: url,
+ show: true
+ }
+ }
+}
+
+export const hideShareObject = () => {
+ return {
+ type: SET_SHARE_OBJECT,
+ shareObject: {
+ url: '',
+ show: false
+ }
+ }
+}
+
+export const shareObject = (object, expiry) => (dispatch, getState) => {
+ const {currentBucket, web} = getState()
+ let host = location.host
+ let bucket = currentBucket
+
+ if (!web.LoggedIn()) {
+ dispatch(showShareObject(`${host}/${bucket}/${object}`))
+ return
+ }
+ web.PresignedGet({
+ host,
+ bucket,
+ object,
+ expiry
+ })
+ .then(obj => {
+ dispatch(showShareObject(obj.url))
+ })
+ .catch(err => {
+ dispatch(showAlert({
+ type: 'danger',
+ message: err.message
+ }))
+ })
+}
+
+export const setLoginRedirectPath = (path) => {
+ return {
+ type: SET_LOGIN_REDIRECT_PATH,
+ path
+ }
+}
+
+export const setLoadPath = (loadPath) => {
+ return {
+ type: SET_LOAD_PATH,
+ loadPath
+ }
+}
+
+export const setLoadBucket = (loadBucket) => {
+ return {
+ type: SET_LOAD_BUCKET,
+ loadBucket
+ }
+}
+
+export const setWeb = web => {
+ return {
+ type: SET_WEB,
+ web
+ }
+}
+
+export const setBuckets = buckets => {
+ return {
+ type: SET_BUCKETS,
+ buckets
+ }
+}
+
+export const addBucket = bucket => {
+ return {
+ type: ADD_BUCKET,
+ bucket
+ }
+}
+
+export const showMakeBucketModal = () => {
+ return {
+ type: SHOW_MAKEBUCKET_MODAL,
+ showMakeBucketModal: true
+ }
+}
+
+export const hideAlert = () => {
+ return {
+ type: SET_ALERT,
+ alert: {
+ show: false,
+ message: '',
+ type: ''
+ }
+ }
+}
+
+export const showAlert = alert => {
+ return (dispatch, getState) => {
+ let alertTimeout = null
+ if (alert.type !== 'danger') {
+ alertTimeout = setTimeout(() => {
+ dispatch({
+ type: SET_ALERT,
+ alert: {
+ show: false
+ }
+ })
+ }, 5000)
+ }
+ dispatch({
+ type: SET_ALERT,
+ alert: Object.assign({}, alert, {
+ show: true,
+ alertTimeout
+ })
+ })
+ }
+}
+
+export const setSidebarStatus = (status) => {
+ return {
+ type: SET_SIDEBAR_STATUS,
+ sidebarStatus: status
+ }
+}
+
+export const hideMakeBucketModal = () => {
+ return {
+ type: SHOW_MAKEBUCKET_MODAL,
+ showMakeBucketModal: false
+ }
+}
+
+export const setVisibleBuckets = visibleBuckets => {
+ return {
+ type: SET_VISIBLE_BUCKETS,
+ visibleBuckets
+ }
+}
+
+export const setObjects = (objects) => {
+ return {
+ type: SET_OBJECTS,
+ objects
+ }
+}
+
+export const setCurrentBucket = currentBucket => {
+ return {
+ type: SET_CURRENT_BUCKET,
+ currentBucket
+ }
+}
+
+export const setCurrentPath = currentPath => {
+ return {
+ type: SET_CURRENT_PATH,
+ currentPath
+ }
+}
+
+export const setStorageInfo = storageInfo => {
+ return {
+ type: SET_STORAGE_INFO,
+ storageInfo
+ }
+}
+
+export const setServerInfo = serverInfo => {
+ return {
+ type: SET_SERVER_INFO,
+ serverInfo
+ }
+}
+
+const setPrefixWritable = prefixWritable => {
+ return {
+ type: SET_PREFIX_WRITABLE,
+ prefixWritable,
+ }
+}
+
+export const selectBucket = (newCurrentBucket, prefix) => {
+ if (!prefix)
+ prefix = ''
+ return (dispatch, getState) => {
+ let web = getState().web
+ let currentBucket = getState().currentBucket
+
+ if (currentBucket !== newCurrentBucket) dispatch(setLoadBucket(newCurrentBucket))
+
+ dispatch(setCurrentBucket(newCurrentBucket))
+ dispatch(selectPrefix(prefix))
+ return
+ }
+}
+
+export const selectPrefix = prefix => {
+ return (dispatch, getState) => {
+ const {currentBucket, web} = getState()
+ dispatch(setLoadPath(prefix))
+ web.ListObjects({
+ bucketName: currentBucket,
+ prefix
+ })
+ .then(res => {
+ let objects = res.objects
+ if (!objects)
+ objects = []
+ dispatch(setObjects(
+ utils.sortObjectsByName(objects.map(object => {
+ object.name = object.name.replace(`${prefix}`, ''); return object
+ }))
+ ))
+ dispatch(setPrefixWritable(res.writable))
+ dispatch(setSortNameOrder(false))
+ dispatch(setCurrentPath(prefix))
+ dispatch(setLoadBucket(''))
+ dispatch(setLoadPath(''))
+ })
+ .catch(err => {
+ dispatch(showAlert({
+ type: 'danger',
+ message: err.message
+ }))
+ dispatch(setLoadBucket(''))
+ dispatch(setLoadPath(''))
+ })
+ }
+}
+
+export const addUpload = options => {
+ return {
+ type: ADD_UPLOAD,
+ slug: options.slug,
+ size: options.size,
+ xhr: options.xhr,
+ name: options.name
+ }
+}
+
+export const stopUpload = options => {
+ return {
+ type: STOP_UPLOAD,
+ slug: options.slug
+ }
+}
+
+export const uploadProgress = options => {
+ return {
+ type: UPLOAD_PROGRESS,
+ slug: options.slug,
+ loaded: options.loaded
+ }
+}
+
+export const setShowAbortModal = showAbortModal => {
+ return {
+ type: SET_SHOW_ABORT_MODAL,
+ showAbortModal
+ }
+}
+
+export const setLoginError = () => {
+ return {
+ type: SET_LOGIN_ERROR,
+ loginError: true
+ }
+}
+
+export const uploadFile = (file, xhr) => {
+ return (dispatch, getState) => {
+ const {currentBucket, currentPath} = getState()
+ const objectName = `${currentPath}${file.name}`
+ const uploadUrl = `${window.location.origin}/minio/upload/${currentBucket}/${objectName}`
+ // The slug is a unique identifer for the file upload.
+ const slug = `${currentBucket}-${currentPath}-${file.name}`
+
+ xhr.open('PUT', uploadUrl, true)
+ xhr.withCredentials = false
+ const token = storage.getItem('token')
+ if (token) xhr.setRequestHeader("Authorization", 'Bearer ' + storage.getItem('token'))
+ xhr.setRequestHeader('x-amz-date', Moment().utc().format('YYYYMMDDTHHmmss') + 'Z')
+ dispatch(addUpload({
+ slug,
+ xhr,
+ size: file.size,
+ name: file.name
+ }))
+
+ xhr.onload = function(event) {
+ if (xhr.status == 401 || xhr.status == 403 || xhr.status == 500) {
+ setShowAbortModal(false)
+ dispatch(stopUpload({
+ slug
+ }))
+ dispatch(showAlert({
+ type: 'danger',
+ message: 'Unauthorized request.'
+ }))
+ }
+ if (xhr.status == 200) {
+ setShowAbortModal(false)
+ dispatch(stopUpload({
+ slug
+ }))
+ dispatch(showAlert({
+ type: 'success',
+ message: 'File \'' + file.name + '\' uploaded successfully.'
+ }))
+ dispatch(selectPrefix(currentPath))
+ }
+ }
+
+ xhr.upload.addEventListener('error', event => {
+ dispatch(showAlert({
+ type: 'danger',
+ message: 'Error occurred uploading \'' + file.name + '\'.'
+ }))
+ dispatch(stopUpload({
+ slug
+ }))
+ })
+
+ xhr.upload.addEventListener('progress', event => {
+ if (event.lengthComputable) {
+ let loaded = event.loaded
+ let total = event.total
+
+ // Update the counter.
+ dispatch(uploadProgress({
+ slug,
+ loaded
+ }))
+ }
+ })
+ xhr.send(file)
+ }
+}
+
+export const showAbout = () => {
+ return {
+ type: SHOW_ABOUT,
+ showAbout: true
+ }
+}
+
+export const hideAbout = () => {
+ return {
+ type: SHOW_ABOUT,
+ showAbout: false
+ }
+}
+
+export const setSortNameOrder = (sortNameOrder) => {
+ return {
+ type: SET_SORT_NAME_ORDER,
+ sortNameOrder
+ }
+}
+
+export const setSortSizeOrder = (sortSizeOrder) => {
+ return {
+ type: SET_SORT_SIZE_ORDER,
+ sortSizeOrder
+ }
+}
+
+export const setSortDateOrder = (sortDateOrder) => {
+ return {
+ type: SET_SORT_DATE_ORDER,
+ sortDateOrder
+ }
+}
+
+export const setLatestUIVersion = (latestUiVersion) => {
+ return {
+ type: SET_LATEST_UI_VERSION,
+ latestUiVersion
+ }
+}
+
+export const showSettings = () => {
+ return {
+ type: SHOW_SETTINGS,
+ showSettings: true
+ }
+}
+
+export const hideSettings = () => {
+ return {
+ type: SHOW_SETTINGS,
+ showSettings: false
+ }
+}
+
+export const setSettings = (settings) => {
+ return {
+ type: SET_SETTINGS,
+ settings
+ }
+}
+
+export const showBucketPolicy = () => {
+ return {
+ type: SHOW_BUCKET_POLICY,
+ showBucketPolicy: true
+ }
+}
+
+export const hideBucketPolicy = () => {
+ return {
+ type: SHOW_BUCKET_POLICY,
+ showBucketPolicy: false
+ }
+}
+
+export const setPolicies = (policies) => {
+ return {
+ type: SET_POLICIES,
+ policies
+ }
+}
diff --git a/browser/app/js/components/Browse.js b/browser/app/js/components/Browse.js
new file mode 100644
index 000000000..671552529
--- /dev/null
+++ b/browser/app/js/components/Browse.js
@@ -0,0 +1,734 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import classNames from 'classnames'
+import browserHistory from 'react-router/lib/browserHistory'
+import humanize from 'humanize'
+import Moment from 'moment'
+import Modal from 'react-bootstrap/lib/Modal'
+import ModalBody from 'react-bootstrap/lib/ModalBody'
+import ModalHeader from 'react-bootstrap/lib/ModalHeader'
+import Alert from 'react-bootstrap/lib/Alert'
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
+import Tooltip from 'react-bootstrap/lib/Tooltip'
+import Dropdown from 'react-bootstrap/lib/Dropdown'
+import MenuItem from 'react-bootstrap/lib/MenuItem'
+
+import InputGroup from '../components/InputGroup'
+import Dropzone from '../components/Dropzone'
+import ObjectsList from '../components/ObjectsList'
+import SideBar from '../components/SideBar'
+import Path from '../components/Path'
+import BrowserUpdate from '../components/BrowserUpdate'
+import UploadModal from '../components/UploadModal'
+import SettingsModal from '../components/SettingsModal'
+import PolicyInput from '../components/PolicyInput'
+import Policy from '../components/Policy'
+import BrowserDropdown from '../components/BrowserDropdown'
+import ConfirmModal from './ConfirmModal'
+import logo from '../../img/logo.svg'
+import * as actions from '../actions'
+import * as utils from '../utils'
+import * as mime from '../mime'
+import { minioBrowserPrefix } from '../constants'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import storage from 'local-storage-fallback'
+
+export default class Browse extends React.Component {
+ componentDidMount() {
+ const {web, dispatch, currentBucket} = this.props
+ if (!web.LoggedIn()) return
+ web.StorageInfo()
+ .then(res => {
+ let storageInfo = Object.assign({}, {
+ total: res.storageInfo.Total,
+ free: res.storageInfo.Free
+ })
+ storageInfo.used = storageInfo.total - storageInfo.free
+ dispatch(actions.setStorageInfo(storageInfo))
+ return web.ServerInfo()
+ })
+ .then(res => {
+ let serverInfo = Object.assign({}, {
+ version: res.MinioVersion,
+ memory: res.MinioMemory,
+ platform: res.MinioPlatform,
+ runtime: res.MinioRuntime,
+ envVars: res.MinioEnvVars
+ })
+ dispatch(actions.setServerInfo(serverInfo))
+ })
+ .catch(err => {
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message: err.message
+ }))
+ })
+ }
+
+ componentWillMount() {
+ const {dispatch} = this.props
+ // Clear out any stale message in the alert of Login page
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message: ''
+ }))
+ if (web.LoggedIn()) {
+ web.ListBuckets()
+ .then(res => {
+ let buckets
+ if (!res.buckets)
+ buckets = []
+ else
+ buckets = res.buckets.map(bucket => bucket.name)
+ if (buckets.length) {
+ dispatch(actions.setBuckets(buckets))
+ dispatch(actions.setVisibleBuckets(buckets))
+ if (location.pathname === minioBrowserPrefix || location.pathname === minioBrowserPrefix + '/') {
+ browserHistory.push(utils.pathJoin(buckets[0]))
+ }
+ }
+ })
+ }
+ this.history = browserHistory.listen(({pathname}) => {
+ let decPathname = decodeURI(pathname)
+ if (decPathname === `${minioBrowserPrefix}/login`) return // FIXME: better organize routes and remove this
+ if (!decPathname.endsWith('/'))
+ decPathname += '/'
+ if (decPathname === minioBrowserPrefix + '/') {
+ dispatch(actions.setCurrentBucket(''))
+ dispatch(actions.setCurrentPath(''))
+ dispatch(actions.setObjects([]))
+ return
+ }
+ let obj = utils.pathSlice(decPathname)
+ if (!web.LoggedIn()) {
+ dispatch(actions.setBuckets([obj.bucket]))
+ dispatch(actions.setVisibleBuckets([obj.bucket]))
+ }
+ dispatch(actions.selectBucket(obj.bucket, obj.prefix))
+ })
+ }
+
+ componentWillUnmount() {
+ this.history()
+ }
+
+ selectBucket(e, bucket) {
+ e.preventDefault()
+ if (bucket === this.props.currentBucket) return
+ browserHistory.push(utils.pathJoin(bucket))
+ }
+
+ searchBuckets(e) {
+ e.preventDefault()
+ let {buckets} = this.props
+ this.props.dispatch(actions.setVisibleBuckets(buckets.filter(bucket => bucket.indexOf(e.target.value) > -1)))
+ }
+
+ selectPrefix(e, prefix) {
+ e.preventDefault()
+ const {dispatch, currentPath, web, currentBucket} = this.props
+ const encPrefix = encodeURI(prefix)
+ if (prefix.endsWith('/') || prefix === '') {
+ if (prefix === currentPath) return
+ browserHistory.push(utils.pathJoin(currentBucket, encPrefix))
+ } else {
+ window.location = `${window.location.origin}/minio/download/${currentBucket}/${encPrefix}?token=${storage.getItem('token')}`
+ }
+ }
+
+ makeBucket(e) {
+ e.preventDefault()
+ const bucketName = this.refs.makeBucketRef.value
+ this.refs.makeBucketRef.value = ''
+ const {web, dispatch} = this.props
+ this.hideMakeBucketModal()
+ web.MakeBucket({
+ bucketName
+ })
+ .then(() => {
+ dispatch(actions.addBucket(bucketName))
+ dispatch(actions.selectBucket(bucketName))
+ })
+ .catch(err => dispatch(actions.showAlert({
+ type: 'danger',
+ message: err.message
+ })))
+ }
+
+ hideMakeBucketModal() {
+ const {dispatch} = this.props
+ dispatch(actions.hideMakeBucketModal())
+ }
+
+ showMakeBucketModal(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.showMakeBucketModal())
+ }
+
+ showAbout(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.showAbout())
+ }
+
+ hideAbout(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.hideAbout())
+ }
+
+ showBucketPolicy(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.showBucketPolicy())
+ }
+
+ hideBucketPolicy(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.hideBucketPolicy())
+ }
+
+ uploadFile(e) {
+ e.preventDefault()
+ const {dispatch, buckets} = this.props
+
+ if (buckets.length === 0) {
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message: "Bucket needs to be created before trying to upload files."
+ }))
+ return
+ }
+ let file = e.target.files[0]
+ e.target.value = null
+ this.xhr = new XMLHttpRequest()
+ dispatch(actions.uploadFile(file, this.xhr))
+ }
+
+ removeObject() {
+ const {web, dispatch, currentPath, currentBucket, deleteConfirmation} = this.props
+ web.RemoveObject({
+ bucketName: currentBucket,
+ objectName: deleteConfirmation.object
+ })
+ .then(() => {
+ this.hideDeleteConfirmation()
+ dispatch(actions.selectPrefix(currentPath))
+ })
+ .catch(e => dispatch(actions.showAlert({
+ type: 'danger',
+ message: e.message
+ })))
+ }
+
+ hideAlert(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.hideAlert())
+ }
+
+ showDeleteConfirmation(e, object) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.showDeleteConfirmation(object))
+ }
+
+ hideDeleteConfirmation() {
+ const {dispatch} = this.props
+ dispatch(actions.hideDeleteConfirmation())
+ }
+
+ shareObject(e, object) {
+ e.preventDefault()
+ const {dispatch} = this.props
+ dispatch(actions.shareObject(object))
+ }
+
+ hideShareObjectModal() {
+ const {dispatch} = this.props
+ dispatch(actions.hideShareObject())
+ }
+
+ dataType(name, contentType) {
+ return mime.getDataType(name, contentType)
+ }
+
+ sortObjectsByName(e) {
+ const {dispatch, objects, sortNameOrder} = this.props
+ dispatch(actions.setObjects(utils.sortObjectsByName(objects, !sortNameOrder)))
+ dispatch(actions.setSortNameOrder(!sortNameOrder))
+ }
+
+ sortObjectsBySize() {
+ const {dispatch, objects, sortSizeOrder} = this.props
+ dispatch(actions.setObjects(utils.sortObjectsBySize(objects, !sortSizeOrder)))
+ dispatch(actions.setSortSizeOrder(!sortSizeOrder))
+ }
+
+ sortObjectsByDate() {
+ const {dispatch, objects, sortDateOrder} = this.props
+ dispatch(actions.setObjects(utils.sortObjectsByDate(objects, !sortDateOrder)))
+ dispatch(actions.setSortDateOrder(!sortDateOrder))
+ }
+
+ logout(e) {
+ const {web} = this.props
+ e.preventDefault()
+ web.Logout()
+ browserHistory.push(`${minioBrowserPrefix}/login`)
+ }
+
+ landingPage(e) {
+ e.preventDefault()
+ this.props.dispatch(actions.selectBucket(this.props.buckets[0]))
+ }
+
+ fullScreen(e) {
+ e.preventDefault()
+ let el = document.documentElement
+ if (el.requestFullscreen) {
+ el.requestFullscreen()
+ }
+ if (el.mozRequestFullScreen) {
+ el.mozRequestFullScreen()
+ }
+ if (el.webkitRequestFullscreen) {
+ el.webkitRequestFullscreen()
+ }
+ if (el.msRequestFullscreen) {
+ el.msRequestFullscreen()
+ }
+ }
+
+ toggleSidebar(status) {
+ this.props.dispatch(actions.setSidebarStatus(status))
+ }
+
+ hideSidebar(event) {
+ let e = event || window.event;
+
+ // Support all browsers.
+ let target = e.srcElement || e.target;
+ if (target.nodeType === 3) // Safari support.
+ target = target.parentNode;
+
+ let targetID = target.id;
+ if (!(targetID === 'feh-trigger')) {
+ this.props.dispatch(actions.setSidebarStatus(false))
+ }
+ }
+
+ showSettings(e) {
+ e.preventDefault()
+
+ const {dispatch} = this.props
+ dispatch(actions.showSettings())
+ }
+
+ showMessage() {
+ const {dispatch} = this.props
+ dispatch(actions.showAlert({
+ type: 'success',
+ message: 'Link copied to clipboard!'
+ }))
+ this.hideShareObjectModal()
+ }
+
+ selectTexts() {
+ this.refs.copyTextInput.select()
+ }
+
+ handleExpireValue(targetInput, inc) {
+ inc === -1 ? this.refs[targetInput].stepDown(1) : this.refs[targetInput].stepUp(1)
+
+ if (this.refs.expireDays.value == 7) {
+ this.refs.expireHours.value = 0
+ this.refs.expireMins.value = 0
+ }
+ }
+
+
+ render() {
+ const {total, free} = this.props.storageInfo
+ const {showMakeBucketModal, alert, sortNameOrder, sortSizeOrder, sortDateOrder, showAbout, showBucketPolicy} = this.props
+ const {version, memory, platform, runtime} = this.props.serverInfo
+ const {sidebarStatus} = this.props
+ const {showSettings} = this.props
+ const {policies, currentBucket, currentPath} = this.props
+ const {deleteConfirmation} = this.props
+ const {shareObject} = this.props
+ const {web, prefixWritable} = this.props
+
+ // Don't always show the SettingsModal. This is done here instead of in
+ // SettingsModal.js so as to allow for #componentWillMount to handle
+ // the loading of the settings.
+ let settingsModal = showSettings ?
+
+ { alert.message }
+
+
+ // Make sure you don't show a fading out alert box on the initial web-page load.
+ if (!alert.message)
+ alertBox = ''
+
+ let signoutTooltip =
+ Sign out
+
+ let uploadTooltip =
+ Upload file
+
+ let makeBucketTooltip =
+ Create bucket
+
+ let loginButton = ''
+ let browserDropdownButton = ''
+ let storageUsageDetails = ''
+
+ let used = total - free
+ let usedPercent = (used / total) * 100 + '%'
+ let freePercent = free * 100 / total
+
+ if (web.LoggedIn()) {
+ browserDropdownButton = Login
+ }
+
+ if (web.LoggedIn()) {
+ storageUsageDetails =
+
+
+
+ Used:
+ { humanize.filesize(total - free) }
+
+
+ Free:
+ { humanize.filesize(total - used) }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } else {
+ if (prefixWritable)
+ createButton =
+
+
+
+
+
+
+
+
+
+
+
+ }
+
+ return (
+
+
+
+
+ { alertBox }
+
+
+
+
+
+
+
+
+
+
+ Name
+
+
+ Size
+
+
+ Last Modified
+
+
+
+
+
+
+
+ ×
+
+
+
+
+
+
+
+ ×
+
+
+
+
+
+
+
+
+
+ Version
+
+ { version }
+
+
+
+ Memory
+
+ { memory }
+
+
+
+ Platform
+
+ { platform }
+
+
+
+ Runtime
+
+ { runtime }
+
+
+
+
+
+
+ Bucket Policy (
+ { currentBucket })
+
+ ×
+
+
+
+
+ { policies.map((policy, i) =>
+ ) }
+
+
+
+
+
+ Share Object
+
+
+
+
+ Shareable Link
+
+
+
+
+ Expires in
+
+
+
+
+
+
+
+ Minutes
+
+
+
+
+
+
+
+
+
+
+ Copy Link
+
+
+
+ Cancel
+
+
+
+ { settingsModal }
+
+
+
+
+
+ )
+}
+
+export default connect(state => state)(BrowserDropdown)
diff --git a/browser/app/js/components/BrowserUpdate.js b/browser/app/js/components/BrowserUpdate.js
new file mode 100644
index 000000000..be4c7af3a
--- /dev/null
+++ b/browser/app/js/components/BrowserUpdate.js
@@ -0,0 +1,42 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import connect from 'react-redux/lib/components/connect'
+
+import Tooltip from 'react-bootstrap/lib/Tooltip'
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
+
+let BrowserUpdate = ({latestUiVersion}) => {
+ // Don't show an update if we're already updated!
+ if (latestUiVersion === currentUiVersion) return (
+
+
+ New update available. Click to refresh.
+ }>
+
+
+ )
+}
+
+export default connect(state => {
+ return {
+ latestUiVersion: state.latestUiVersion
+ }
+})(BrowserUpdate)
diff --git a/browser/app/js/components/ConfirmModal.js b/browser/app/js/components/ConfirmModal.js
new file mode 100644
index 000000000..fd98fa313
--- /dev/null
+++ b/browser/app/js/components/ConfirmModal.js
@@ -0,0 +1,50 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import Modal from 'react-bootstrap/lib/Modal'
+import ModalBody from 'react-bootstrap/lib/ModalBody'
+
+let ConfirmModal = ({baseClass, icon, text, sub, okText, cancelText, okHandler, cancelHandler, show}) => {
+ return (
+
+
+
+
+
+ { text }
+
+
+ { sub }
+
+
+
+
+ { okText }
+
+
+ { cancelText }
+
+
+
+ )
+}
+
+export default ConfirmModal
diff --git a/browser/app/js/components/Dropzone.js b/browser/app/js/components/Dropzone.js
new file mode 100644
index 000000000..0ddab2661
--- /dev/null
+++ b/browser/app/js/components/Dropzone.js
@@ -0,0 +1,65 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import ReactDropzone from 'react-dropzone'
+import * as actions from '../actions'
+
+// Dropzone is a drag-and-drop element for uploading files. It will create a
+// landing zone of sorts that automatically receives the files.
+export default class Dropzone extends React.Component {
+
+ onDrop(files) {
+ // FIXME: Currently you can upload multiple files, but only one abort
+ // modal will be shown, and progress updates will only occur for one
+ // file at a time. See #171.
+ files.forEach(file => {
+ let req = new XMLHttpRequest()
+
+ // Dispatch the upload.
+ web.dispatch(actions.uploadFile(file, req))
+ })
+ }
+
+ render() {
+ // Overwrite the default styling from react-dropzone; otherwise it
+ // won't handle child elements correctly.
+ const style = {
+ height: '100%',
+ borderWidth: '2px',
+ borderStyle: 'dashed',
+ borderColor: '#fff'
+ }
+ const activeStyle = {
+ borderColor: '#777'
+ }
+ const rejectStyle = {
+ backgroundColor: '#ffdddd'
+ }
+
+ // disableClick means that it won't trigger a file upload box when
+ // the user clicks on a file.
+ return (
+
+ { this.props.children }
+
+ )
+ }
+}
diff --git a/browser/app/js/components/InputGroup.js b/browser/app/js/components/InputGroup.js
new file mode 100644
index 000000000..c2b0e2ab2
--- /dev/null
+++ b/browser/app/js/components/InputGroup.js
@@ -0,0 +1,49 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+
+let InputGroup = ({label, id, name, value, onChange, type, spellCheck, required, readonly, autoComplete, align, className}) => {
+ var input =
+ { input }
+
+ { label }
+
+
+}
+
+export default InputGroup
diff --git a/browser/app/js/components/Login.js b/browser/app/js/components/Login.js
new file mode 100644
index 000000000..b5db1a872
--- /dev/null
+++ b/browser/app/js/components/Login.js
@@ -0,0 +1,133 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import classNames from 'classnames'
+import logo from '../../img/logo.svg'
+import Alert from 'react-bootstrap/lib/Alert'
+import * as actions from '../actions'
+import InputGroup from '../components/InputGroup'
+
+export default class Login extends React.Component {
+ handleSubmit(event) {
+ event.preventDefault()
+ const {web, dispatch, loginRedirectPath} = this.props
+ let message = ''
+ if (!document.getElementById('accessKey').value) {
+ message = 'Secret Key cannot be empty'
+ }
+ if (!document.getElementById('secretKey').value) {
+ message = 'Access Key cannot be empty'
+ }
+ if (message) {
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message
+ }))
+ return
+ }
+ web.Login({
+ username: document.getElementById('accessKey').value,
+ password: document.getElementById('secretKey').value
+ })
+ .then((res) => {
+ this.context.router.push(loginRedirectPath)
+ })
+ .catch(e => {
+ dispatch(actions.setLoginError())
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message: e.message
+ }))
+ })
+ }
+
+ componentWillMount() {
+ const {dispatch} = this.props
+ // Clear out any stale message in the alert of previous page
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message: ''
+ }))
+ document.body.classList.add('is-guest')
+ }
+
+ componentWillUnmount() {
+ document.body.classList.remove('is-guest')
+ }
+
+ hideAlert() {
+ const {dispatch} = this.props
+ dispatch(actions.hideAlert())
+ }
+
+ render() {
+ const {alert} = this.props
+ let alertBox =
+
+ { alert.message }
+
+
+ // Make sure you don't show a fading out alert box on the initial web-page load.
+ if (!alert.message)
+ alertBox = ''
+ return (
+
+ { alertBox }
+
+
+
+
+
+
+ { window.location.host }
+
+
+
showDeleteConfirmation(e, `${currentPath}${object.name}`) }>
+ if (!object.name.endsWith('/')) {
+ actionButtons =
+
+ shareObject(e, `${currentPath}${object.name}`) }>
+ { deleteButton }
+
+
+ }
+ return (
+
+
+
+ { size }
+
+
+ { lastModified }
+
+
+ { actionButtons }
+
+
+ { list }
+
+ )
+}
+
+// Subscribe it to state changes.
+export default connect(state => {
+ return {
+ objects: state.objects,
+ currentPath: state.currentPath,
+ loadPath: state.loadPath
+ }
+})(ObjectsList)
diff --git a/browser/app/js/components/Path.js b/browser/app/js/components/Path.js
new file mode 100644
index 000000000..6ca85869b
--- /dev/null
+++ b/browser/app/js/components/Path.js
@@ -0,0 +1,41 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import connect from 'react-redux/lib/components/connect'
+
+let Path = ({currentBucket, currentPath, selectPrefix}) => {
+ let dirPath = []
+ let path = ''
+ if (currentPath) {
+ path = currentPath.split('/').map((dir, i) => {
+ dirPath.push(dir)
+ let dirPath_ = dirPath.join('/') + '/'
+ return selectPrefix(e, dirPath_) }>{ dir }
+
+ { newPrefix }
+
+
+
+
+ Read Only
+
+
+ Write Only
+
+
+ Read and Write
+
+
+
+
+
+ Remove
+
+
+
+
+
+
+ this.policy = policy } className="form-control">
+
+ Read Only
+
+
+ Write Only
+
+
+ Read and Write
+
+
+
+
+
+ Add
+
+
+
+ )
+ }
+}
+
+export default connect(state => state)(PolicyInput)
diff --git a/browser/app/js/components/SettingsModal.js b/browser/app/js/components/SettingsModal.js
new file mode 100644
index 000000000..51bd4333b
--- /dev/null
+++ b/browser/app/js/components/SettingsModal.js
@@ -0,0 +1,215 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import connect from 'react-redux/lib/components/connect'
+import * as actions from '../actions'
+
+import Tooltip from 'react-bootstrap/lib/Tooltip'
+import Modal from 'react-bootstrap/lib/Modal'
+import ModalBody from 'react-bootstrap/lib/ModalBody'
+import ModalHeader from 'react-bootstrap/lib/ModalHeader'
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
+import InputGroup from './InputGroup'
+
+class SettingsModal extends React.Component {
+
+ // When the settings are shown, it loads the access key and secret key.
+ componentWillMount() {
+ const {web, dispatch} = this.props
+ const {serverInfo} = this.props
+
+ let accessKeyEnv = ''
+ let secretKeyEnv = ''
+ // Check environment variables first. They may or may not have been
+ // loaded already; they load in Browse#componentDidMount.
+ if (serverInfo.envVars) {
+ serverInfo.envVars.forEach(envVar => {
+ let keyVal = envVar.split('=')
+ if (keyVal[0] == 'MINIO_ACCESS_KEY') {
+ accessKeyEnv = keyVal[1]
+ } else if (keyVal[0] == 'MINIO_SECRET_KEY') {
+ secretKeyEnv = keyVal[1]
+ }
+ })
+ }
+ if (accessKeyEnv != '' || secretKeyEnv != '') {
+ dispatch(actions.setSettings({
+ accessKey: accessKeyEnv,
+ secretKey: secretKeyEnv,
+ keysReadOnly: true
+ }))
+ } else {
+ web.GetAuth()
+ .then(data => {
+ dispatch(actions.setSettings({
+ accessKey: data.accessKey,
+ secretKey: data.secretKey
+ }))
+ })
+ }
+ }
+
+ // When they are re-hidden, the keys are unloaded from memory.
+ componentWillUnmount() {
+ const {dispatch} = this.props
+
+ dispatch(actions.setSettings({
+ accessKey: '',
+ secretKey: '',
+ secretKeyVisible: false
+ }))
+ dispatch(actions.hideSettings())
+ }
+
+ // Handle field changes from inside the modal.
+ accessKeyChange(e) {
+ const {dispatch} = this.props
+ dispatch(actions.setSettings({
+ accessKey: e.target.value
+ }))
+ }
+
+ secretKeyChange(e) {
+ const {dispatch} = this.props
+ dispatch(actions.setSettings({
+ secretKey: e.target.value
+ }))
+ }
+
+ secretKeyVisible(secretKeyVisible) {
+ const {dispatch} = this.props
+ dispatch(actions.setSettings({
+ secretKeyVisible
+ }))
+ }
+
+ // Save the auth params and set them.
+ setAuth(e) {
+ e.preventDefault()
+ const {web, dispatch} = this.props
+
+ let accessKey = document.getElementById('accessKey').value
+ let secretKey = document.getElementById('secretKey').value
+ web.SetAuth({
+ accessKey,
+ secretKey
+ })
+ .then(data => {
+ dispatch(actions.setSettings({
+ accessKey: '',
+ secretKey: '',
+ secretKeyVisible: false
+ }))
+ dispatch(actions.hideSettings())
+ dispatch(actions.showAlert({
+ type: 'success',
+ message: 'Changed credentials'
+ }))
+ })
+ .catch(err => {
+ dispatch(actions.setSettings({
+ accessKey: '',
+ secretKey: '',
+ secretKeyVisible: false
+ }))
+ dispatch(actions.hideSettings())
+ dispatch(actions.showAlert({
+ type: 'danger',
+ message: err.message
+ }))
+ })
+ }
+
+ generateAuth(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+
+ web.GenerateAuth()
+ .then(data => {
+ dispatch(actions.setSettings({
+ secretKeyVisible: true
+ }))
+ dispatch(actions.setSettings({
+ accessKey: data.accessKey,
+ secretKey: data.secretKey
+ }))
+ })
+ }
+
+ hideSettings(e) {
+ e.preventDefault()
+
+ const {dispatch} = this.props
+ dispatch(actions.hideSettings())
+ }
+
+ render() {
+ let {settings} = this.props
+
+ return (
+
+
+ Change Password
+
+
+
+
+
+ Generate
+
+
+ Update
+
+
+ Cancel
+
+
+
+ )
+ }
+}
+
+export default connect(state => {
+ return {
+ web: state.web,
+ settings: state.settings,
+ serverInfo: state.serverInfo
+ }
+})(SettingsModal)
diff --git a/browser/app/js/components/SideBar.js b/browser/app/js/components/SideBar.js
new file mode 100644
index 000000000..ad4aee576
--- /dev/null
+++ b/browser/app/js/components/SideBar.js
@@ -0,0 +1,85 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import classNames from 'classnames'
+import ClickOutHandler from 'react-onclickout'
+import Scrollbars from 'react-custom-scrollbars/lib/Scrollbars'
+import connect from 'react-redux/lib/components/connect'
+
+import logo from '../../img/logo.svg'
+
+let SideBar = ({visibleBuckets, loadBucket, currentBucket, selectBucket, searchBuckets, landingPage, sidebarStatus, clickOutside, showPolicy}) => {
+
+ const list = visibleBuckets.map((bucket, i) => {
+ return selectBucket(e, bucket) }>
+
+ { bucket }
+
+
+ })
+
+ return (
+
+
+
+ )
+}
+
+// Subscribe it to state changes that affect only the sidebar.
+export default connect(state => {
+ return {
+ visibleBuckets: state.visibleBuckets,
+ loadBucket: state.loadBucket,
+ currentBucket: state.currentBucket,
+ sidebarStatus: state.sidebarStatus
+ }
+})(SideBar)
diff --git a/browser/app/js/components/UploadModal.js b/browser/app/js/components/UploadModal.js
new file mode 100644
index 000000000..6658ab225
--- /dev/null
+++ b/browser/app/js/components/UploadModal.js
@@ -0,0 +1,141 @@
+/*
+ * Minio Browser (C) 2016 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+import humanize from 'humanize'
+import classNames from 'classnames'
+import connect from 'react-redux/lib/components/connect'
+
+import ProgressBar from 'react-bootstrap/lib/ProgressBar'
+import ConfirmModal from './ConfirmModal'
+
+import * as actions from '../actions'
+
+// UploadModal is a modal that handles multiple file uploads.
+// During the upload, it displays a progress bar, and can transform into an
+// abort modal if the user decides to abort the uploads.
+class UploadModal extends React.Component {
+
+ // Abort all the current uploads.
+ abortUploads(e) {
+ e.preventDefault()
+ const {dispatch, uploads} = this.props
+
+ for (var slug in uploads) {
+ let upload = uploads[slug]
+ upload.xhr.abort()
+ dispatch(actions.stopUpload({
+ slug
+ }))
+ }
+
+ this.hideAbort(e)
+ }
+
+ // Show the abort modal instead of the progress modal.
+ showAbort(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+
+ dispatch(actions.setShowAbortModal(true))
+ }
+
+ // Show the progress modal instead of the abort modal.
+ hideAbort(e) {
+ e.preventDefault()
+ const {dispatch} = this.props
+
+ dispatch(actions.setShowAbortModal(false))
+ }
+
+ render() {
+ const {uploads, showAbortModal} = this.props
+
+ // Show the abort modal.
+ if (showAbortModal) {
+ let baseClass = classNames({
+ 'abort-upload': true
+ })
+ let okIcon = classNames({
+ 'fa': true,
+ 'fa-times': true
+ })
+ let cancelIcon = classNames({
+ 'fa': true,
+ 'fa-cloud-upload': true
+ })
+
+ return (
+
+
+ )
+ }
+
+ // If we don't have any files uploading, don't show anything.
+ let numberUploading = Object.keys(uploads).length
+ if (numberUploading == 0)
+ return (
+
+ ×
+
+
+ { text }
+
+
+
+ { humanize.filesize(totalLoaded) } ({ percent.toFixed(2) } %)
+
+
+