From d884330f625124182487c1998518548a46bc70b8 Mon Sep 17 00:00:00 2001 From: Philipp Schosteritsch Date: Tue, 4 Jul 2023 16:47:29 +0200 Subject: [PATCH] committing implementation --- web/package.json | 97 ++++----- web/src/App.vue | 48 ++--- web/src/components/ChangePasswordForm.vue | 4 +- web/src/components/EditDialog.vue | 2 +- web/src/components/EditViewsForm.vue | 4 +- web/src/components/EnvironmentForm.vue | 15 +- web/src/components/InventoryForm.vue | 24 +-- web/src/components/KeyForm.vue | 31 ++- web/src/components/NewTaskDialog.vue | 6 +- web/src/components/ObjectRefsDialog.vue | 5 +- web/src/components/ObjectRefsView.vue | 2 +- web/src/components/ProjectForm.vue | 14 +- web/src/components/RepositoryForm.vue | 26 +-- web/src/components/SurveyVars.vue | 22 +- web/src/components/TableSettingsSheet.vue | 2 +- web/src/components/TaskForm.vue | 31 ++- web/src/components/TaskList.vue | 20 +- web/src/components/TaskLogView.vue | 8 +- web/src/components/TeamMemberForm.vue | 6 +- web/src/components/TemplateForm.vue | 89 ++++---- web/src/components/UserForm.vue | 20 +- web/src/event-bus.js | 3 +- web/src/lang/en.js | 234 ++++++++++++++++++++++ web/src/lang/fr.js | 230 +++++++++++++++++++++ web/src/lang/index.js | 8 + web/src/main.js | 4 +- web/src/plugins/i18.js | 12 ++ web/src/views/Auth.vue | 33 +-- web/src/views/Users.vue | 24 +-- web/src/views/project/Activity.vue | 14 +- web/src/views/project/Environment.vue | 16 +- web/src/views/project/History.vue | 20 +- web/src/views/project/Inventory.vue | 20 +- web/src/views/project/Keys.vue | 18 +- web/src/views/project/New.vue | 4 +- web/src/views/project/Repositories.vue | 20 +- web/src/views/project/Settings.vue | 19 +- web/src/views/project/Team.vue | 22 +- web/src/views/project/TemplateView.vue | 29 +-- web/src/views/project/Templates.vue | 35 ++-- 40 files changed, 860 insertions(+), 381 deletions(-) create mode 100644 web/src/lang/en.js create mode 100644 web/src/lang/fr.js create mode 100644 web/src/lang/index.js create mode 100644 web/src/plugins/i18.js diff --git a/web/package.json b/web/package.json index e5b411bf6..1ad478fc2 100644 --- a/web/package.json +++ b/web/package.json @@ -1,48 +1,49 @@ -{ - "name": "web", - "version": "0.1.0", - "private": true, - "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "test:unit": "vue-cli-service test:unit", - "lint": "vue-cli-service lint" - }, - "dependencies": { - "@mdi/font": "^5.9.55", - "ansi-to-html": "^0.7.2", - "axios": "^0.21.4", - "core-js": "^3.23.2", - "moment": "^2.29.3", - "vue": "^2.6.14", - "vue-codemirror": "^4.0.6", - "vue-router": "^3.5.4", - "vuedraggable": "^2.24.3", - "vuetify": "^2.6.6" - }, - "devDependencies": { - "@vue/cli-plugin-babel": "^5.0.6", - "@vue/cli-plugin-eslint": "^5.0.6", - "@vue/cli-plugin-router": "^5.0.6", - "@vue/cli-plugin-unit-mocha": "^5.0.6", - "@vue/cli-service": "^5.0.6", - "@vue/eslint-config-airbnb": "^6.0.0", - "@vue/test-utils": "^1.3.0", - "babel-eslint": "^10.1.0", - "chai": "^4.3.6", - "eslint": "^7.32.0", - "eslint-plugin-import": "^2.26.0", - "eslint-plugin-vue": "^9.1.1", - "eslint-plugin-vuejs-accessibility": "^1.2.0", - "glob-parent": ">=5.1.2", - "nanoid": ">=3.1.31", - "nyc": "^15.1.0", - "sass": "~1.32.12", - "sass-loader": "^13.0.0", - "stylus": "^0.54.8", - "stylus-loader": "^3.0.2", - "vue-cli-plugin-vuetify": "~2.0.7", - "vue-template-compiler": "^2.6.14", - "vuetify-loader": "^1.8.0" - } -} +{ + "name": "web", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "test:unit": "vue-cli-service test:unit", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "@mdi/font": "^5.9.55", + "ansi-to-html": "^0.7.2", + "axios": "^0.21.4", + "core-js": "^3.23.2", + "moment": "^2.29.3", + "vue": "^2.6.14", + "vue-i18n": "^8.18.2", + "vue-codemirror": "^4.0.6", + "vue-router": "^3.5.4", + "vuedraggable": "^2.24.3", + "vuetify": "^2.6.6" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^5.0.6", + "@vue/cli-plugin-eslint": "^5.0.6", + "@vue/cli-plugin-router": "^5.0.6", + "@vue/cli-plugin-unit-mocha": "^5.0.6", + "@vue/cli-service": "^5.0.6", + "@vue/eslint-config-airbnb": "^6.0.0", + "@vue/test-utils": "^1.3.0", + "babel-eslint": "^10.1.0", + "chai": "^4.3.6", + "eslint": "^7.32.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-vue": "^9.1.1", + "eslint-plugin-vuejs-accessibility": "^1.2.0", + "glob-parent": ">=5.1.2", + "nanoid": ">=3.1.31", + "nyc": "^15.1.0", + "sass": "~1.32.12", + "sass-loader": "^13.0.0", + "stylus": "^0.54.8", + "stylus-loader": "^3.0.2", + "vue-cli-plugin-vuetify": "~2.0.7", + "vue-template-compiler": "^2.6.14", + "vuetify-loader": "^1.8.0" + } +} diff --git a/web/src/App.vue b/web/src/App.vue index edaa75212..98a5b4b43 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -3,7 +3,7 @@ @@ -22,7 +22,7 @@ @@ -54,7 +54,7 @@ >{{ template ? template.name : null }} mdi-chevron-right - Task #{{ task ? task.id : null }} + {{ $t('task', {expr: task ? task.id : null}) }} @@ -73,7 +73,7 @@ diff --git a/web/src/components/EnvironmentForm.vue b/web/src/components/EnvironmentForm.vue index 3b63330b2..6befbd386 100644 --- a/web/src/components/EnvironmentForm.vue +++ b/web/src/components/EnvironmentForm.vue @@ -13,33 +13,33 @@ - Extra variables + {{ $t('extraVariables') }} - Environment variables + {{ $t('environmentVariables') }} - Environment and extra variables must be valid JSON. - Example: + {{ $t('environmentAndExtraVariablesMustBeValidJsonExample') }} 
{
   "var_available_in_playbook_1": 1245,
   "var_available_in_playbook_2": "test"
diff --git a/web/src/components/InventoryForm.vue b/web/src/components/InventoryForm.vue
index 45a534ec5..9bba99fce 100644
--- a/web/src/components/InventoryForm.vue
+++ b/web/src/components/InventoryForm.vue
@@ -13,26 +13,26 @@
 
     
 
     
 
     
 
     
-      Static inventory example:
+      {{ $t('staticInventoryExample') }}
       
[website]
 172.18.8.40
 172.18.8.41

@@ -88,7 +88,7 @@
         type="info"
         v-if="item.type === 'static-yaml'"
     >
-      Static YAML inventory example:
+      {{ $t('staticYamlInventoryExample') }}
       
all:
   children:
     website:
diff --git a/web/src/components/KeyForm.vue b/web/src/components/KeyForm.vue
index cfb4cf227..5eaeeea7d 100644
--- a/web/src/components/KeyForm.vue
+++ b/web/src/components/KeyForm.vue
@@ -14,16 +14,16 @@
 
     
 
     
 
     
@@ -65,15 +65,15 @@
     
 
     
 
@@ -83,8 +83,7 @@
         type="info"
         v-if="item.type === 'none'"
     >
-      Use this type of key for HTTPS repositories and for
-      playbooks which use non-SSH connections.
+      {{ $t('useThisTypeOfKeyForHttpsRepositoriesAndForPlaybook') }}
     
   
 
@@ -97,13 +96,13 @@ export default {
     return {
       inventoryTypes: [{
         id: 'ssh',
-        name: 'SSH Key',
+        name: `${this.$t('keyFormSshKey')}`,
       }, {
         id: 'login_password',
-        name: 'Login with password',
+        name: `${this.$t('keyFormLoginPassword')}`,
       }, {
         id: 'none',
-        name: 'None',
+        name: `${this.$t('keyFormNone')}`,
       }],
     };
   },
diff --git a/web/src/components/NewTaskDialog.vue b/web/src/components/NewTaskDialog.vue
index 9c579cd91..a65a505f5 100644
--- a/web/src/components/NewTaskDialog.vue
+++ b/web/src/components/NewTaskDialog.vue
@@ -1,8 +1,8 @@
 
 
     
           

-            
Credentials to access to the Git repository. It should be:

+            
{{ $t('credentialsToAccessToTheGitRepositoryItShouldBe') }}

             
    
-              
  • SSH if you use Git or SSH URL.
    • 
-              
  • None if you use HTTPS or file URL.
    • 
+              
  • {{ $t('ssh') }} {{ $t('ifYouUseGitOrSshUrl') }}
    • 
+              
  • {{ $t('none') }} {{ $t('ifYouUseHttpsOrFileUrl') }}
    • 
             

           

         
diff --git a/web/src/components/SurveyVars.vue b/web/src/components/SurveyVars.vue
index 3f78ec4dd..5d7fe664a 100644
--- a/web/src/components/SurveyVars.vue
+++ b/web/src/components/SurveyVars.vue
@@ -14,33 +14,33 @@
             v-if="editedVar != null"
           >
             
 
             
 
             
             
             
           
@@ -52,14 +52,14 @@
             text
             @click="editDialog = false"
           >
-            Cancel
+            {{ $t('cancel') }}
           
           
-            {{ editedVarIndex == null ? 'Add' : 'Save' }}
+            {{ editedVarIndex == null ? $t('add') : $t('save') }}
           
         
       
@@ -73,7 +73,7 @@
                          'rgba(200, 200, 200, 0.38)' :
                          'rgba(0, 0, 0, 0.38)'
                      }">
-      Survey Variables
+      {{ $t('surveyVariables') }}
       
         
         
-          + Add variable
+          + {{ $t('addVariable') }}
         
       
     
diff --git a/web/src/components/TableSettingsSheet.vue b/web/src/components/TableSettingsSheet.vue
index 90826bfb6..1aa8e7a1f 100644
--- a/web/src/components/TableSettingsSheet.vue
+++ b/web/src/components/TableSettingsSheet.vue
@@ -1,6 +1,6 @@
 
diff --git a/web/src/components/TemplateForm.vue b/web/src/components/TemplateForm.vue
index 743571218..b81fefbcb 100644
--- a/web/src/components/TemplateForm.vue
+++ b/web/src/components/TemplateForm.vue
@@ -19,34 +19,33 @@
       >
         

           

-            Defines start version of your artifact.
-            Each run increments the artifact version.
+            {{ $t('definesStartVersionOfYourArtifactEachRunIncrements') }}
           

           

-            For more information about building, see the
+            {{ $t('forMoreInformationAboutBuildingSeeThe') }}
             Task Template reference.
+            >{{ $t('taskTemplateReference') }}.
           

         

         

           

-            Defines what artifact should be deployed when the task run.
+            {{ $t('definesWhatArtifactShouldBeDeployedWhenTheTaskRun') }}
           

           

-            For more information about deploying, see the
+            {{ $t('forMoreInformationAboutDeployingSeeThe') }}
             Task Template reference.
+            >{{ $t('taskTemplateReference2') }}.
           

         

         

-          
Defines autorun schedule.

+          
{{ $t('definesAutorunSchedule') }}

           

-            For more information about cron, see the
+            {{ $t('forMoreInformationAboutCronSeeThe') }}
             Cron expression format reference.
+            >{{ $t('cronExpressionFormatReference') }}.
           

         

       
@@ -72,7 +71,7 @@
               :key="key"
             >
               {{ TEMPLATE_TYPE_ICONS[key] }}
-              {{ TEMPLATE_TYPE_TITLES[key] }}
+              {{ $t(TEMPLATE_TYPE_TITLES[key]) }}
             
           
 
@@ -80,11 +79,11 @@
             
@@ -92,11 +91,11 @@
             
           
@@ -115,8 +114,8 @@
 
         
 
         
-              I want to run a task by the cron only for for new commits of some repository
+              {{ $t('iWantToRunATaskByTheCronOnlyForForNewCommitsOfSome') }}
             
 
             
 
         
-          Read the
-          docs
-          to learn more about Cron.
+          {{ $t('readThe') }}
+          {{ $t('docs') }}
+          {{ $t('toLearnMoreAboutCron') }}
         
 
         
 
@@ -299,17 +298,11 @@
           v-model="item.arguments"
           :options="cmOptions"
           :disabled="formSaving"
-          placeholder='CLI Args (JSON array). Example:
-[
-  "-i",
-  "@myinventory.sh",
-  "--private-key=/there/id_rsa",
-  "-vvvv"
-]'
+          :placeholder="$t('cliArgsJsonArrayExampleIMyinventoryshPrivatekeythe2')"
         />
 
         
 
diff --git a/web/src/components/UserForm.vue b/web/src/components/UserForm.vue
index 52d049d3f..c001ce548 100644
--- a/web/src/components/UserForm.vue
+++ b/web/src/components/UserForm.vue
@@ -13,45 +13,45 @@
 
     
 
     
 
     
 
     
 
     
 
     
   
 
diff --git a/web/src/event-bus.js b/web/src/event-bus.js
index 0948c2e53..be734930f 100644
--- a/web/src/event-bus.js
+++ b/web/src/event-bus.js
@@ -1,3 +1,4 @@
 import Vue from 'vue';
+import i18n from '@/plugins/i18';
 
-export default new Vue();
+export default new Vue(i18n);
diff --git a/web/src/lang/en.js b/web/src/lang/en.js
new file mode 100644
index 000000000..78e41a8b2
--- /dev/null
+++ b/web/src/lang/en.js
@@ -0,0 +1,234 @@
+export default {
+  incorrectUsrPwd: 'Incorrect login or password',
+  askDeleteUser: 'Do you really want to delete this user?',
+  askDeleteTemp: 'Do you really want to delete this template?',
+  askDeleteEnv: 'Do you really want to delete this environment?',
+  askDeleteInv: 'Do you really want to delete this inventor?',
+  askDeleteKey: 'Do you really want to delete this key?',
+  askDeleteRepo: 'Do you really want to delete this repository?',
+  askDeleteProj: 'Do you really want to delete this project?',
+  askDeleteTMem: 'Do you really want to delete this team member?',
+  edit: 'Edit',
+  nnew: 'New',
+  keyFormSshKey: 'SSH Key',
+  keyFormLoginPassword: 'Login with password',
+  keyFormNone: 'None',
+  incorrectUrl: 'Incorrect URL',
+  username: 'Username',
+  username_required: 'Username is required',
+  dashboard: 'Dashboard',
+  history: 'History',
+  activity: 'Activity',
+  settings: 'Settings',
+  signIn: 'Sign In',
+  password: 'Password',
+  changePassword: 'Change password',
+  editUser: 'Edit User',
+  newProject: 'New Project',
+  close: 'Close',
+  newProject2: 'New project...',
+  demoMode: 'DEMO MODE',
+  task: 'Task #{expr}',
+  youCanRunAnyTasks: 'You can run any tasks',
+  youHaveReadonlyAccess: 'You have read-only access',
+  taskTemplates: 'Task Templates',
+  inventory: 'Inventory',
+  environment: 'Environment',
+  keyStore: 'Key Store',
+  repositories: 'Repositories',
+  darkMode: 'Dark Mode',
+  team: 'Team',
+  users: 'Users',
+  editAccount: 'Edit Account',
+  signOut: 'Sign Out',
+  error: 'Error',
+  refreshPage: 'Refresh Page',
+  relogin: 'Relogin',
+  howToFixSigninIssues: 'How to fix sign-in issues',
+  firstlyYouNeedAccessToTheServerWhereSemaphoreRunni: 'Firstly, you need access to the server where Semaphore running.',
+  executeTheFollowingCommandOnTheServerToSeeExisting: 'Execute the following command on the server to see existing users:',
+  semaphoreUserList: 'semaphore user list',
+  youCanChangePasswordOfExistingUser: 'You can change password of existing user:',
+  semaphoreUserChangebyloginLoginUser123Password: 'semaphore user change-by-login --login user123 --password {makePasswordExample}',
+  orCreateNewAdminUser: 'Or create new admin user:',
+  close2: 'Close',
+  semaphore: 'SEMAPHORE',
+  dontHaveAccountOrCantSignIn: 'Don\'\'t have account or can\'\'t sign in?',
+  password2: 'Password',
+  cancel: 'Cancel',
+  noViews: 'No views',
+  addView: 'Add view',
+  editEnvironment: 'Edit Environment',
+  deleteEnvironment: 'Delete environment',
+  environment2: 'Environment',
+  newEnvironment: 'New Environment',
+  environmentName: 'Environment Name',
+  extraVariables: 'Extra variables',
+  enterExtraVariablesJson: 'Enter extra variables JSON...',
+  environmentVariables: 'Environment variables',
+  enterEnvJson: 'Enter env JSON...',
+  environmentAndExtraVariablesMustBeValidJsonExample: 'Environment and extra variables must be valid JSON. Example:',
+  dashboard2: 'Dashboard',
+  ansibleSemaphore: 'Ansible Semaphore',
+  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'We\'\'re sorry but <%= htmlWebpackPlugin.options.title %> doesn\'\'t work properly without JavaScript enabled. Please enable it to continue.',
+  deleteInventory: 'Delete inventory',
+  newInventory: 'New Inventory',
+  name: 'Name',
+  userCredentials: 'User Credentials',
+  sudoCredentialsOptional: 'Sudo Credentials (Optional)',
+  type: 'Type',
+  pathToInventoryFile: 'Path to Inventory file',
+  enterInventory: 'Enter inventory...',
+  staticInventoryExample: 'Static inventory example:',
+  staticYamlInventoryExample: 'Static YAML inventory example:',
+  keyName: 'Key Name',
+  loginOptional: 'Login (Optional)',
+  usernameOptional: 'Username (Optional)',
+  privateKey: 'Private Key',
+  override: 'Override',
+  useThisTypeOfKeyForHttpsRepositoriesAndForPlaybook: 'Use this type of key for HTTPS repositories and for playbooks which use non-SSH connections.',
+  deleteKey: 'Delete key',
+  newKey: 'New Key',
+  create: 'Create',
+  newTask: 'New Task',
+  cantDeleteThe: 'Can\'\'t delete the {objectTitle}',
+  theCantBeDeletedBecauseItUsedByTheResourcesBelow: 'The {objectTitle} can\'\'t be deleted because it used by the resources below',
+  projectName: 'Project Name',
+  allowAlertsForThisProject: 'Allow alerts for this project',
+  telegramChatIdOptional: 'Telegram Chat ID (Optional)',
+  maxNumberOfParallelTasksOptional: 'Max number of parallel tasks (Optional)',
+  deleteRepository: 'Delete repository',
+  newRepository: 'New Repository',
+  urlOrPath: 'URL or path',
+  absPath: 'abs. path',
+  branch: 'Branch',
+  accessKey: 'Access Key',
+  credentialsToAccessToTheGitRepositoryItShouldBe: 'Credentials to access to the Git repository. It should be:',
+  ifYouUseGitOrSshUrl: 'if you use Git or SSH URL.',
+  ifYouUseHttpsOrFileUrl: 'if you use HTTPS or file URL.',
+  none: 'None',
+  ssh: 'SSH',
+  deleteProject: 'Delete project',
+  save: 'Save',
+  deleteProject2: 'Delete Project',
+  onceYouDeleteAProjectThereIsNoGoingBackPleaseBeCer: 'Once you delete a project, there is no going back. Please be certain.',
+  name2: 'Name *',
+  title: 'Title *',
+  description: 'Description',
+  required: 'Required',
+  key: '{expr}',
+  surveyVariables: 'Survey Variables',
+  addVariable: 'Add variable',
+  columns: 'Columns',
+  buildVersion: 'Build Version',
+  messageOptional: 'Message (Optional)',
+  debug: 'Debug',
+  dryRun: 'Dry Run',
+  diff: 'Diff',
+  advanced: 'Advanced',
+  hide: 'Hide',
+  pleaseAllowOverridingCliArgumentInTaskTemplateSett: 'Please allow overriding CLI argument in Task Template settings',
+  cliArgsJsonArrayExampleIMyinventoryshPrivatekeythe: 'CLI Args (JSON array). Example: [ "-i", "@myinventory.sh", "--private-key=/there/id_rsa", "-vvvv" ]',
+  started: 'Started',
+  author: 'Author',
+  duration: 'Duration',
+  stop: 'Stop',
+  deleteTeamMember: 'Delete team member',
+  team2: 'Team',
+  newTeamMember: 'New Team Member',
+  user: 'User',
+  administrator: 'Administrator',
+  definesStartVersionOfYourArtifactEachRunIncrements: 'Defines start version of your artifact. Each run increments the artifact version.',
+  forMoreInformationAboutBuildingSeeThe: 'For more information about building, see the',
+  taskTemplateReference: 'Task Template reference',
+  definesWhatArtifactShouldBeDeployedWhenTheTaskRun: 'Defines what artifact should be deployed when the task run.',
+  forMoreInformationAboutDeployingSeeThe: 'For more information about deploying, see the',
+  taskTemplateReference2: 'Task Template reference',
+  definesAutorunSchedule: 'Defines autorun schedule.',
+  forMoreInformationAboutCronSeeThe: 'For more information about cron, see the',
+  cronExpressionFormatReference: 'Cron expression format reference',
+  startVersion: 'Start Version',
+  example000: 'Example: 0.0.0',
+  buildTemplate: 'Build Template',
+  autorun: 'Autorun',
+  playbookFilename: 'Playbook Filename *',
+  exampleSiteyml: 'Example: site.yml',
+  inventory2: 'Inventory *',
+  repository: 'Repository *',
+  environment3: 'Environment *',
+  vaultPassword: 'Vault Password',
+  vaultPassword2: 'Vault Password',
+  view: 'View',
+  cron: 'Cron',
+  iWantToRunATaskByTheCronOnlyForForNewCommitsOfSome: 'I want to run a task by the cron only for for new commits of some repository',
+  repository2: 'Repository',
+  cronChecksNewCommitBeforeRun: 'Cron checks new commit before run',
+  readThe: 'Read the',
+  toLearnMoreAboutCron: 'to learn more about Cron.',
+  suppressSuccessAlerts: 'Suppress success alerts',
+  cliArgsJsonArrayExampleIMyinventoryshPrivatekeythe2: 'CLI Args (JSON array). Example: [ "-i", "@myinventory.sh", "--private-key=/there/id_rsa", "-vvvv" ]',
+  allowCliArgsInTask: 'Allow CLI args in Task',
+  docs: 'docs',
+  editViews: 'Edit Views',
+  newTemplate: 'New template',
+  taskTemplates2: 'Task Templates',
+  all: 'All',
+  notLaunched: 'Not launched',
+  by: 'by {user_name} {formatDate}',
+  editTemplate: 'Edit Template',
+  newTemplate2: 'New Template',
+  deleteTemplate: 'Delete template',
+  playbook: 'Playbook',
+  email: 'Email',
+  adminUser: 'Admin user',
+  sendAlerts: 'Send alerts',
+  deleteUser: 'Delete user',
+  newUser: 'New User',
+  re: 'Re{getActionButtonTitle}',
+  teamMember: '{expr} Team Member',
+  taskId: 'Task ID',
+  version: 'Version',
+  status: 'Status',
+  start: 'Start',
+  actions: 'Actions',
+  alert: 'Alert',
+  admin: 'Admin',
+  external: 'External',
+  time: 'Time',
+  path: 'Path',
+  gitUrl: 'Git URL',
+  sshKey: 'SSH Key',
+  lastTask: 'Last Task',
+  task2: 'Task',
+  build: 'Build',
+  deploy: 'Deploy',
+  run: 'Run',
+  add: 'Add',
+  password_required: 'Password is required',
+  name_required: 'Name is required',
+  user_credentials_required: 'User credentials are required',
+  type_required: 'Type is required',
+  path_required: 'Path to Inventory file is required',
+  private_key_required: 'Private key is required',
+  project_name_required: 'Project name is required',
+  repository_required: 'Repository is required',
+  branch_required: 'Branch is required',
+  key_required: 'Key is required',
+  user_required: 'User is required',
+  build_version_required: 'Build version is required',
+  title_required: 'Title is required',
+  isRequired: 'is required',
+  mustBeInteger: 'Must be integer',
+  mustBe0OrGreater: 'Must be 0 or greater',
+  start_version_required: 'Start version is required',
+  playbook_filename_required: 'Playbook filename is required',
+  inventory_required: 'Inventory is required',
+  environment_required: 'Environment is required',
+  email_required: 'Email is required',
+  build_template_required: 'Build template is required',
+  Task: 'Task',
+  Build: 'Build',
+  Deploy: 'Deploy',
+  Run: 'Run',
+
+};
diff --git a/web/src/lang/fr.js b/web/src/lang/fr.js
new file mode 100644
index 000000000..66ef7c829
--- /dev/null
+++ b/web/src/lang/fr.js
@@ -0,0 +1,230 @@
+export default {
+  incorrectUsrPwd: 'Identifiant ou mot de passe incorrect',
+  askDeleteUser: 'Voulez-vous vraiment supprimer cet utilisateur ?',
+  askDeleteTemp: 'Voulez-vous vraiment supprimer ce modèle ?',
+  askDeleteEnv: 'Voulez-vous vraiment supprimer cet environnement ?',
+  askDeleteInv: 'Voulez-vous vraiment supprimer cet inventeur ?',
+  askDeleteKey: 'Voulez-vous vraiment supprimer cette clé ?',
+  askDeleteRepo: 'Voulez-vous vraiment supprimer ce dépôt ?',
+  askDeleteProj: 'Voulez-vous vraiment supprimer ce projet ?',
+  askDeleteTMem: 'Voulez-vous vraiment supprimer ce membre de l\'équipe ?',
+  edit: 'Modifier',
+  nnew: 'Nouveau',
+  keyFormSshKey: 'Clé SSH',
+  keyFormLoginPassword: 'Connectez-vous avec mot de passe',
+  keyFormNone: 'Aucune',
+  incorrectUrl: 'URL incorrecte',
+  username: 'Nom d\'utilisateur',
+  username_required: 'Le nom d\'utilisateur est requis',
+  dashboard: 'Tableau de bord',
+  history: 'Historique',
+  activity: 'Activité',
+  settings: 'Paramètres',
+  signIn: 'Se connecter',
+  password: 'Mot de passe',
+  changePassword: 'Changer le mot de passe',
+  editUser: 'Modifier l\'utilisateur',
+  newProject: 'Nouveau projet',
+  close: 'Fermer',
+  newProject2: 'Nouveau projet...',
+  demoMode: 'MODE DE DÉMONSTRATION',
+  task: 'Tâche n°{expr}',
+  youCanRunAnyTasks: 'Vous pouvez exécuter n\'importe quelle tâche',
+  youHaveReadonlyAccess: 'Vous avez un accès en lecture seule',
+  taskTemplates: 'Modèles de tâches',
+  inventory: 'Inventaire',
+  environment: 'Environnement',
+  keyStore: 'Magasin de clés',
+  repositories: 'Dépôts',
+  darkMode: 'Mode sombre',
+  team: 'Équipe',
+  users: 'Utilisateurs',
+  editAccount: 'Modifier le compte',
+  signOut: 'Déconnexion',
+  error: 'Erreur',
+  refreshPage: 'Actualiser la page',
+  relogin: 'Se reconnecter',
+  howToFixSigninIssues: 'Comment résoudre les problèmes de connexion',
+  firstlyYouNeedAccessToTheServerWhereSemaphoreRunni: 'Tout d\'abord, vous avez besoin d\'accéder au serveur où Semaphore est en cours d\'exécution.',
+  executeTheFollowingCommandOnTheServerToSeeExisting: 'Exécutez la commande suivante sur le serveur pour voir les utilisateurs existants :',
+  semaphoreUserList: 'liste d\'utilisateurs Semaphore',
+  youCanChangePasswordOfExistingUser: 'Vous pouvez changer le mot de passe de l\'utilisateur existant :',
+  semaphoreUserChangebyloginLoginUser123Password: 'semaphore user change-by-login --login user123 --password {makePasswordExample}',
+  orCreateNewAdminUser: 'Ou créer un nouvel utilisateur administrateur :',
+  close2: 'Fermer',
+  semaphore: 'SEMAPHORE',
+  dontHaveAccountOrCantSignIn: 'Vous n\'avez pas de compte ou vous ne pouvez pas vous connecter ?',
+  password2: 'Mot de passe',
+  cancel: 'Annuler',
+  noViews: 'Aucune vue',
+  addView: 'Ajouter une vue',
+  editEnvironment: 'Modifier l\'environnement',
+  deleteEnvironment: 'Supprimer l\'environnement',
+  environment2: 'Environnement',
+  newEnvironment: 'Nouvel environnement',
+  environmentName: 'Nom de l\'environnement',
+  extraVariables: 'Variables supplémentaires',
+  enterExtraVariablesJson: 'Saisissez JSON pour les variables supplémentaires...',
+  environmentVariables: 'Variables d\'environnement',
+  enterEnvJson: 'Saisissez JSON pour l\'environnement...',
+  environmentAndExtraVariablesMustBeValidJsonExample: 'L\'environnement et les variables supplémentaires doivent être un JSON valide. Exemple :',
+  dashboard2: 'Tableau de bord',
+  ansibleSemaphore: 'Semaphore Ansible',
+  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Nous sommes désolés, mais <%= htmlWebpackPlugin.options.title %> ne fonctionne pas correctement sans JavaScript. Veuillez l\'activer pour continuer.',
+  deleteInventory: 'Supprimer l\'inventaire',
+  newInventory: 'Nouvel inventaire',
+  name: 'Nom',
+  userCredentials: 'Identifiants utilisateur',
+  sudoCredentialsOptional: 'Identifiants Sudo (facultatif)',
+  type: 'Type',
+  pathToInventoryFile: 'Chemin vers le fichier d\'inventaire',
+  enterInventory: 'Entrer l\'inventaire...',
+  staticInventoryExample: 'Exemple d\'inventaire statique:',
+  staticYamlInventoryExample: 'Exemple d\'inventaire YAML statique:',
+  keyName: 'Nom de la clé',
+  loginOptional: 'Connexion (facultatif)',
+  usernameOptional: 'Nom d\'utilisateur (facultatif)',
+  privateKey: 'Clé privée',
+  override: 'Remplacer',
+  useThisTypeOfKeyForHttpsRepositoriesAndForPlaybook: 'Utilisez ce type de clé pour les référentiels HTTPS et pour les playbooks qui utilisent des connexions non-SSH.',
+  deleteKey: 'Supprimer la clé',
+  newKey: 'Nouvelle clé',
+  create: 'Créer',
+  newTask: 'Nouvelle tâche',
+  cantDeleteThe: 'Impossible de supprimer {objectTitle}',
+  theCantBeDeletedBecauseItUsedByTheResourcesBelow: 'Le {objectTitle} ne peut pas être supprimé car il est utilisé par les ressources ci-dessous',
+  projectName: 'Nom du projet',
+  allowAlertsForThisProject: 'Autoriser les alertes pour ce projet',
+  telegramChatIdOptional: 'Identifiant de chat Telegram (facultatif)',
+  maxNumberOfParallelTasksOptional: 'Nombre maximal de tâches en parallèle (facultatif)',
+  deleteRepository: 'Supprimer le référentiel',
+  newRepository: 'Nouveau référentiel',
+  urlOrPath: 'URL ou chemin',
+  absPath: 'chemin absolu',
+  branch: 'Branche',
+  accessKey: 'Clé d\'accès',
+  credentialsToAccessToTheGitRepositoryItShouldBe: 'Identifiants pour accéder au référentiel Git. Il doit être :',
+  ifYouUseGitOrSshUrl: 'si vous utilisez une URL Git ou SSH.',
+  ifYouUseHttpsOrFileUrl: 'si vous utilisez une URL HTTPS ou fichier.',
+  none: 'Aucun',
+  ssh: 'SSH',
+  deleteProject: 'Supprimer le projet',
+  save: 'Enregistrer',
+  deleteProject2: 'Supprimer le projet',
+  onceYouDeleteAProjectThereIsNoGoingBackPleaseBeCer: 'Une fois que vous avez supprimé un projet, il n\'y a pas de retour en arrière possible. Veuillez être certain.',
+  name2: 'Nom *',
+  title: 'Titre *',
+  description: 'Description',
+  required: 'Requis',
+  key: '{expr}',
+  surveyVariables: 'Variables d\'enquête',
+  addVariable: 'Ajouter une variable',
+  columns: 'Colonnes',
+  buildVersion: 'Version de construction',
+  messageOptional: 'Message (facultatif)',
+  debug: 'Debug',
+  dryRun: 'Simulation',
+  diff: 'Différence',
+  advanced: 'Avancé',
+  hide: 'Cacher',
+  pleaseAllowOverridingCliArgumentInTaskTemplateSett: 'Veuillez autoriser le remplacement de l\'argument CLI dans les paramètres du modèle de tâche',
+  cliArgsJsonArrayExampleIMyinventoryshPrivatekeythe: 'Arguments CLI (tableau JSON). Exemple: [ "-i", "@myinventory.sh", "--private-key=/there/id_rsa", "-vvvv" ]',
+  started: 'Démarré',
+  author: 'Auteur',
+  duration: 'Durée',
+  stop: 'Arrêter',
+  deleteTeamMember: 'Supprimer un membre de l\'équipe',
+  team2: 'Équipe',
+  newTeamMember: 'Nouveau membre de l\'équipe',
+  user: 'Utilisateur',
+  administrator: 'Administrateur',
+  definesStartVersionOfYourArtifactEachRunIncrements: 'Définit la version de départ de votre artefact. Chaque exécution incrémente la version de l\'artefact.',
+  forMoreInformationAboutBuildingSeeThe: 'Pour plus d\'informations sur la construction, voir la',
+  taskTemplateReference: 'Référence du modèle de tâche',
+  definesWhatArtifactShouldBeDeployedWhenTheTaskRun: 'Définit l\'artefact qui doit être déployé lorsque la tâche est exécutée.',
+  forMoreInformationAboutDeployingSeeThe: 'Pour plus d\'informations sur le déploiement, voir la',
+  taskTemplateReference2: 'Référence du modèle de tâche',
+  definesAutorunSchedule: 'Définit le calendrier d\'exécution automatique.',
+  forMoreInformationAboutCronSeeThe: 'Pour plus d\'informations sur Cron, voir la',
+  cronExpressionFormatReference: 'Référence du format d\'expression Cron',
+  startVersion: 'Version de départ',
+  example000: 'Exemple: 0.0.0',
+  buildTemplate: 'Modèle de construction',
+  autorun: 'Exécution automatique',
+  playbookFilename: 'Nom de fichier du playbook *',
+  exampleSiteyml: 'Exemple: site.yml',
+  inventory2: 'Inventaire *',
+  repository: 'Dépôt *',
+  environment3: 'Environnement *',
+  vaultPassword: 'Mot de passe du coffre-fort',
+  vaultPassword2: 'Mot de passe du coffre-fort',
+  view: 'Vue',
+  cron: 'Cron',
+  iWantToRunATaskByTheCronOnlyForForNewCommitsOfSome: 'Je veux exécuter une tâche avec le cron uniquement pour les nouveaux commits d\'un dépôt spécifique',
+  repository2: 'Dépôt',
+  cronChecksNewCommitBeforeRun: 'Cron vérifie les nouveaux commits avant l\'exécution',
+  readThe: 'Lire la',
+  toLearnMoreAboutCron: 'pour en savoir plus sur Cron.',
+  suppressSuccessAlerts: 'Supprimer les alertes de réussite',
+  cliArgsJsonArrayExampleIMyinventoryshPrivatekeythe2: 'Arguments CLI (tableau JSON). Exemple: [ "-i", "@myinventory.sh", "--private-key=/there/id_rsa", "-vvvv" ]',
+  allowCliArgsInTask: 'Autoriser les arguments CLI dans la tâche',
+  docs: 'docs',
+  editViews: 'Modifier les vues',
+  newTemplate: 'Nouveau modèle',
+  taskTemplates2: 'Modèles de tâches',
+  all: 'Tous',
+  notLaunched: 'Non lancé',
+  by: 'par {user_name} {formatDate}',
+  editTemplate: 'Modifier le modèle',
+  newTemplate2: 'Nouveau modèle',
+  deleteTemplate: 'Supprimer le modèle',
+  playbook: 'Playbook',
+  email: 'Email',
+  adminUser: 'Utilisateur admin',
+  sendAlerts: 'Envoyer des alertes',
+  deleteUser: 'Supprimer l\'utilisateur',
+  newUser: 'Nouvel utilisateur',
+  re: 'Re{getActionButtonTitle}',
+  teamMember: '{expr} Membre de l\'équipe',
+  taskId: 'ID de tâche',
+  version: 'Version',
+  status: 'Statut',
+  start: 'Début',
+  actions: 'Actions',
+  alert: 'Alerte',
+  admin: 'Administrateur',
+  external: 'Externe',
+  time: 'Temps',
+  path: 'Chemin',
+  gitUrl: 'URL Git',
+  sshKey: 'Clé SSH',
+  lastTask: 'Dernière tâche',
+  task2: 'Tâche',
+  add: 'Ajouter',
+  password_required: 'Le mot de passe est requis',
+  name_required: 'Le nom est requis',
+  user_credentials_required: 'Les informations d\'identification de l\'utilisateur sont requises',
+  type_required: 'Le type est requis',
+  path_required: 'Le chemin vers le fichier d\'inventaire est requis',
+  private_key_required: 'La clé privée est requise',
+  project_name_required: 'Le nom du projet est requis',
+  repository_required: 'Le dépôt est requis',
+  branch_required: 'La branche est requise',
+  key_required: 'La clé est requise',
+  user_required: 'L\'utilisateur est requis',
+  build_version_required: 'La version de construction est requise',
+  title_required: 'Le titre est requis',
+  isRequired: 'est requis',
+  mustBeInteger: 'Doit être un entier',
+  mustBe0OrGreater: 'Doit être égal à 0 ou supérieur',
+  start_version_required: 'La version de départ est requise',
+  playbook_filename_required: 'Le nom de fichier du playbook est requis',
+  inventory_required: 'L\'inventaire est requis',
+  environment_required: 'L\'environnement est requis',
+  email_required: 'L\'adresse e-mail est requise',
+  build_template_required: 'Le modèle de construction est requis',
+  Task: 'Tâche',
+  Build: 'Construire',
+  Deploy: 'Déployer',
+  Run: 'Exécuter',
+};
diff --git a/web/src/lang/index.js b/web/src/lang/index.js
new file mode 100644
index 000000000..49a242554
--- /dev/null
+++ b/web/src/lang/index.js
@@ -0,0 +1,8 @@
+const files = require.context('.', false, /\.js$/);
+const messages = {};
+files.keys().forEach((key) => {
+  if (key === './index.js') return;
+  messages[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
+});
+const languages = Object.keys(messages);
+export { messages, languages };
diff --git a/web/src/main.js b/web/src/main.js
index 172b150ed..fd96ddfcc 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -6,13 +6,14 @@ import App from './App.vue';
 import router from './router';
 import vuetify from './plugins/vuetify';
 import './assets/scss/main.scss';
+import i18n from './plugins/i18';
 
 const convert = new Convert();
 
 axios.defaults.baseURL = document.baseURI;
 Vue.config.productionTip = false;
 
-Vue.filter('formatDate', (value) => (value ? moment.utc(String(value)).local(true).fromNow() : '—'));
+Vue.filter('formatDate', (value) => (value ? moment(String(value)).fromNow() : '—'));
 Vue.filter('formatTime', (value) => (value ? moment(String(value)).format('LTS') : '—'));
 Vue.filter('formatLog', (value) => (value ? convert.toHtml(String(value)) : value));
 
@@ -51,5 +52,6 @@ Vue.filter('formatMilliseconds', (value) => {
 new Vue({
   router,
   vuetify,
+  i18n,
   render: (h) => h(App),
 }).$mount('#app');
diff --git a/web/src/plugins/i18.js b/web/src/plugins/i18.js
new file mode 100644
index 000000000..135a4a714
--- /dev/null
+++ b/web/src/plugins/i18.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import { messages } from '../lang';
+
+Vue.use(VueI18n);
+const locale = navigator.language.split('-')[0];
+export default new VueI18n({
+  fallbackLocale: 'en',
+  locale,
+  messages,
+  silentFallbackWarn: true,
+});
diff --git a/web/src/views/Auth.vue b/web/src/views/Auth.vue
index f297ce5b0..28150648f 100644
--- a/web/src/views/Auth.vue
+++ b/web/src/views/Auth.vue
@@ -3,7 +3,7 @@
     
       
         
-          How to fix sign-in issues
+          {{ $t('howToFixSigninIssues') }}
           
           
             mdi-close
@@ -11,10 +11,10 @@
         
         
           

-            Firstly, you need access to the server where Semaphore running.
+            {{ $t('firstlyYouNeedAccessToTheServerWhereSemaphoreRunni') }}
           

           

-            Execute the following command on the server to see existing users:
+            {{ $t('executeTheFollowingCommandOnTheServerToSeeExisting') }}
           

           
-            semaphore user list
+            {{ $t('semaphoreUserList') }}
           
           

-            You can change password of existing user:
+            {{ $t('youCanChangePasswordOfExistingUser') }}
           

           
-            semaphore user change-by-login --login user123 --password {{ makePasswordExample() }}
+            {{ $t('semaphoreUserChangebyloginLoginUser123Password', {makePasswordExample:
+              makePasswordExample()}) }}
           
           

-            Or create new admin user:
+            {{ $t('orCreateNewAdminUser') }}
           

           
-            Close
+            {{ $t('close2') }}
           
         
       
@@ -74,7 +75,7 @@
         v-model="signInFormValid"
         style="width: 300px; height: 300px;"
       >
-        
SEMAPHORE

+        
{{ $t('semaphore') }}

 
         
 
         
-          Sign In
+          {{ $t('signIn') }}
         
 
         

-          Don't have account or can't sign in?
+          {{ $t('dontHaveAccountOrCantSignIn') }}
         

       
     
@@ -183,7 +184,7 @@ export default {
         document.location = document.baseURI;
       } catch (err) {
         if (err.response.status === 401) {
-          this.signInError = 'Incorrect login or password';
+          this.signInError = this.$t('incorrectUsrPwd');
         } else {
           this.signInError = getErrorMessage(err);
         }
diff --git a/web/src/views/Users.vue b/web/src/views/Users.vue
index 1cd8944e3..8b498b514 100644
--- a/web/src/views/Users.vue
+++ b/web/src/views/Users.vue
@@ -3,7 +3,7 @@