add translations

app/app.js

@@ -1,14 +1,30 @@
 import Vue from 'vue';
+import i18n from 'vue-i18n';
+import Header from './components/header.vue';
+import Headlines from './components/headlines.vue';
+import Jumbotron from './components/jumbotron.vue';
 import PasswordGenerator from './components/password-generator.vue';
 import BootstrapHr from './components/bootstrap-hr.vue';
-import LesspassFeatures from './components/lesspass-features.vue';
+import Features from './components/features.vue';
 import Footer from './components/footer.vue';
+import locales from './locales/locales';
+
+var browserLanguage = (navigator.language || navigator.browserLanguage).split('-')[0];
+var lang = browserLanguage in locales ? browserLanguage : 'en';
+
+Vue.use(i18n, {
+    lang: lang,
+    locales: locales
+});
 
 new Vue({
     el: 'body',
     components: {
+        lesspassHeader: Header,
+        lesspassHeadlines: Headlines,
+        lesspassJumbotron: Jumbotron,
         passwordGenerator: PasswordGenerator,
-        lesspassFeatures: LesspassFeatures,
+        lesspassFeatures: Features,
         lesspassFooter: Footer,
         bootstrapHr: BootstrapHr
     }

app/components/lesspass-features.vue → app/components/features.vue

@@ -25,16 +25,15 @@
 </style>
 <template>
     <div class="lesspass-features p-y-3 m-t-2">
-
         <div class="container">
             <div class="col-lg-8 col-lg-offset-2">
-                <h2>Vous devriez utiliser LessPass si :</h2>
+                <h2>{{ $t('you_should_use_lesspass') }} :</h2>
                 <ul>
-                    <li>vous voulez un mot de passe unique pour chaque site</li>
-                    <li>vous aimez l'open source</li>
-                    <li>vous voulez une application qui fonctionne sur ordinateur, smartphone ou tablette.</li>
-                    <li>vous ne voulez pas stocker vos mots de passe sur le cloud</li>
-                    <li>vous voulez vous souvenir que d'un seul mot de passe</li>
+                    <li>{{ $t('unique_password') }}</li>
+                    <li>{{ $t('love_open_source') }}</li>
+                    <li>{{ $t('works_everywhere') }}</li>
+                    <li>{{ $t('no_cloud') }}</li>
+                    <li>{{ $t('only_one_password') }}</li>
                 </ul>
             </div>
         </div>

app/components/footer.vue

@@ -9,8 +9,8 @@
         <div class="container">
             <p>
                 LessPass
-                - réalisé par <a href="http://guillaumevincent.com">Guillaume Vincent</a>
-                - <a href="https://github.com/oslab-fr/lesspass">code source</a>
+                - {{ $t('built_by') }} <a href="http://guillaumevincent.com">Guillaume Vincent</a>
+                - <a href="https://github.com/oslab-fr/lesspass">{{ $t('source_code') }}</a>
             </p>
         </div>
     </footer>

app/components/header.vue

@@ -0,0 +1,23 @@
+<style>
+    #header #logo-link {
+        margin: 0 auto;
+        width: 200px;
+        height: 45px;
+    }
+
+    #header #logo {
+        width: inherit;
+        height: inherit;
+    }
+</style>
+<template>
+    <div id="header">
+        <div class="container text-xs-center">
+            <div id="logo-link">
+                <a href="http://lesspass.com">
+                    <img id="logo" alt="lesspass" class="img-fluid" src="images/logo.png">
+                </a>
+            </div>
+        </div>
+    </div>
+</template>

app/components/headlines.vue

@@ -0,0 +1,12 @@
+<style>
+    #headlines {
+        padding-top: 2em;
+        padding-bottom: 1em;
+    }
+</style>
+<template>
+    <div id="headlines" class="container text-xs-center">
+        <h1 class="blue">{{ $t('headlines_title') }}</h1>
+        <h2>{{ $t('headlines_subtitle') }}</h2>
+    </div>
+</template>

app/components/jumbotron.vue

@@ -0,0 +1,19 @@
+<style>
+
+</style>
+<template>
+    <div class="container">
+        <div class="jumbotron">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="lead">
+                        <a href='https://lesspass.com/'>LessPass</a> {{ $t('what_is_lesspass') }}
+                    </p>
+                    <p class="lead">
+                        <a href='https://lesspass.com/'>LessPass</a> {{ $t('what_is_lesspass2') }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

app/components/password-generator.vue

@@ -5,34 +5,38 @@
         border: 1px solid #434857;
     }
 </style>
+ "Email":"Email",
+        "Password":"Password",
+        "Site": "Web site",
+        "Copy": "Copy"
 
 <template>
     <div class="container">
         <form class="form-inline" id="passwordGenerator">
             <div class="m-t-1">
                 <div class="form-group">
-                    <label class="sr-only" for="email">Adresse email</label>
-                    <input type="email" class="form-control" id="email" placeholder="Email" v-model="email"
+                    <label class="sr-only" for="email">{{ $t('Email') }}</label>
+                    <input type="email" class="form-control" id="email" placeholder="{{ $t('Email') }}" v-model="email"
                            v-on:blur="updateMasterPassword">
                 </div>
                 <div class="form-group">
-                    <label class="sr-only" for="password">Mot de passe</label>
-                    <input type="password" class="form-control" id="password" placeholder="Mot de passe"
+                    <label class="sr-only" for="password">{{ $t('Password') }}</label>
+                    <input type="password" class="form-control" id="password" placeholder="{{ $t('Password') }}"
                            v-model="password" v-on:blur="updateMasterPassword">
                 </div>
                 <div class="form-group">
-                    <label class="sr-only" for="site">Site</label>
-                    <input type="text" class="form-control" id="site" placeholder="Site (ex: facebook)"
+                    <label class="sr-only" for="site">{{ $t('Site') }}</label>
+                    <input type="text" class="form-control" id="site" placeholder="{{ $t('Site_placeholder') }}"
                            v-model="site">
                 </div>
                 <div class="form-group">
-                    <label class="sr-only" for="generatedPassword">Mot de passe unique</label>
+                    <label class="sr-only" for="generatedPassword">{{ $t('Unique_password') }}</label>
                     <div class="input-group">
                         <input type="text" id="generatedPassword" class="form-control" v-model="generatedPassword">
                     <span class="input-group-btn">
                         <button id="copyBtn" data-clipboard-target="#generatedPassword"
                                 class="btn btn-primary" type="button">
-                            Copier
+                            {{ $t('Copy') }}
                         </button>
                     </span>
                     </div>
@@ -41,7 +45,7 @@
             <div class="m-t-1">
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" v-model="showAdvancedOptions"> Options avancées
+                        <input type="checkbox" v-model="showAdvancedOptions"> {{ $t('Advanced_options') }}
                     </label>
                 </div>
             </div>
@@ -49,25 +53,25 @@
                 <div class="form-group">
                     <label class="checkbox-inline">
                         <input type="checkbox" id="lowercase" value="lowercase" v-model="passwordInfo.settings" checked>
-                        minuscules (a-z)
+                        {{ $t('lowercase_options') }}
                     </label>
                     <label class="checkbox-inline">
                         <input type="checkbox" id="uppercase" value="uppercase" v-model="passwordInfo.settings" checked>
-                        MAJUSCULES (A-Z)
+                        {{ $t('uppercase_options') }}
                     </label>
                     <label class="checkbox-inline">
                         <input type="checkbox" id="numbers" value="numbers" v-model="passwordInfo.settings" checked>
-                        nombres (0-9)
+                        {{ $t('numbers_options') }}
                     </label>
                     <label class="checkbox-inline">
                         <input type="checkbox" id="symbols" value="symbols" v-model="passwordInfo.settings" checked>
-                        caractères spéciaux (@&%?)
+                        {{ $t('symbols_options') }}
                     </label>
                 </div>
             </div>
             <div class="m-t-1" v-if="showAdvancedOptions">
                 <div class="form-group">
-                    <label for="passwordLength">Longueur</label>
+                    <label for="passwordLength">{{ $t('Length') }}</label>
                     <input id="passwordLength" type="range" value="12" min="6" max="64" v-model="passwordInfo.length"
                            class="form-control"> {{ passwordInfo.length }}
                 </div>

app/locales/locales.js

@@ -0,0 +1,57 @@
+const locales = {
+    "en": {
+        "headlines_title": "Manage your passwords with confidence",
+        "headlines_subtitle": "LessPass does not store passwords, and neither should you !",
+        "what_is_lesspass": "doesn't save your passwords, it regenerates whenever you need it. Each password is unique to each site. All you need is to remember a single password, and LessPass does the rest.",
+        "what_is_lesspass2": "does not save passwords, there is nothing to steal.",
+        "built_by": "by",
+        "source_code": "Source code",
+        "you_should_use_lesspass": "You should use lesspass if",
+        "unique_password": "you want a unique password for each site",
+        "love_open_source": "vous love open source",
+        "works_everywhere": "you want an application that works on a computer, smartphone or tablet.",
+        "no_cloud": "you don't want to store your passwords in the cloud",
+        "only_one_password": "you want to remember only one password",
+        "Email": "Email",
+        "Password": "Password",
+        "Unique_password": "Unique password",
+        "Site": "Web site",
+        "Site_placeholder": "Web site (ex: Facebook)",
+        "Copy": "Copy",
+        "Advanced_options": "Advanced options",
+        "lowercase_options": "lowercase (a-z)",
+        "uppercase_options": "UPPERCASE (A-Z)",
+        "numbers_options": "numbers (0-9)",
+        "symbols_options": "symbols (@&%?)",
+        "Length": "Length"
+    },
+    "fr": {
+        "headlines_title": "Gérez vos mots de passe en toute confiance",
+        "headlines_subtitle": "LessPass ne mémorise pas vos mots de passe, et vous non plus !",
+        "what_is_lesspass": "ne sauvegarde pas vos mots de passe, il les regénère à chaque fois que vous en avez besoin. Chaque mot de passe est unique et propre à chaque site. Tout ce dont vous avez besoin c'est de vous souvenir d'un seul mot de passe, et LessPass fait le reste.",
+        "what_is_lesspass2": "ne sauvegarde pas vos mots de passe, il n'y a donc rien à voler.",
+        "built_by": "Réalisé par",
+        "source_code": "Code source",
+        "you_should_use_lesspass": "Vous devriez utiliser LessPass si",
+        "unique_password": "vous voulez un mot de passe unique pour chaque site",
+        "love_open_source": "vous aimez l'open source",
+        "works_everywhere": "vous voulez une application qui fonctionne sur ordinateur, smartphone ou tablette.",
+        "no_cloud": "vous ne voulez pas stocker vos mots de passe sur le cloud",
+        "only_one_password": "vous voulez vous souvenir que d'un seul mot de passe",
+        "Email": "Email",
+        "Password": "Mot de passe",
+        "Unique_password": "Mot de passe unique",
+        "Site": "Site",
+        "Site_placeholder": "Site (ex: Facebook)",
+        "Copy": "Copier",
+        "Advanced_options": "Options avancées",
+        "lowercase_options": "minuscules (a-z)",
+        "uppercase_options": "MAJUSCULES (A-Z)",
+        "numbers_options": "nombres (0-9)",
+        "symbols_options": "caractères spéciaux (@&%?)",
+        "Length": "Longueur"
+    }
+};
+
+
+export default locales;

package.json

@@ -15,7 +15,7 @@
     "copy:html": "cpy 'static/*.html' dist",
     "copy:images": "cpy 'static/images/*.png' dist/images/",
     "build:css": "node-sass static/css/styles.scss dist/css/styles.css",
-    "build:app": "browserify -e ./app/app.js -o ./dist/app.js",
+    "build:app": "browserify -e ./app/app.js | uglifyjs > ./dist/app.js",
     "prestart": "npm run build",
     "start": "npm-run-all --parallel serve watch:static watch:app",
     "serve": "static dist",
@@ -39,7 +39,8 @@
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.2",
     "clipboard": "^1.5.5",
-    "vue": "^1.0.12"
+    "vue": "^1.0.12",
+    "vue-i18n": "^2.3.3"
   },
   "devDependencies": {
     "babel-core": "^6.3.26",
@@ -56,6 +57,7 @@
     "nodemon": "latest",
     "npm-run-all": "latest",
     "rimraf": "latest",
+    "uglify-js": "^2.6.1",
     "vue-hot-reload-api": "^1.2.2",
     "vueify": "^8.0.0",
     "vueify-insert-css": "^1.0.0",

static/css/styles.scss

@@ -8,24 +8,6 @@ body {
   background-color: #252830;
 }
 
-#header {
-  #logo-link {
-    margin: 0 auto;
-    width: 200px;
-    height: 45px;
-
-    #logo {
-      width: inherit;
-      height: inherit;
-    }
-  }
-}
-
-#headlines {
-  padding-top: 2em;
-  padding-bottom: 1em;
-}
-
 .blue {
   color: #0275D8;
 }

static/index.html

@@ -27,36 +27,10 @@
     <meta name="theme-color" content="#252830">
 </head>
 <body>
-<div id="header">
-    <div class="container text-xs-center">
-        <div id="logo-link">
-            <a href="http://lesspass.com">
-                <img id="logo" alt="lesspass" class="img-fluid" src="images/logo.png">
-            </a>
-        </div>
-    </div>
-</div>
-<div id="headlines" class="container text-xs-center">
-    <h1 class="blue">Gérez vos mots de passe en toute confiance</h1>
-    <h2>LessPass ne mémorise pas vos mots de passe, et vous non plus !</h2>
-</div>
+<lesspass-header></lesspass-header>
+<lesspass-headlines></lesspass-headlines>
 <bootstrap-hr></bootstrap-hr>
-<div class="container">
-    <div class="jumbotron">
-        <div class="row">
-            <div class="col-lg-12">
-                <p class="lead">
-                    <a href="https://lesspass.com/">LessPass</a> ne sauvegarde pas vos mots de passe, il les regénère à
-                    chaque fois que vous en avez besoin. Chaque mot de passe est unique et propre à chaque site. Tout ce
-                    dont vous avez besoin c'est de vous souvenir d'un seul mot de passe, et LessPass fait le reste.
-                </p>
-                <p class="lead">
-                    Comme LessPass ne sauvegarde pas vos mots de passe, il n'y a rien à voler.
-                </p>
-            </div>
-        </div>
-    </div>
-</div>
+<lesspass-jumbotron></lesspass-jumbotron>
 <bootstrap-hr></bootstrap-hr>
 <password-generator></password-generator>
 <lesspass-features></lesspass-features>