translation of account, dashboard and login page

frontend/i18next.scanner/en/translation.json

   "Logout": "Logout",
   "Notification": "Notification",
   "Archive Topic": "Archive Topic",
-  "Deleted File": "Deleted File"
+  "Deleted File": "Deleted File",
+  "Name :": "Name :",
+  "Email Adress :": "Email Adress :",
+  "Send": "Send",
+  "Workspace and notifications": "Workspace and notifications",
+  "Workspace": "Workspace",
+  "Role": "Role",
+  "Account information": "Account information",
+  "Change your password": "Change your password",
+  "Password": "Password",
+  "Change your name": "Change your name",
+  "Change your email": "Change your email",
+  "Old Password": "Old Password",
+  "New Password": "New Password",
+  "Change your Timezone": "Change your Timezone",
+  "Calendar": "Calendar",
+  "Access your personal calendar": "Access your personal calendar",
+  "Dashboard": "Dashboard",
+  "Active advanced Dashboard": "Active advanced Dashboard",
+  "Change your status": "Change your status",
+  "subscriber": "subscriber",
+  "unsubscribed": "unsubscribed",
+  "Start a new Thread": "Start a new Thread",
+  "Writing a document": "Writing a document",
+  "Upload a file": "Upload a file",
+  "Start a videoconference": "Start a videoconference",
+  "View the Calendar": "View the Calendar",
+  "Recent activity": "Recent activity",
+  "Mark everything as read": "Mark everything as read",
+  "See more": "See more",
+  "Member List": "Member List",
+  "Add a member": "Add a member",
+  "Enter the name or email of the member": "Enter the name or email of the member",
+  "Create an account": "Create an account",
+  "Choose the role of the member": "Choose the role of the member",
+  "Supervisor": "Supervisor",
+  "Content Manager": "Content Manager",
+  "Contributor": "Contributor",
+  "Reader": "Reader",
+  "Validate": "Validate",
+  "Implement Tracim in your explorer": "Implement Tracim in your explorer",
+  "Find all your documents deposited online directly on your computer via the workstation, without going through the software.": "Find all your documents deposited online directly on your computer via the workstation, without going through the software.",
+  "Workspace Calendar": "Workspace Calendar",
+  "Each workspace has its own calendar.": "Each workspace has its own calendar.",
+  "Email Adress": "Email Adress",
+  "Explore the workspace": "Explore the workspace"
 }

frontend/i18next.scanner/fr/translation.json

   "Logout": "Se Déconnecter",
   "Notification": "Notification",
   "Archive Topic": "Conversation archivée",
-  "Deleted File": "Fichier supprimé"
+  "Deleted File": "Fichier supprimé",
+  "Name :": "Nom :",
+  "Email Adress :": "Adresse mail :",
+  "Send": "Envoyer",
+  "Workspace and notifications": "Espace de travail & Notifications",
+  "Workspace": "Espace de travail",
+  "Role": "Rôle",
+  "Account information": "Information du compte",
+  "Change your password": "Changer votre mot de passe",
+  "Password": "Mot de passe",
+  "Change your name": "Modifier votre nom",
+  "Change your email": "Modifier votre email",
+  "Old Password": "Ancien mot de passe",
+  "New Password": "Nouveau mot de passe",
+  "Change your Timezone": "Modifier votre fuseau horaire",
+  "Calendar": "Calendrier",
+  "Access your personal calendar": "Accéder à votre calendrier personnel",
+  "Dashboard": "Tableau de bord",
+  "Active advanced Dashboard": "Activer le mode avancé ",
+  "Change your status": "Changer de status",
+  "subscriber": "Abonné(e)",
+  "unsubscribed": "Non Abonné(e)",
+  "Start a new Thread": "Débuter une nouvelle discussion",
+  "Writing a document": "Rédiger un document",
+  "Upload a file": "Importer un fichier",
+  "Start a videoconference": "Débuter une visioconférence",
+  "View the Calendar": "Voir le Calendrier",
+  "Explore the workspace": "Explorer l'espace de travail",
+  "Recent activity": "Activité récente",
+  "Mark everything as read": "Tout marquer comme lu",
+  "See more": "Voir plus",
+  "Member List": "Liste des membres",
+  "Add a member": "Ajouter un membre",
+  "Enter the name or email of the member": "Renseigner le nom ou l'email de l'utilisateur",
+  "Create an account": "Créer un compte",
+  "Supervisor": "Responsable",
+  "Content Manager": "Gestionnaire de contenu",
+  "Contributor": "Contributeur",
+  "Reader": "Lecteur",
+  "Validate": "Validé",
+  "Implement Tracim in your explorer": "Implémenter Tracim dans votre explorateur",
+  "Find all your documents deposited online directly on your computer via the workstation, without going through the software.": "Retrouvez tous vos documents déposés en ligne directement sur votre ordinateur via le poste de travail, sans passer par le logiciel.",
+  "Workspace Calendar": "Calendrier de l'espace de travail",
+  "Each workspace has its own calendar.": "Chaque espace de travail à son propre calendrier",
+  "Choose the role of the member": "Choisissez le rôle du membre",
+  "Email Adress": "Adresse email"
 }

frontend/src/component/Account/Calendar.jsx

     <div className='account__userpreference__setting__calendar'>
 
       <div className='calendar__title subTitle ml-2 ml-sm-0'>
-        Calendrier
+        {props.t('Calendar')}
       </div>
 
       <div className='calendar__text ml-2 ml-sm-0'>
       </div>
 
       <div className='calendar__title ml-2 ml-sm-0'>
-        Accèder à votre Calendrier personnel
+        {props.t('Access your personal calendar')}
       </div>
       <div className='calendar__link ml-2 ml-sm-0'>
         {props.user.caldavUrl}

frontend/src/component/Account/Notification.jsx

   return (
     <div className='account__userpreference__setting__notification'>
       <div className='notification__sectiontitle subTitle ml-2 ml-sm-0'>
-        Espace de Travail & Notification
+        {props.t('Workspace and notifications')}
       </div>
 
       <div className='notification__text ml-2 ml-sm-0'>
         <table className='table'>
           <thead>
             <tr>
-              <th>Espace de travail</th>
-              <th>Role</th>
-              <th>Notification</th>
+              <th>{props.t('Workspace')}</th>
+              <th>{props.t('Role')}</th>
+              <th>{props.t('Notification')}</th>
             </tr>
           </thead>
           <tbody>

frontend/src/component/Account/Password.jsx

 import React from 'react'
+import { translate } from 'react-i18next'
 
 export const Password = props => {
   return (
     <div className='account__userpreference__setting__personaldata'>
       <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
-        Changer de mot de passe
+        {props.t('Change your password')}
       </div>
 
       <div className='personaldata__text ml-2 ml-sm-0'>
 
       <form className='personaldata__form mr-5'>
         <div className='personaldata__form__title'>
-          Mot de passe :
+          {props.t('Password')}
         </div>
-        <input className='personaldata__form__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
-        <input className='personaldata__form__txtinput form-control mt-4' type='password' placeholder='Nouveau mot de passe' />
+        <input
+          className='personaldata__form__txtinput form-control'
+          type='password'
+          placeholder={props.inputPlaceholderOldPassword}
+        />
+        <input
+          className='personaldata__form__txtinput form-control mt-4'
+          type='password'
+          placeholder={props.inputPlaceholderNewPassword}
+        />
         <button type='submit' className='personaldata__form__button btn btn-outline-primary mt-4'>
-          Envoyer
+          {props.t('Send')}
         </button>
       </form>
 
   )
 }
 
-export default Password
+export default translate()(Password)

frontend/src/component/Account/PersonalData.jsx

 import React from 'react'
+import PropTypes from 'prop-types'
+import { translate } from 'react-i18next'
 
 export const PersonalData = props => {
   return (
     <div className='account__userpreference__setting__personaldata'>
       <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
-        Information du compte
+        {props.t('Account information')}
       </div>
 
       <div className='personaldata__text ml-2 ml-sm-0'>
 
       <form className='personaldata__form'>
         <div className='personaldata__form__title'>
-          Nom :
+          {props.t('Name :')}
         </div>
         <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-          <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='text' placeholder='Nom' />
+          <input
+            className='personaldata__form__txtinput form-control mt-3 mt-sm-0'
+            type='text'
+            placeholder={props.inputPlaceholderNameUser}
+          />
         </div>
         <div className='personaldata__form__title'>
-          Adresse mail :
+          {props.t('Email Adress :')}
         </div>
         <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-          <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='email' placeholder='Nouvelle adresse mail' />
+          <input
+            className='personaldata__form__txtinput form-control mt-3 mt-sm-0'
+            type='email'
+            placeholder={props.inputPlaceholderEmailUser}
+          />
         </div>
         <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
-          Envoyer
+          {props.t('Send')}
         </button>
       </form>
     </div>
   )
 }
 
-export default PersonalData
+PersonalData.propTypes = {
+  inputPlaceholderNameUser: PropTypes.string,
+  inputPlaceholderEmailUser: PropTypes.string
+}
+
+export default translate()(PersonalData)

frontend/src/component/Account/Timezone.jsx

 import React from 'react'
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
+import { translate } from 'react-i18next'
 
 export const Timezone = props => {
   const handleChangeTimezone = selectedTimezone => props.onChangeTimezone(props.timezone.find(t => t.place === selectedTimezone.place))
     <div className='account__userpreference__setting__timezone'>
 
       <div className='timezone__title subTitle ml-2 ml-sm-0'>
-        Changer de Fuseau Horaire
+        {props.t('Change your Timezone')}
       </div>
 
       <div className='timezone__text ml-2 ml-sm-0'>
   )
 }
 
-export default Timezone
+export default translate()(Timezone)

frontend/src/container/Account.jsx

   getTimezone,
   getUserRole
 } from '../action-creator.async.js'
+import { translate } from 'react-i18next'
 
 class Account extends React.Component {
   constructor (props) {
     const subComponent = (() => {
       switch (this.state.subComponentMenu.find(({active}) => active).name) {
         case 'personalData':
-          return <PersonalData />
+          return <PersonalData
+            inputPlaceholderNameUser={this.props.t('Change your name')}
+            inputPlaceholderEmailUser={this.props.t('Change your email')}
+          />
 
         // case 'calendar':
         //   return <Calendar user={this.props.user} />
             onChangeSubscriptionNotif={this.handleChangeSubscriptionNotif}
           />
 
+        case 'password':
+          return <Password
+            inputPlaceholderOldPassword={this.props.t('Old Password')}
+            inputPlaceholderNewPassword={this.props.t('New Password')}
+          />
+
         case 'timezone':
           return <Timezone timezone={this.props.timezone} onChangeTimezone={this.handleChangeTimezone} />
-
-        case 'password':
-          return <Password />
       }
     })()
 
 }
 
 const mapStateToProps = ({ user, workspaceList, timezone }) => ({ user, workspaceList, timezone })
-export default connect(mapStateToProps)(Account)
+export default translate()(connect(mapStateToProps)(Account))

frontend/src/container/Dashboard.jsx

   setAppList,
   setContentTypeList, setWorkspaceListIsOpenInSidebar, updateWorkspaceListData
 } from '../action-creator.sync.js'
+import { translate } from 'react-i18next'
 
 class Dashboard extends React.Component {
   constructor (props) {
             <div className='dashboard__header mb-5'>
               <div className='pageTitleGeneric dashboard__header__title d-flex align-items-center'>
                 <div className='pageTitleGeneric__title dashboard__header__title__text mr-3'>
-                  Dashboard
+                  {this.props.t('Dashboard')}
                 </div>
                 <div className='dashboard__header__acces' />
               </div>
               <div className='dashboard__header__advancedmode mr-3'>
-                <button type='button' className='btn btn-primary'>Activer édition avancé</button>
+                <button type='button' className='btn btn-primary'>
+                  {this.props.t('Active advanced Dashboard')}
+                </button>
               </div>
             </div>
 
                       className='dashboard__userstatut__notification__btn btn btn-outline-primary'
                       onClick={this.handleToggleNotifBtn}
                     >
-                      Changer de statut
+                      {this.props.t('Change your status')}
                     </div>
                   }
 
                         Abonné(e)
                       </button>
                       <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
-                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
+                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>
+                          {this.props.t('subscriber')}
                         </div>
-                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>
+                          {this.props.t('unsubscribed')}
                         </div>
                       </div>
                     </div>
                     <i className='fa fa-comments-o' />
                   </div>
                   <div className='dashboard__calltoaction__button__text__title'>
-                    Débuter une nouvelle discussion
+                    {this.props.t('Start a new Thread')}
                   </div>
                 </div>
               </div>
                     <i className='fa fa-file-text-o' />
                   </div>
                   <div className='dashboard__calltoaction__button__text__title'>
-                    Rédiger un document
+                    {this.props.t('Writing a document')}
                   </div>
                 </div>
               </div>
                     <i className='fa fa-paperclip' />
                   </div>
                   <div className='dashboard__calltoaction__button__text__title'>
-                    Importer un fichier
+                    {this.props.t('Upload a file')}
                   </div>
                 </div>
               </div>
                       <i className='fa fa-video-camera' />
                     </div>
                     <div className='dashboard__calltoaction__button__text__title'>
-                      Débuter une visioconférence
+                      {this.props.t('Start a videoconference')}
                     </div>
                   </div>
                 </div>
                       <i className='fa fa-calendar' />
                     </div>
                     <div className='dashboard__calltoaction__button__text__title'>
-                      Voir le Calendrier
+                      {this.props.t('View the Calendar')}
                     </div>
                   </div>
                 </div>
                     <i className='fa fa-folder-open-o' />
                   </div>
                   <div className='dashboard__calltoaction__button__text__title'>
-                    Explorer le Workspace
+                    {this.props.t('Explore the workspace')}
                   </div>
                 </div>
               </div>
               <div className='dashboard__activity'>
                 <div className='dashboard__activity__header'>
                   <div className='dashboard__activity__header__title subTitle'>
-                    Activité récente
+                    {this.props.t('Recent activity')}
                   </div>
 
                   <div className='dashboard__activity__header__allread btn btn-outline-primary'>
-                    Tout marquer comme lu
+                    {this.props.t('Mark everything as read')}
                   </div>
                 </div>
                 <div className='dashboard__activity__wrapper'>
 
                   <div className='dashboard__activity__more d-flex flex-row-reverse'>
                     <div className='dashboard__activity__more__btn btn btn-outline-primary'>
-                      Voir plus
+                      {this.props.t('See more')}
                     </div>
                   </div>
                 </div>
               <div className='dashboard__memberlist'>
 
                 <div className='dashboard__memberlist__title subTitle'>
-                  Liste des membres
+                  {this.props.t('Member List')}
                 </div>
 
                 <div className='dashboard__memberlist__wrapper'>
                           </div>
                           <div
                             className='dashboard__memberlist__btnadd__button__text'
-
                           >
-                             Ajouter un membre
+                            {this.props.t('Add a member')}
                           </div>
                         </div>
                       </div>
                       </div>
                       <div className='dashboard__memberlist__form__member'>
                         <div className='dashboard__memberlist__form__member__name'>
-                          <label className='name__label' htmlFor='addmember'>Indiquer le nom ou l'email du membre</label>
+                          <label className='name__label' htmlFor='addmember'>
+                            {this.props.t('Enter the name or email of the member')}
+                          </label>
                           <input type='text' id='addmember' className='name__input form-control' placeholder='Nom ou Email' />
                         </div>
                         <div className='dashboard__memberlist__form__member__create'>
                             <input type='radio' />
                           </div>
                           <div className='create__text'>
-                            Créer un compte
+                            {this.props.t('Create an account')}
                           </div>
                         </div>
                       </div>
                       <div className='dashboard__memberlist__form__role'>
                         <div className='dashboard__memberlist__form__role__text'>
-                          Choisissez le rôle du membre
+                          {this.props.t('Choose the role of the member')}
                         </div>
                         <ul className='dashboard__memberlist__form__role__list'>
                           <li className='dashboard__memberlist__form__role__list__item'>
                                 <i className='fa fa-gavel' />
                               </div>
                               <div className='item__text__name'>
-                                Responsable
+                                {this.props.t('Supervisor')}
                               </div>
                             </div>
                           </li>
                                 <i className='fa fa-graduation-cap' />
                               </div>
                               <div className='item__text__name'>
-                                Gestionnaire de contenu
+                                {this.props.t('Content Manager')}
                               </div>
                             </div>
                           </li>
                                 <i className='fa fa-pencil' />
                               </div>
                               <div className='item__text__name'>
-                                Contributeur
+                                {this.props.t('Contributor')}
                               </div>
                             </div>
                           </li>
                                 <i className='fa fa-eye' />
                               </div>
                               <div className='item__text__name'>
-                                Lecteur
+                                {this.props.t('Reader')}
                               </div>
                             </div>
                           </li>
                         </ul>
                       </div>
                       <div className='dashboard__memberlist__form__submitbtn'>
-                        <button className='btn btn-outline-primary'>Valider</button>
+                        <button className='btn btn-outline-primary'>
+                          {this.props.t('Validate')}
+                        </button>
                       </div>
                     </form>
                   }
                   </div>
 
                   <div className='dashboard__moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
-                    Implémenter Tracim dans votre explorateur
+                    {this.props.t('Implement Tracim in your explorer')}
                   </div>
                 </div>
                 {this.state.displayWebdavBtn === true &&
                   <div>
                     <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
                       <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
-                        Retrouvez tous vos documents déposés en ligne directement sur votre ordinateur via le poste de travail, sans passer par le logiciel.
+                        {this.props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
                       </div>
 
                       <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
                     </div>
 
                     <div className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
-                      Calendrier de l'espace de travail
+                      {this.props.t('Workspace Calendar')}
                     </div>
                   </div>
                 </div>
                     <div>
                       <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
                         <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
-                          Chaque espace de travail possède son propre calendrier.
+                          {this.props.t('Each workspace has its own calendar.')}
                         </div>
 
                         <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
 }
 
 const mapStateToProps = ({ user, app, contentType, workspaceList }) => ({ user, app, contentType, workspaceList })
-export default connect(mapStateToProps)(Dashboard)
+export default translate()(connect(mapStateToProps)(Dashboard))

frontend/src/container/Login.jsx

                         customClass='mb-3 mt-4'
                         icon='fa-envelope-open-o'
                         type='email'
-                        placeHolder='Adresse Email'
+                        placeHolder={this.props.t('Email Adress')}
                         invalidMsg='Email invalide.'
                         isInvalid={this.state.inputLogin.isInvalid}
                         value={this.state.inputLogin.value}
                         customClass=''
                         icon='fa-lock'
                         type='password'
-                        placeHolder='Mot de passe'
+                        placeHolder={this.props.t('Password')}
                         invalidMsg='Mot de passe invalide.'
                         isInvalid={this.state.inputPassword.isInvalid}
                         value={this.state.inputPassword.value}