Prompts and Sidebar in

assets/src/components/Sidebar.vue

@@ -1,19 +1,19 @@
 <template>
   <nav :class="{active}">
-    <router-link class="action" to="/files/" aria-label="My Files" title="My Files">
+    <router-link class="action" to="/files/" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
       <i class="material-icons">folder</i>
-      <span>{{ $t('My Files') }}</span>
+      <span>{{ $t('sidebar.myFiles') }}</span>
     </router-link>
 
     <div v-if="user.allowNew">
-      <button @click="$store.commit('showHover', 'newDir')" aria-label="New directory" title="New directory" class="action">
+      <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')" :title="$t('sidebar.newFolder')">
         <i class="material-icons">create_new_folder</i>
-        <span>New folder</span>
+        <span>{{ $t('sidebar.newFolder') }}</span>
       </button>
 
-      <button @click="$store.commit('showHover', 'newFile')" aria-label="New file" title="New file" class="action">
+      <button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')" :title="$t('sidebar.newFile')">
         <i class="material-icons">note_add</i>
-        <span>New file</span>
+        <span>{{ $t('sidebar.newFile') }}</span>
       </button>
     </div>
 
@@ -25,21 +25,21 @@
     </div>
 
     <div>
-      <router-link class="action" to="/settings" aria-label="Settings" title="Settings">
+      <router-link class="action" to="/settings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
         <i class="material-icons">settings_applications</i>
-        <span>Settings</span>
+        <span>{{ $t('sidebar.settings') }}</span>
       </router-link>
 
-      <button @click="logout" class="action" id="logout" aria-label="Log out" title="Logout">
+      <button @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')" :title="$t('sidebar.logout')">
         <i class="material-icons">exit_to_app</i>
-        <span>Logout</span>
+        <span>{{ $t('sidebar.logout') }}</span>
       </button>
     </div>
 
     <p class="credits">
-      <span>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/filemanager">File Manager</a>.</span>
+      <span>{{ $t('sidebar.servedWith') }} <a rel="noopener noreferrer" href="https://github.com/hacdias/filemanager">File Manager</a>.</span>
       <span v-for="plugin in plugins" :key="plugin.name" v-html="plugin.credits"><br></span>
-      <span><a @click="help">Help</a></span>
+      <span><a @click="help">{{ $t('sidebar.help') }}</a></span>
     </p>
   </nav>
 </template>

assets/src/components/prompts/Copy.vue

@@ -7,7 +7,10 @@
 
     <div>
       <button class="ok" @click="copy">{{ $t('buttons.copy') }}</button>
-      <button class="cancel" @click="$store.commit('closeHovers')">{{ $t('buttons.cancel') }}</button>
+      <button class="cancel"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Delete.vue

@@ -5,7 +5,10 @@
     <p v-show="req.kind === 'listing'">{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
     <div>
       <button @click="submit" autofocus>{{ $t('buttons.delete') }}</button>
-      <button @click="closeHovers" class="cancel">{{ $t('buttons.cancel') }}</button>
+      <button class="cancel"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Move.vue

@@ -7,7 +7,10 @@
 
     <div>
       <button class="ok" @click="move">{{ $t('buttons.move') }}</button>
-      <button class="cancel" @click="$store.commit('closeHovers')">{{ $t('buttons.cancel') }}</button>
+      <button class="cancel"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/NewDir.vue

@@ -5,7 +5,10 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">{{ $t('buttons.create') }}</button>
-      <button class="cancel" @click="$store.commit('closeHovers')">{{ $t('buttons.cancel') }}</button>
+      <button class="cancel"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/NewFile.vue

@@ -5,7 +5,10 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">{{ $t('buttons.create') }}</button>
-      <button class="cancel" @click="$store.commit('closeHovers')">{{ $t('buttons.cancel') }}</button>
+      <button class="cancel"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Prompts.vue

@@ -27,7 +27,10 @@
           :placeholder="input.placeholder">
         <div>
           <input type="submit" class="ok" :value="prompt.ok">
-          <button class="cancel" @click.prevent="$store.commit('closeHovers')">{{ $t('buttons.cancel') }}</button>
+          <button class="cancel"
+            @click="$store.commit('closeHovers')"
+            :aria-label="$t('buttons.cancel')"
+            :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
         </div>
       </form>
     </template>

assets/src/components/prompts/Rename.vue

@@ -6,7 +6,10 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button @click="submit" type="submit">{{ $t('buttons.rename') }}</button>
-      <button @click="cancel" class="cancel">{{ $t('buttons.cancel') }}</button>
+      <button class="cancel"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
     </div>
   </div>
 </template>

assets/src/components/settings/Global.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="dashboard">
-    <h1>Global Settings</h1>
+    <h1>{{ $t('settings.globalSettings') }}</h1>
 
     <ul>
-      <li><router-link to="/settings/profile">Go to Profile Settings</router-link></li>
+      <li><router-link to="/settings/profile">{{ $t('settings.goTo') }} {{ $t('settings.profileSettings') }}</router-link></li>
-      <li><router-link to="/settings/users">Go to User Management</router-link></li>
+      <li><router-link to="/settings/users">{{ $t('settings.goTo') }} {{ $t('settings.userManagement') }}</router-link></li>
     </ul>
 
     <form @submit="savePlugin" v-if="plugins.length > 0">
@@ -23,11 +23,9 @@
     </form>
 
     <form @submit="saveCommands">
-      <h2>Commands</h2>
+      <h2>{{ $t('settings.commands') }}</h2>
 
-      <p class="small">Here you can set commands that are executed in the named events. You write one command
+      <p class="small">{{ $t('settings.commandsHelp') }}</p>
-        per line. If the event is related to files, such as before and after saving, the environment variable
-        <code>file</code> will be available with the path of the file.</p>
 
       <template v-for="command in commands">
         <h3>{{ capitalize(command.name) }}</h3>
@@ -103,7 +101,7 @@ export default {
       }
 
       api.updateCommands(commands)
-        .then(() => { this.showSuccess('Commands updated!') })
+        .then(() => { this.showSuccess(this.$t('settings.commandsUpdated')) })
         .catch(error => { this.showError(error) })
     },
     savePlugin (event) {
@@ -132,7 +130,7 @@ export default {
       console.log(plugins)
 
       api.updatePlugins(plugins)
-        .then(() => { this.showSuccess('Plugins settings updated!') })
+        .then(() => { this.showSuccess(this.$t('settings.pluginsUpdated')) })
         .catch(error => { this.showError(error) })
     },
     parsePlugin (name, plugin) {

assets/src/components/settings/Profile.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="dashboard">
-    <h1>Profile Settings</h1>
+    <h1>{{ $t('settings.profileSettings') }}</h1>
 
     <ul v-if="user.admin">
-      <li><router-link to="/settings/global">Go to Global Settings</router-link></li>
+      <li><router-link to="/settings/global">{{ $t('settings.goTo') }} {{ $t('settings.globalSettings') }}</router-link></li>
     </ul>
 
     <form @submit="changePassword">
-      <h2>Change Password</h2>
+      <h2>{{ $t('settings.changePassword') }}</h2>
-      <p><input :class="passwordClass" type="password" placeholder="Your new password" v-model="password" name="password"></p>
+      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password"></p>
-      <p><input :class="passwordClass" type="password" placeholder="Confirm your new password" v-model="passwordConf" name="password"></p>
+      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password"></p>
-      <p><input type="submit" value="Change Password"></p>
+      <p><input type="submit" :value="$t('buttons.update')"></p>
     </form>
 
     <form @submit="updateCSS">
-      <h2>Custom Stylesheet</h2>
+      <h2>{{ $t('settings.changePassword') }}</h2>
       <textarea v-model="css" name="css"></textarea>
-      <p><input type="submit" value="Update"></p>
+      <p><input type="submit" :value="$t('buttons.update')"></p>
     </form>
   </div>
 </template>

assets/src/components/settings/User.vue

@@ -1,58 +1,52 @@
 <template>
   <div>
     <form @submit="save" class="dashboard">
-      <h1 v-if="id === 0">New User</h1>
+      <h1 v-if="id === 0">{{ $t('settings.newUser') }}</h1>
-      <h1 v-else>User {{ username }}</h1>
+      <h1 v-else>{{ $t('settings.user') }} {{ username }}</h1>
 
-      <p><label for="username">Username</label><input type="text" v-model="username" id="username"></p>
+      <p><label for="username">{{ $t('settings.username') }}</label><input type="text" v-model="username" id="username"></p>
-      <p><label for="password">Password</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
+      <p><label for="password">{{ $t('settings.password') }}</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
-      <p><label for="scope">Scope</label><input type="text" v-model="filesystem" id="scope"></p>
+      <p><label for="scope">{{ $t('settings.scope') }}</label><input type="text" v-model="filesystem" id="scope"></p>
 
-      <h2>Permissions</h2>
+      <h2>{{ $t('settings.permissions') }}</h2>
+      <p class="small">{{ $t('settings.permissionsHelp') }}</p>
 
-      <p class="small">You can set the user to be an administrator or choose the permissions individually.
+      <p><input type="checkbox" v-model="admin"> {{ $t('settings.administrator') }}</p>
-        If you select "Administrator", all of the other options will be automatically checked.
+      <p><input type="checkbox" :disabled="admin" v-model="allowNew"> {{ $t('settings.allowNew') }}</p>
-        The management of users remains a privilege of an administrator.</p>
+      <p><input type="checkbox" :disabled="admin" v-model="allowEdit"> {{ $t('settings.allowEdit') }}</p>
-
+      <p><input type="checkbox" :disabled="admin" v-model="allowCommands"> {{ $t('settings.allowCommands') }}</p>
-      <p><input type="checkbox" v-model="admin"> Administrator</p>
-      <p><input type="checkbox" :disabled="admin" v-model="allowNew"> Create new files and directories</p>
-      <p><input type="checkbox" :disabled="admin" v-model="allowEdit"> Edit, rename and delete files or directories.</p>
-      <p><input type="checkbox" :disabled="admin" v-model="allowCommands"> Execute commands</p>
       <p v-for="(value, key) in permissions" :key="key">
         <input type="checkbox" :disabled="admin" v-model="permissions[key]"> {{ capitalize(key) }}
       </p>
 
-      <h3>Commands</h3>
+      <h3>{{ $t('settings.userCommands') }}</h3>
-
+      <p class="small">{{ $t('settings.userCommandsHelp') }} <i>git svn hg</i>.</p>
-      <p class="small">A space separated list with the available commands for this user. Example: <i>git svn hg</i>.</p>
-
       <input type="text" v-model.trim="commands">
 
-      <h2>Rules</h2>
+      <h2>{{ $t('settings.rules') }}</h2>
 
-      <p class="small">Here you can define a set of allow and disallow rules for this specific user. The blocked files won't
+      <p class="small">{{ $t('settings.rulesHelp1') }}</p>
-        show up in the listings and they won't be accessible to the user. We support regex and paths relative to
-        the user's scope.</p>
 
-      <p class="small">Each rule goes in one different line and must start with the keyword <code>allow</code> or <code>disallow</code>.
+      <i18n path="settings.rulesHelp2" tag="p" class="small">
-        Then you should write <code>regex</code> if you are using a regular expression and then the expression or the path.</p>
+        <code>allow</code><code>disallow</code><code>regex</code>
+      </i18n>
 
-      <p class="small"><strong>Examples</strong></p>
+      <p class="small"><strong>{{ $t('settings.examples') }}</strong></p>
 
       <ul class="small">
-        <li><code>disallow regex \\/\\..+</code> - prevents the access to any dot file (such as .git, .gitignore) in every folder.</li>
+        <li><code>disallow regex \\/\\..+</code> - {{ $t('settings.ruleExample1') }}</li>
-        <li><code>disallow /Caddyfile</code> - blocks the access to the file named <i>Caddyfile</i> on the root of the scope</li>
+        <li><code>disallow /Caddyfile</code> - {{ $t('settings.ruleExample2') }}</li>
       </ul>
 
       <textarea v-model.trim="rules"></textarea>
 
-      <h2>Custom Stylesheet</h2>
+      <h2>{{ $t('settings.customStylesheet') }}</h2>
 
       <textarea name="css"></textarea>
 
       <p>
-        <button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="delete">Delete</button>
+        <button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="delete" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
-        <input type="submit" value="Save">
+        <input type="submit" :value="$t('buttons.save')">
       </p>
     </form>
 
@@ -60,8 +54,13 @@
       <h3>Delete User</h3>
       <p>Are you sure you want to delete this user?</p>
       <div>
-        <button @click="deleteUser" autofocus>Delete</button>
+        <button @click="deleteUser" autofocus>{{ $t('buttons.delete') }}</button>
-        <button @click="closeHovers" class="cancel">Cancel</button>
+        <button class="cancel"
+          @click="closeHovers"
+          :aria-label="$t('buttons.cancel')"
+          :title="$t('buttons.cancel')">
+          {{ $t('buttons.cancel') }}
+        </button>
       </div>
     </div>
   </div>
@@ -91,8 +90,8 @@ export default {
   },
   computed: {
     passwordPlaceholder () {
-      if (this.$route.path === '/users/new') return ''
+      if (this.$route.path === '/settings/users/new') return ''
-      return '(leave blank to avoid changes)'
+      return this.$t('settings.avoidChanges')
     }
   },
   created () {
@@ -115,7 +114,7 @@ export default {
     fetchData () {
       let user = this.$route.params[0]
 
-      if (this.$route.path === '/users/new') {
+      if (this.$route.path === '/settings/users/new') {
         user = 'base'
       }
 
@@ -149,7 +148,7 @@ export default {
 
         this.rules = this.rules.trim()
       }).catch(() => {
-        this.$router.push({ path: '/users/new' })
+        this.$router.push({ path: '/settings/users/new' })
       })
     },
     capitalize (name) {
@@ -184,7 +183,7 @@ export default {
 
       api.deleteUser(this.id).then(location => {
         this.$router.push({ path: '/users' })
-        this.$store.commit('showSuccess', 'User deleted!')
+        this.$store.commit('showSuccess', this.$t('settings.userDeleted'))
       }).catch(e => {
         this.$store.commit('showError', e)
       })
@@ -193,10 +192,10 @@ export default {
       event.preventDefault()
       let user = this.parseForm()
 
-      if (this.$route.path === '/users/new') {
+      if (this.$route.path === '/settings/users/new') {
         api.newUser(user).then(location => {
           this.$router.push({ path: location })
-          this.$store.commit('showSuccess', 'User created!')
+          this.$store.commit('showSuccess', this.$t('settings.userCreated'))
         }).catch(e => {
           this.$store.commit('showError', e)
         })
@@ -205,7 +204,7 @@ export default {
       }
 
       api.updateUser(user).then(location => {
-        this.$store.commit('showSuccess', 'User updated!')
+        this.$store.commit('showSuccess', this.$t('settings.userUpdated'))
       }).catch(e => {
         this.$store.commit('showError', e)
       })
@@ -269,7 +268,3 @@ export default {
   }
 }
 </script>
-
-<style>
-
-</style>

assets/src/components/settings/Users.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="dashboard">
-    <h1>Users <router-link to="/users/new"><button>New</button></router-link></h1>
+    <h1>{{ $t('settings.users') }} <router-link to="/settings/users/new"><button>{{ $t('buttons.new') }}</button></router-link></h1>
 
     <table>
       <tr>
-        <th>Username</th>
+        <th>{{ $t('settings.username') }}</th>
-        <th>Admin</th>
+        <th>{{ $t('settings.admin') }}</th>
-        <th>Scope</th>
+        <th>{{ $t('settings.scope') }}</th>
         <th></th>
       </tr>
 

assets/src/i18n/en.json

@@ -18,7 +18,11 @@
     "upload": "Upload",
     "cancel": "Cancel",
     "create": "Create",
+    "close": "Close",
     "reportIssue": "Report Issue",
+    "update": "Update",
+    "save": "Save",
+    "new": "New",
     "ok": "OK"
   },
   "errors": {
@@ -39,6 +43,15 @@
     "multipleSelectionEnabled": "Multiple selection enabled",
     "closePreview": "Close preview"
   },
+  "sidebar": {
+    "myFiles": "My files",
+    "newFolder": "New folder",
+    "newFile": "New file",
+    "settings": "Settings",
+    "logout": "Logout",
+    "servedWith": "Served with",
+    "help": "Help"
+  },
   "prompts": {
     "copy": "Copy",
     "copyMessage": "Choose the place to copy your files:",
@@ -78,5 +91,44 @@
     },
     "click": "select file or directory",
     "doubleClick": "open a file or directory"
+  },
+  "settings": {
+    "globalSettings": "Global Settings",
+    "profileSettings": "Profile Settings",
+    "userManagement": "User Management",
+    "goTo": "Go to",
+    "commands": "Commands",
+    "commandsHelp": "Here you can set commands that are executed in the named events. You write one command per line. If the event is related to files, such as before and after saving, the environment variable \"file\" will be available with the path of the file.",
+    "commandsUpdated": "Commands updated!",
+    "pluginsUpdated": "Plugins settings updated!",
+    "changePassword": "Change Password",
+    "newPassword": "Your new password",
+    "newPasswordConfirm": "Confirm your new password",
+    "customStylesheet": "Custom Stylesheet",
+    "newUser": "New User",
+    "user": "User",
+    "users": "Users",
+    "username": "Username",
+    "password": "Password",
+    "scope": "Scope",
+    "admin": "Admin",
+    "permissions": "Permissions",
+    "permissionsHelp": "You can set the user to be an administrator or choose the permissions individually. If you select \"Administrator\", all of the other options will be automatically checked. The management of users remains a privilege of an administrator.",
+    "administrator": "Administrator",
+    "allowNew": "Create new files and directories",
+    "allowEdit": "Edit, rename and delete files or directories.",
+    "allowCommands": "Execute commands",
+    "userCommands": "Commands",
+    "userCommandsHelp": "A space separated list with the available commands for this user. Example:",
+    "rules": "Rules",
+    "rulesHelp1": "Here you can define a set of allow and disallow rules for this specific user. The blocked files won't show up in the listings and they won't be accessible to the user. We support regex and paths relative to the user's scope.",
+    "rulesHelp2": "Each rule goes in one different line and must start with the keyword {0} or {1}. Then you should write {2} if you are using a regular expression and then the expression or the path.",
+    "examples": "Examples",
+    "ruleExample1": "prevents the access to any dot file (such as .git, .gitignore) in every folder.",
+    "ruleExample2": "blocks the access to the file named Caddyfile on the root of the scope.",
+    "avoidChanges": "(leave blank to avoid changes)",
+    "userDeleted": "User deleted!",
+    "userCreated": "User created!",
+    "userUpdated": "User updated!"
   }
 }