move texts to en.json file

Fixes: imusify#127

src/components/ArtistTrackToggler.vue

@@ -2,10 +2,10 @@
   <div class="toggler">
     <router-link to="/"
                  class="button"
-                :class="{ active: selected === 'tracks' }">Tracks</router-link>
+                :class="{ active: selected === 'tracks' }">{{$t('tracks')}}</router-link>
     <router-link to="/artists"
                  class="button"
-                 :class="{ active: selected === 'artists' }">Artists</router-link>
+                 :class="{ active: selected === 'artists' }">{{$t('artists')}}</router-link>
   </div>
 </template>
 <script>

src/components/Login.vue

@@ -4,34 +4,32 @@
       <Icon name="close" />
     </a>
     <div class="body">
-      <h1 class="heading">Sign in to imusify</h1>
-      <p class="subheading">In a consequat mi. Etiam sit amet diam in diam ullamcorper consequat.
-        Maecenas pellentesque mauris augue, in scelerisque lectus imperdiet et. Nullam ultricies,
-        eros quis maximus.
+      <h1 class="heading">{{$t('signInToImusify')}}</h1>
+      <p class="subheading">{{$t('signIntoImusifySubHeader')}}
       </p>
       <social-icons v-if="false"></social-icons>
       <div class="or-ui" v-if="false"><span>OR</span></div>
       <div>
         <form @submit.prevent="onSubmit()">
           <div class="form-group">
-            <label class="control-label">Email address</label>
+            <label class="control-label">{{$t('emailAddress')}}</label>
             <input type="text" id="email" class="form-control"
-              placeholder="email@example.com" v-model="credentials.email">
+              :placeholder="$t('emailAddressPlaceholder')" v-model="credentials.email">
           </div>
           <div class="form-group">
-            <label class="control-label">Password</label>
+            <label class="control-label">{{$t('password')}}</label>
             <input type="password" id="password" class="form-control"
-              placeholder="Enter your password" v-model="credentials.password">
+              :placeholder="$t('passwordPlaceholder')" v-model="credentials.password">
           </div>
           <div class="form-group">
             <div class="checkbox">
-              <label><input type="checkbox"/> <span></span> Keep me signed in</label>
+              <label><input type="checkbox"/> <span></span> {{$t('loginKeepMeSignedIn')}}</label>
             </div>
           </div>
           <div class="cta dubble">
-            <button>Login</button>
+            <button>{{$t('login')}}</button>
             <button type="button"
-                    @click="openSignupModal()">Signup</button>
+                    @click="openSignupModal()">{{$t('signup')}}</button>
           </div>
         </form>
       </div>

src/components/NavBar.vue

@@ -12,7 +12,7 @@
       <a href="#"
          @click.prevent="toggleLogin(true)"
          class="button"
-         v-if="!isLoggedIn">{{$t('login')}}</a>
+         v-if="!isLoggedIn">{{$t('signin')}}</a>
       <a href="#"
          @click.prevent="toggleSignup(true)"
          class="button"

src/components/Profile.vue

@@ -1,65 +1,66 @@
 <template>
   <section class="profile">
     <div class="body">
-      <h1 class="heading">Complete your profile</h1>
+      <h1 class="heading">{{$t('profileCompleteYourProfile')}}</h1>
       <div class="two-column">
         <div class="left-sec">
           <img src="../assets/logo.png" />
           <button class="uploadbutton">
             <span class="icon-svg upload">
               <icon name="imageUpload" />
             </span>
-            upload image
+            {{$t('profileUploadImage')}}
           </button>
         </div>
         <div class="right-sec">
           <form @submit.prevent="onUpdateAccount">
             <div class="form-group">
-              <label class="control-label">First name</label>
+              <label class="control-label">{{$t('profileFirstName')}}</label>
               <input type="text"
                      class="form-control"
                      v-model="user.first_name"
-                     placeholder="Enter First name">
+                     :placeholder="$t('profileFirstNamePlaceholder')">
             </div>
             <div class="form-group">
-              <label class="control-label">Last name</label>
+              <label class="control-label">{{$t('profileLastName')}}</label>
               <input type="text"
                      class="form-control"
                      v-model="user.last_name"
-                     placeholder="Enter Last name">
+                     :placeholder="$t('profileLastNamePlaceholder')">
             </div>
             <div class="form-group">
-              <label class="control-label">Wallet Address</label>
+              <label class="control-label">{{$t('profileWalletAddress')}}</label>
               <input type="text"
                      class="form-control"
                      v-model="user.wallet_address"
-                     placeholder="Enter wallet address">
+                     :placeholder="$t('profileWalletAddressPlaceholder')">
             </div>
             <div class="form-group">
-              <label class="control-label">Date of birth</label>
+              <label class="control-label">{{$t('profileDateOfBirth')}}</label>
               <input type="text"
                      class="form-control"
                      v-model="user.date_of_birth"
-                     placeholder="_/_/_">
+                     :placeholder="$t('profileDateOfBirthPlaceholder')">
             </div>
             <div class="form-group">
-              <label class="control-label">Biography</label>
+              <label class="control-label">{{$t('profileBiography')}}</label>
               <textarea id="biography"
                         class="form-control"
                         v-model="user.bio"
-                        placeholder="Enter biography" style="resize:none"></textarea>
+                        :placeholder="$t('profileBiographyPlaceholder')"
+                        style="resize:none"></textarea>
             </div>
             <div class="form-group">
-              <label class="control-label">Gender</label>
+              <label class="control-label">{{$t('profileGender')}}</label>
               <select class="form-control" v-model="user.gender">
-                <option value="" selected>Select Gender</option>
-                <option value="M">Male</option>
-                <option value="F">Female</option>
-                <option value="U">Decline to state</option>
+                <option value="" selected>{{$t('profileSelectGender')}}</option>
+                <option value="M">{{$t('male')}}</option>
+                <option value="F">{{$t('female')}}</option>
+                <option value="U">{{$t('profileDeclineToState')}}</option>
               </select>
             </div>
             <div class="cta left">
-              <button class="savebutton">SAVE SETTINGS</button>
+              <button class="savebutton">{{$t('profileSaveSettings')}}</button>
             </div>
           </form>
         </div>
@@ -122,5 +123,8 @@ export default {
         }
       }
     }
+    .savebutton {
+      text-transform: uppercase;
+    }
   }
 </style>

src/components/SearchBar.vue

@@ -2,7 +2,7 @@
   <form class="search-bar"
         @submit.prevent="search()">
     <input type="text"
-           placeholder="Search"
+           :placeholder="$t('search')"
            v-model="filter" />
     <button>
       <icon name="magnify" />

src/components/SideBar.vue

@@ -5,56 +5,56 @@
       <li>
         <router-link to="/">
           <icon name="home"/>
-          <span>Home</span>
+          <span>{{$t('sideBarHome')}}</span>
         </router-link>
       </li>
       <li>
         <router-link to="/channels">
           <icon name="channels"/>
-          <span>Channels</span>
+          <span>{{$t('sideBarChannels')}}</span>
         </router-link>
       </li>
       <li>
         <router-link to="/browse">
           <icon name="browse"/>
-          <span>Browse</span>
+          <span>{{$t('sideBarBrowse')}}</span>
         </router-link>
       </li>
       <li>
         <router-link to="/crowdfunding">
           <icon name="crowdfunding"/>
-          <span>Crowd Funding</span>
+          <span>{{$t('sideBarCrowdFunding')}}</span>
         </router-link>
       </li>
       <li>
         <router-link to="/upload">
           <icon name="upload"/>
-          <span>Upload</span>
+          <span>{{$t('sideBarUpload')}}</span>
         </router-link>
       </li>
       <li>
         <router-link to="/wallet">
           <icon name="wallet"/>
-          <span>Wallet</span>
+          <span>{{$t('sideBarWallet')}}</span>
         </router-link>
       </li>
       <li>
         <router-link to="/following">
           <icon name="following"/>
-          <span>Following</span>
+          <span>{{$t('sideBarFollowing')}}</span>
         </router-link>
       </li>
     </ul>
     <footer>
       <nav>
-        <router-link to="/about">About</router-link>
+        <router-link to="/about">{{$t('sideBarAbout')}}</router-link>
         |
-        <router-link to="/privacy">Privacy Policy</router-link>
+        <router-link to="/privacy">{{$t('sideBarPrivacyPolicy')}}</router-link>
         |
-        <router-link to="/legal">Legal</router-link>
+        <router-link to="/legal">{{$t('sideBarLegal')}}</router-link>
       </nav>
-      <p>Copyright © 2018 imusify</p>
-      <p>All rights reserved</p>
+      <p>{{$t('sideBarCopyright')}}</p>
+      <p>{{$t('sideBarAllRightsReserved')}}</p>
     </footer>
   </nav>
 </template>

src/components/Signup.vue

@@ -4,22 +4,21 @@
       <Icon name="close" />
     </a>
     <div class="body">
-      <h1 v-if="false" class="heading">Sign up to imusify</h1>
-      <p v-if="false" class="subheading">In a consequat mi. Etiam sit amet diam in diam
-        ullamcorper consequat. Maecenas pellentesque mauris augue, in scelerisque
-        lectus imperdiet et. Nullam ultricies, eros quis maximus.
+      <h1 v-if="false" class="heading">{{$t('signUpSignupToImusify')}}</h1>
+      <p v-if="false" class="subheading">{{$t('signUpSignupToImusifySubheader')}}
       </p>
       <social-icons v-if="false"></social-icons>
       <div class="or-ui" v-if="false"><span>OR</span></div>
       <div>
         <form @submit.prevent="registerationPage()">
           <div class="form-group">
-            <label class="control-label">Email address</label>
-            <input type="text" id="username" class="form-control" placeholder="email@example.com"
+            <label class="control-label">{{$t('emailAddress')}}</label>
+            <input type="text" id="username" class="form-control"
+                   :placeholder="$t('emailAddressPlaceholder')"
               v-model="credentials.email">
           </div>
           <div class="cta">
-            <button>Sign Up</button>
+            <button>{{$t('signup')}}</button>
           </div>
         </form>
       </div>

src/components/SignupNext.vue

@@ -1,55 +1,51 @@
 <template>
   <section class="signupnext">
     <div class="body">
-      <h1 class="heading">Please complete your registration {{credentials.email}}</h1>
-      <p class="subheading">In a consequat mi. Etiam sit amet diam in diam ullamcorper
-        consequat. Maecenas pellentesque mauris augue, in scelerisque lectus imperdiet et.
-        Nullam ultricies, eros quis maximus.
+      <h1 class="heading">{{$t('signUpNextCompleteRegistration')}} {{credentials.email}}</h1>
+      <p class="subheading">{{$t('signUpNextCompleteRegistrationSubheader')}}
       </p>
       <form @submit.prevent="onSubmit()">
         <div class="form-group">
-          <label class="control-label">Email Address</label>
+          <label class="control-label">{{$t('emailAddress')}}</label>
           <input type="text"
                  id="username"
                  placeholder="example@email.com"
                  class="form-control"
                  v-model="credentials.username">
         </div>
         <div class="form-group">
-          <label class="control-label">Password</label>
+          <label class="control-label">{{$t('password')}}</label>
           <input type="text"
                  id="password"
-                 placeholder="Enter your password"
+                 :placeholder="$t('passwordPlaceholder')"
                  class="form-control"
                  v-model="credentials.password">
         </div>
         <div class="form-group">
-          <label class="control-label">Repeat Password</label>
+          <label class="control-label">{{$t('passwordRepeat')}}</label>
           <input type="text"
                  id="passwordConfirm"
-                 placeholder="Retype your password"
+                 :placeholder="$t('passwordRepeatPlaceholder')"
                  class="form-control"
                  v-model="credentials.confirmPassword">
         </div>
         <div class="form-group">
           <div class="checkbox long-text">
             <label>
               <input class="checkbox" type="checkbox"/>
-              <span></span>
-              I acknowledge that I have read and accept the Terms of Use Agreement
-              and consent to the Privacy Policy and Video Privacy Policy.</label>
+              <span></span>{{$t('signUpNextTermsOfUse')}}</label>
           </div>
         </div>
         <div class="form-group">
           <div class="checkbox">
             <label>
               <input class="checkbox2" type="checkbox"/>
               <span></span>
-              Subscribe to our Newsletter</label>
+              {{$t('signUpNextSubscribe')}}</label>
           </div>
         </div>
         <div class="cta left">
-          <button class="subbutton">SIGN UP</button>
+          <button class="subbutton">{{$t('signup')}}</button>
         </div>
       </form>
     </div>
@@ -117,5 +113,8 @@ export default {
       margin-top: 4rem;
     }
   }
+  .subbutton {
+    text-transform: uppercase;
+  }
 }
 </style>

src/l10n/en.json

@@ -1,5 +1,54 @@
 {
   "signup": "Sign up",
-  "login": "Sign in",
-  "logout": "Logout"
+  "signin": "Sign in",
+  "logout": "Logout",
+  "login": "Login",
+  "tracks": "Tracks",
+  "artists": "Artists",
+  "male": "Male",
+  "female": "Female",
+  "search": "Search",
+  "emailAddress": "Email address",
+  "emailAddressPlaceholder": "email@example.com",
+  "password": "Password",
+  "passwordPlaceholder": "Enter your password",
+  "passwordRepeat": "Repeat Password",
+  "passwordRepeatPlaceholder": "Retype your password",
+  "signInToImusify": "Sign in to imusify",
+  "signIntoImusifySubHeader": "In a consequat mi. Etiam sit amet diam in diam ullamcorper consequat.\nMaecenas pellentesque mauris augue, in scelerisque lectus imperdiet et. Nullam ultricies,\neros quis maximus.",
+  "loginKeepMeSignedIn": "Keep me signed in",
+  "profileCompleteYourProfile": "Complete your profile",
+  "profileUploadImage": "upload image",
+  "profileFirstName": "First name",
+  "profileFirstNamePlaceholder": "Enter First name",
+  "profileLastName": "Last name",
+  "profileLastNamePlaceholder": "Enter Last name",
+  "profileWalletAddress": "Wallet Address",
+  "profileWalletAddressPlaceholder": "Enter wallet address",
+  "profileDateOfBirth": "Date of birth",
+  "profileDateOfBirthPlaceholder": "_/_/_",
+  "profileBiography": "Biography",
+  "profileBiographyPlaceholder": "Enter biography",
+  "profileGender": "Gender",
+  "profileSelectGender": "Select Gender",
+  "profileDeclineToState": "Decline to state",
+  "profileSaveSettings": "Save Settings",
+  "sideBarHome": "Home",
+  "sideBarChannels": "Channels",
+  "sideBarBrowse": "Browse",
+  "sideBarCrowdFunding": "Crowd Funding",
+  "sideBarUpload": "Upload",
+  "sideBarWallet": "Wallet",
+  "sideBarFollowing": "Following",
+  "sideBarAbout": "About",
+  "sideBarPrivacyPolicy": "Privacy Policy",
+  "sideBarLegal": "Legal",
+  "sideBarCopyright": "Copyright © 2018 imusify",
+  "sideBarAllRightsReserved": "All rights reserved",
+  "signUpSignupToImusify": "Sign up to imusify",
+  "signUpSignupToImusifySubheader": "In a consequat mi. Etiam sit amet diam in diam\n ullamcorper consequat. Maecenas pellentesque mauris augue, in scelerisque\nlectus imperdiet et. Nullam ultricies, eros quis maximus.",
+  "signUpNextCompleteRegistration": "Please complete your registration",
+  "signUpNextCompleteRegistrationSubheader": "In a consequat mi. Etiam sit amet diam in diam ullamcorper\nconsequat. Maecenas pellentesque mauris augue, in scelerisque lectus imperdiet et.\nNullam ultricies, eros quis maximus.",
+  "signUpNextTermsOfUse": "I acknowledge that I have read and accept the Terms of Use Agreement\nand consent to the Privacy Policy and Video Privacy Policy.",
+  "signUpNextSubscribe": "Subscribe to our Newsletter"
 }