From a4bb0d48fe0f275881cc32823509b41d60cda3ce Mon Sep 17 00:00:00 2001
From: Marvin Witt <nurmarvin@protonmail.com>
Date: Tue, 22 Oct 2019 08:20:55 +0200
Subject: [PATCH] Load strings from external file instead of using hard coded
 values

First step to translations
---
 components/chat/index.vue       |   2 +-
 components/chat/input.vue       |   4 +-
 components/chat/typing.vue      |   2 +-
 components/player/index.vue     |  29 ++--
 components/player/user-icon.vue |  17 ++-
 components/player/viewer.vue    |   6 +-
 components/room/create.vue      |   6 +-
 components/room/join.vue        |   8 +-
 lang/en_US.json                 | 118 +++++++++++++++
 middleware/i18n.js              |  15 ++
 nuxt.config.js                  |   1 +
 package.json                    |   3 +-
 pages/auth/discord.vue          |  10 +-
 pages/home.vue                  | 259 ++++++++++++++++----------------
 pages/i/_id.vue                 |  26 ++--
 pages/index.vue                 | 101 +++++++------
 yarn.lock                       |   5 +
 17 files changed, 391 insertions(+), 221 deletions(-)
 create mode 100644 lang/en_US.json
 create mode 100644 middleware/i18n.js

diff --git a/components/chat/index.vue b/components/chat/index.vue
index 83d8f5f..987d2f2 100644
--- a/components/chat/index.vue
+++ b/components/chat/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="chat">
-        <p class="chat-no-messages-warn" v-if="!messages || messages.length === 0">Nobody said nothing. Maybe say something?</p>
+        <p class="chat-no-messages-warn" v-if="!messages || messages.length === 0" v-html="$t('room.chat.noMessages')"></p>
         <div class="chat-messages" :class="{ 'users-are-typing': typingUsers.length > 0 }" ref="messagesView" v-else-if=messages>
             <GroupedChatMessage v-for="(group, i) in messages" :key=group.id :group=group :isLastGroup="i === messages.length - 1" />
         </div>
diff --git a/components/chat/input.vue b/components/chat/input.vue
index 3f22ea2..6c0d73e 100644
--- a/components/chat/input.vue
+++ b/components/chat/input.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="chat-bar-wrapper">
-        <input type="text" class="chat-bar" :class="{ 'disabled': sending }" placeholder="Say something cool..." ref="input" v-model=content @keyup=didPressKey @keyup.enter=sendMessage() />
-        <div class="send-button" :class="{ 'is-enabled': canSendMessage, loading: sending, disabled: sending }" @click="sendMessage()" title="Send Message">
+        <input type="text" class="chat-bar" :class="{ 'disabled': sending }" :placeholder="$t('room.chat.placeholder')" ref="input" v-model=content @keyup=didPressKey @keyup.enter=sendMessage() />
+        <div class="send-button" :class="{ 'is-enabled': canSendMessage, loading: sending, disabled: sending }" @click="sendMessage()" :title="$t('room.chat.sendButtonTooltip')">
             <img src="/icons/airplane.svg" class="send-button-icon">
         </div>
     </div>
diff --git a/components/chat/typing.vue b/components/chat/typing.vue
index b138e8c..1216655 100644
--- a/components/chat/typing.vue
+++ b/components/chat/typing.vue
@@ -9,7 +9,7 @@
             ...mapGetters(['typingUsers']),
 
             typingTooltip() {
-                return `${this.typingUsersList} ${this.typingUsers.length === 1 ? 'is' : ' are'} typing...`
+                return this.$t('room.chat.typing', {users: this.typingUsersList, isAre: this.typingUsers.length === 1 ? this.$t('general.is') : this.$t('general.are')})
             },
             areUsersTyping() {
                 return this.typingUsers.length > 0
diff --git a/components/player/index.vue b/components/player/index.vue
index fa5f273..c6e643a 100644
--- a/components/player/index.vue
+++ b/components/player/index.vue
@@ -8,28 +8,33 @@
             </p>
             <!-- Portal is not open and there is only one person in the room -->
             <div class="player-msg" v-if="(portalStatus === 'waiting' || portalStatus === 'closed') && room.members.length === 1"> 
-                <h1 class="title">And so it begins...</h1>
-                <p class="body">Add a friend or two to get the party started! Once someone else joins this room, we'll queue up your room for a virtual browser</p>
+                <h1 class="title" v-html="$t('room.player.new.title')"></h1>
+                <p class="body" v-html="$t('room.player.new.body')"></p>
             </div>
             <!-- Portal is not open but there are more than one members in the room -->
             <div class="player-msg" v-else-if="(portalStatus === 'waiting' || portalStatus === 'closed') && room.members.length > 1">
-                <h1 class="title">Hold your horses...</h1>
-                <p class="body">We're waiting for the right gears to align so we can get your browser ready - hold tight!<br>If this is taking a little long, then either restart the room or contact support.</p>
+                <h1 class="title" v-html="$t('room.player.waiting.title')"></h1>
+                <p class="body" v-html="$t('room.player.waiting.body')"></p>    
             </div>
             <!-- A portal has been placed into the queue -->
             <div class="player-msg" v-else-if="portalStatus === 'in-queue'">
-                <h1 class="title">You're in the queue!</h1>
-                <p class="body">There are a couple rooms infront of you waiting for a virtual browser, it shouldn't take too long</p>
+                <h1 class="title" v-html="$t('room.player.queued.title')"></h1>
+                <p class="body" v-html="$t('room.player.queued.body')"></p>
             </div>
-            <!-- The portal is either being created or starting -->
-            <div class="player-msg" v-else-if="portalStatus === 'creating' || portalStatus === 'starting'">
-                <h1 class="title">We're {{ portalStatus }} your browser now</h1>
-                <p class="body">Normally this takes a couple seconds, hang tight!<br>If you have any issues either refresh the page, ask the room owner to restart the browser or contact support.</p>
+            <!-- The portal is being created -->
+            <div class="player-msg" v-else-if="portalStatus === 'creating'">
+                <h1 class="title" v-html="$t('room.player.creating.title')"></h1>
+                <p class="body" v-html="$t('room.player.creating.body')"></p>
+            </div>
+            <!-- The portal is starting -->
+            <div class="player-msg" v-else-if="portalStatus === 'starting'">
+                <h1 class="title" v-html="$t('room.player.starting.title')"></h1>
+                <p class="body" v-html="$t('room.player.starting.body')"></p>    
             </div>
             <!-- The portal is created and the stream between the client and the aperture is being established -->
             <div class="player-msg" v-else-if="portalStatus === 'open'">
-                <h1 class="title">Strap in...</h1>
-                <p class="body">Everything is ready - we're just getting the stream between you and the VM started!</p>
+                <h1 class="title" v-html="$t('room.player.connecting.title')"></h1>
+                <p class="body" v-html="$t('room.player.connecting.body')"></p>
             </div>
             <div class="loading-wrapper">
                 <div class="loading"></div>
diff --git a/components/player/user-icon.vue b/components/player/user-icon.vue
index 34911aa..064774b 100644
--- a/components/player/user-icon.vue
+++ b/components/player/user-icon.vue
@@ -26,19 +26,20 @@
             },
 
             userHoverTitle() {
-                if(this.controllerId === null && this.isUserSelf) return 'Take the controller'
-                if(!this.isUserSelf && this.canPassControl) return `Pass ${this.member.name} the controller`
+                if(this.controllerId === null && this.isUserSelf) return this.$t('room.controller.take')
+                if(!this.isUserSelf && this.canPassControl) return this.$t('room.controller.pass', {member: this.member.name})
 
-                return `${this.member.name}${this.isUserSelf ? ' (you)' : ''}`
+                return `${this.member.name}${this.isUserSelf ? ` (${this.$t('general.you')})` : ''}`
             },
             indicatorHoverTitle() {
-                if(this.hasControl && this.interactable)
-                    return `Release the controller${this.isUserSelf ? '' : ` from ${this.member.name}`}`
+                if(this.hasControl && this.interactable) {
+                   return this.isUserSelf ? this.$t('room.controller.release') : this.$t('room.controller.releaseOther', {member: this.member.name})
+                }
 
-                if(this.canPassControl) return `Give the controller to ${this.member.name}`
-                if(this.hasControl) return `${this.member.name} has the controller`
+                if(this.canPassControl) return this.$t('room.controller.giveOther', {member: this.member.name})
+                if(this.hasControl) return this.$t('room.controller.current', {member: this.member.name})
 
-                return `${this.member.name}${this.isUserSelf ? ' (you)' : ''}`
+                return `${this.member.name}${this.isUserSelf ? ` (${this.$t('general.you')})` : ''}`
             },
 
             interactable() {
diff --git a/components/player/viewer.vue b/components/player/viewer.vue
index 0841c1c..8e8ae6c 100644
--- a/components/player/viewer.vue
+++ b/components/player/viewer.vue
@@ -8,10 +8,10 @@
         <div class="player-tooltips" v-if=showMutedPopup>
             <div class="player-tooltip" :class="{ visible: showMutedPopup }">
                 <div class="player-tooltip-info">
-                    <p class="player-tooltip-title">{{ brand.name }} is muted</p>
-                    <p class="player-tooltip-body">Your browser requires user interaction in order to let us play video with audio</p>
+                    <p class="player-tooltip-title" v-html="$t('room.viewer.muted.title', {brand: brand.name})"></p>
+                    <p class="player-tooltip-body" v-html="$t('room.viewer.muted.body')"></p>
                 </div>
-                <Button @click.native=unmute()>Unmute</Button>
+                <Button @click.native=unmute()>{{ $t('room.viewer.unmute') }}</Button>
             </div>
         </div>
     </div>
diff --git a/components/room/create.vue b/components/room/create.vue
index 9bf4706..c1da2f2 100644
--- a/components/room/create.vue
+++ b/components/room/create.vue
@@ -4,11 +4,11 @@
             <img src="/icons/circle-close.svg" class="close-button">
             <img src="/icons/circle-close-filled.svg" class="close-button-hover">
         </nuxt-link>
-        <h1 class="title">Create a Room</h1>
-        <p class="subtitle">When you create a room, you'll be able to add your friends and browse the internet.</p>
+        <h1 class="title" v-html="$t('home.modals.createRoom.title')"></h1>
+        <p class="subtitle" v-html="$t('home.modals.createRoom.subtitle')"></p>
         <Form>
             <Input placeholder="Room Name" v-model=roomName :disabled=loading @keydown.enter=createRoom() />
-            <Button @click.native=createRoom() :disabled=!isRoomNameValid :loading=loading>{{ loading ? 'Creating room...' : 'Create Room'}}</Button>
+            <Button @click.native=createRoom() :disabled=!isRoomNameValid :loading=loading>{{ loading ? $t('home.modals.createRoom.creatingRoom') : $t('home.modals.createRoom.createRoom')}}</Button>
         </Form>
         <p class="error" v-if=error>{{ error }}</p>
     </div>
diff --git a/components/room/join.vue b/components/room/join.vue
index eb21b0b..75f6af9 100644
--- a/components/room/join.vue
+++ b/components/room/join.vue
@@ -4,11 +4,11 @@
             <img src="/icons/circle-close.svg" class="close-button">
             <img src="/icons/circle-close-filled.svg" class="close-button-hover">
         </nuxt-link>
-        <h1 class="title">Join Room</h1>
-        <p class="subtitle">If your friend sent you an invite to a room, you're in the right place. Copy the invite into the box below and we'll get you sorted in no time</p>
+        <h1 class="title" v-html="$t('home.modals.joinRoom.title')"></h1>
+        <p class="subtitle" v-html="$t('home.modals.joinRoom.subtitle')"></p>
         <Form>
-            <Input placeholder="Invite Code or Link" v-model=invite :disabled=loading @keydown.enter=joinRoom() />
-            <Button @click.native=joinRoom() :loading=loading :disabled=!isRoomInviteValid>{{ loading ? 'Finding room...' : 'Find Room' }}</Button>
+            <Input :placeholder="$t('home.modals.joinRoom.placeholder')" v-model=invite :disabled=loading @keydown.enter=joinRoom() />
+            <Button @click.native=joinRoom() :loading=loading :disabled=!isRoomInviteValid>{{ loading ? $t('home.modals.joinRoom.findingRoom') : $t('home.modals.joinRoom.findRoom') }}</Button>
         </Form>
         <p class="error" v-if=error>{{ error }}</p>
     </div>
diff --git a/lang/en_US.json b/lang/en_US.json
new file mode 100644
index 0000000..9a55d00
--- /dev/null
+++ b/lang/en_US.json
@@ -0,0 +1,118 @@
+{
+  "index": {
+    "title": "Share the internet with your friends",
+    "body": "{brand} makes it easy to start up a room, add your friends, and browse the web",
+    "loginWithDiscord": "Login with Discord",
+    "continueToBrand": "Continue to {brand}"
+  },
+  "discord": {
+    "authenticating": "Authenticating...",
+    "authenticated": "Authenticated! Redirecting...",
+    "authenticationError": "An error occured while authenticating. Please go home and Login with Discord again."
+  },
+  "home": {
+    "inRoom": {
+      "title": "Let's jump back into watching",
+      "subtitle": "You're already in a room. Click the button below to get back into the room.<br>Want out? There's an option for that too",
+      "returnToRoom": "Return to {room}",
+      "leaving": "Leaving {room}...",
+      "leave": "Leave {room}"
+    },
+    "noRoom": {
+      "title": "Welcome Home",
+      "subtitle": "It's never been easier to join or start a room with your friends.<br>Select an option below to get started",
+      "joinRoom": {
+        "header": "Join a Room",
+        "description": "Received an invite link or an invite code for a room? Enter it here!"
+      },
+      "createRoom": {
+        "header": "Create a Room",
+        "description": "Need a room where you can watch anything with your friends? This is the place to go"
+      }
+    },
+    "modals": {
+      "joinRoom": {
+        "title": "Join Room",
+        "subtitle": "If your friend sent you an invite to a room, you're in the right place. Copy the invite into the box below and we'll get you sorted in no time",
+        "placeholder": "Invite Code or Link",
+        "findRoom": "Find Room",
+        "findingRoom": "Finding Room..."
+      },
+      "createRoom": {
+        "title": "Create a Room",
+        "subtitle": "When you create a room, you'll be able to add your friends and browse the internet.",
+        "createRoom": "Create Room",
+        "creatingRoom": "Creating Room..."
+      }
+    }
+  },
+  "invite": {
+    "title": "Join {room}",
+    "subtitle": "Start watching along with <b>{membersList}</b> instantly",
+    "loginWithDiscord": "Login with Discord",
+    "acceptInvite": "Accept Invite",
+    "acceptingInvite": "Accepting Invite...",
+    "viewRoom": "View Room",
+    "alreadyInThisRoom": "You're already in this room",
+    "membersOthers": "and {0} others",
+    "inviteNotFound": {
+      "title": "Invite Not Found",
+      "subtitle": "We couldn't find a room linked with this invite code. Make sure you have the right invite and try again!"
+    },
+    "confirmLeave": "Are you sure you want to leave {room} Once you leave, you cannot join back without an invite"
+  },
+  "room": {
+    "chat": {
+      "noMessages": "Nobody said nothing. Maybe say something?",
+      "placeholder": "Say something cool...",
+      "sendButtonTooltip": "Send Message",
+      "typing": "{users} {isAre} typing..."
+    },
+    "player": {
+      "new": {
+        "title": "And so it begins...",
+        "body": "Add a friend or two to get the party started! Once someone else joins this room, we'll queue up your room for a virtual browser"
+      },
+      "waiting": {
+        "title": "Hold your horses...",
+        "body": "We're waiting for the right gears to align so we can get your browser ready - hold tight!<br>If this is taking a little long, then either restart the room or contact support."
+      },
+      "queued": {
+        "title": "You're in the queue!",
+        "body": "There are a couple rooms infront of you waiting for a virtual browser, it shouldn't take too long"
+      },
+      "creating": {
+        "title": "We're creating your browser now",
+        "body": "Normally this takes a couple seconds, hang tight!<br>If you have any issues either refresh the page, ask the room owner to restart the browser or contact support."
+      },
+      "starting": {
+        "title": "We're starting your browser now",
+        "body": "Normally this takes a couple seconds, hang tight!<br>If you have any issues either refresh the page, ask the room owner to restart the browser or contact support."
+      },
+      "connecting": {
+        "title": "Strap in...",
+        "body": "Everything is ready - we're just getting the stream between you and the VM started!"
+      }
+    },
+    "controller": {
+      "take": "Take the controller",
+      "pass": "Pass {member} the controller",
+      "release": "Release the controller",
+      "releaseOther": "Release the controller from {member}",
+      "giveOther": "Give the controller to {member}",
+      "current": "{member} has the controller"
+    },
+    "viewser": {
+      "muted": { 
+        "title": "{brand} is muted",
+        "body": "Your browser requires user interaction in order to let us play video with audio"
+      },
+      "unmute": "Unmute"
+    }
+  },
+  "general": {
+    "is": "is",
+    "are": "are",
+    "you": "you"
+  }
+}
\ No newline at end of file
diff --git a/middleware/i18n.js b/middleware/i18n.js
new file mode 100644
index 0000000..82699e2
--- /dev/null
+++ b/middleware/i18n.js
@@ -0,0 +1,15 @@
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+export default ({ app }) => {
+  app.i18n = new VueI18n({
+    locale: "en_US",
+
+    fallbackLocale: "en_US",
+    messages: {
+      en_US: require("~/lang/en_US.json")
+    }
+  });
+};
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index a9aae10..19388cc 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -8,6 +8,7 @@ export default {
 
         '@nuxtjs/axios'
     ],
+    plugins: ["~/middleware/i18n.js"],
     env: {
         /**
          * Brand
diff --git a/package.json b/package.json
index e00a7e9..eb004e2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "jsmpeg": "^1.0.0",
     "nuxt": "^2.10.1",
     "nuxt-client-init-module": "^0.1.6",
-    "nuxt-clipboard2": "^0.2.1"
+    "nuxt-clipboard2": "^0.2.1",
+    "vue-i18n": "^8.15.0"
   }
 }
diff --git a/pages/auth/discord.vue b/pages/auth/discord.vue
index 52697e6..0441a12 100644
--- a/pages/auth/discord.vue
+++ b/pages/auth/discord.vue
@@ -1,5 +1,5 @@
 <template>
-    <p>{{ message }}</p>
+    <p v-html="message"></p>
 </template>
 <script>
 export default {
@@ -11,7 +11,7 @@ export default {
     middleware: 'logged-out',
     data() {
         return {
-            message: 'Authenticating...'
+            message: this.$t('discord.authenticating')
         }
     },
     async mounted() {
@@ -20,13 +20,13 @@ export default {
         try {
             const token = await this.$axios.$post(`/auth/discord`, { code })
 
-            this.message = 'Authenticated! Redirecting...'
-
+            this.message = this.$t('discord.authenticated')
+            
             this.$store.commit('handleToken', { token, save: true })
             this.$store.dispatch('fetchUser')
             this.$router.push(state ? `/i/${state.split('=')[1]}` : '/home')
         } catch(error) {
-            this.message = 'An error occured while authenticating. Please go home and Login with Discord again.'
+            this.message = this.$t('discord.authenticationError')
         }
     }
 }
diff --git a/pages/home.vue b/pages/home.vue
index fdac51f..3dee4a5 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,149 +1,156 @@
 <template>
-    <div class="home" v-if=user>
-        <div class="home-room-wrapper">
-            <div class="in-room" v-if=room>
-                <h1 class="title">Let's jump back into watching</h1>
-                <p class="subtitle">You're already in a room. Click the button below to get back into the room.<br>Want out? There's an option for that too</p>
-                <div class="options has-link is-horizontal">
-                    <nuxt-link to="/room" :class="{ 'disabled': leavingRoom }">
-                        <div class="box option join-room" :class="{ 'disabled': leavingRoom }">
-                            <div class="option-inner">
-                                <div class="portal-indicator loading" v-if="room.portal.status === 'open'"></div>
-                                <img src="/icons/tv.svg" class="icon">
-                                <h3 class="header">Return to {{ room.name }}</h3>
-                            </div>
-                        </div>
-                    </nuxt-link>
-                    <nuxt-link to="" :class="{ 'disabled': leavingRoom }" @click.native=leaveRoom()>
-                        <div class="box option join-room" :class="{ 'loading': leavingRoom, 'disabled': leavingRoom }">
-                            <div class="option-inner">
-                                <img src="/icons/panel-arrow-right.svg" class="icon">
-                                <h3 class="header">{{ leavingRoom ? 'Leaving' : 'Leave' }} {{ room.name }}{{ leavingRoom ? '...' : '' }}</h3>
-                            </div>
-                        </div>
-                    </nuxt-link>
-                </div>
+  <div class="home" v-if="user">
+    <div class="home-room-wrapper">
+      <div class="in-room" v-if="room">
+        <h1 class="title" v-html="$t('home.inRoom.title')"></h1>
+        <p class="subtitle" v-html="$t('home.inRoom.subtitle')"></p>
+        <div class="options has-link is-horizontal">
+          <nuxt-link to="/room" :class="{ 'disabled': leavingRoom }">
+            <div class="box option join-room" :class="{ 'disabled': leavingRoom }">
+              <div class="option-inner">
+                <div class="portal-indicator loading" v-if="room.portal.status === 'open'"></div>
+                <img src="/icons/tv.svg" class="icon" />
+                <h3 class="header" v-html="$t('home.inRoom.returnToRoom', {room: room.name})"></h3>
+              </div>
             </div>
-            <div class="no-room" v-else-if=!room>
-                <h1 class="title">Welcome Home</h1>
-                <p class="subtitle">It's never been easier to join or start a room with your friends.<br>Select an option below to get started</p>
-                <div class="options has-link is-horizontal">
-                    <nuxt-link to="#join-room" @click.native=showJoinRoomModal()>
-                        <div class="box option join-room">
-                            <div class="option-inner">
-                                <img src="/icons/panel-arrow-right.svg" class="icon">
-                                <h3 class="header">Join a Room</h3>
-                                <p class="description">Received an invite link or an invite code for a room? Enter it here!</p>
-                            </div>
-                        </div>
-                    </nuxt-link>
-                    <nuxt-link to="#create-room" @click.native=showCreateRoomModal()>
-                        <div class="box option create-room">
-                            <div class="option-inner">
-                                <img src="/icons/add.svg" class="icon">
-                                <h3 class="header">Create a Room</h3>
-                                <p class="description">Need a room where you can watch anything with your friends? This is the place to go</p>
-                            </div>
-                        </div>
-                    </nuxt-link>
-                </div>
+          </nuxt-link>
+          <nuxt-link to :class="{ 'disabled': leavingRoom }" @click.native="leaveRoom()">
+            <div
+              class="box option join-room"
+              :class="{ 'loading': leavingRoom, 'disabled': leavingRoom }"
+            >
+              <div class="option-inner">
+                <img src="/icons/panel-arrow-right.svg" class="icon" />
+                <h3
+                  class="header"
+                  v-html="leavingRoom ? $t('home.inRoom.leaving', { room: room.name }) : $t('home.inRoom.leave', { room: room.name })"
+                ></h3>
+              </div>
             </div>
-            <Modal ref="createRoomModal" :cover="true">
-                <CreateRoom :modal="true" />
-            </Modal>
-            <Modal ref="joinRoomModal" :cover="true">
-                <JoinRoom :modal="true" />
-            </Modal>
+          </nuxt-link>
         </div>
+      </div>
+      <div class="no-room" v-else-if="!room">
+        <h1 class="title" v-html="$t('home.noRoom.title')"></h1>
+        <p class="subtitle" v-html="$t('home.noRoom.subtitle')"></p>
+        <div class="options has-link is-horizontal">
+          <nuxt-link to="#join-room" @click.native="showJoinRoomModal()">
+            <div class="box option join-room">
+              <div class="option-inner">
+                <img src="/icons/panel-arrow-right.svg" class="icon" />
+                <h3 class="header" v-html="$t('home.noRoom.joinRoom.header')"></h3>
+                <p class="description" v-html="$t('home.noRoom.joinRoom.description')"></p>
+              </div>
+            </div>
+          </nuxt-link>
+          <nuxt-link to="#create-room" @click.native="showCreateRoomModal()">
+            <div class="box option create-room">
+              <div class="option-inner">
+                <img src="/icons/add.svg" class="icon" />
+                <h3 class="header" v-html="$t('home.noRoom.createRoom.header')"></h3>
+                <p class="description" v-html="$t('home.noRoom.createRoom.description')"></p>
+              </div>
+            </div>
+          </nuxt-link>
+        </div>
+      </div>
+      <Modal ref="createRoomModal" :cover="true">
+        <CreateRoom :modal="true" />
+      </Modal>
+      <Modal ref="joinRoomModal" :cover="true">
+        <JoinRoom :modal="true" />
+      </Modal>
     </div>
+  </div>
 </template>
 <script>
-    import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
-    import Modal from '~/components/modal/index'
-    import JoinRoom from '~/components/room/join'
-    import CreateRoom from '~/components/room/create'
+import Modal from "~/components/modal/index";
+import JoinRoom from "~/components/room/join";
+import CreateRoom from "~/components/room/create";
 
-    import Input from '~/components/input'
-    import Button from '~/components/button'
+import Input from "~/components/input";
+import Button from "~/components/button";
 
-    export default {
-        head() {
-            return {
-                title: (
-                    this.isCreateRoomModalVisible ?
-                    'Create a Room' :
-                    (
-                        this.isJoinRoomModalVisible ?
-                        'Join a Room' :
-                        null
-                    )
-                )
-            }
-        },
-        middleware: 'authenticated',
-        computed: {
-            ...mapGetters(['user']),
-            room() {
-                return this.$store.state.room || this.user.room || null
-            },
+export default {
+  head() {
+    return {
+      title: this.isCreateRoomModalVisible
+        ? "Create a Room"
+        : this.isJoinRoomModalVisible
+        ? "Join a Room"
+        : null
+    };
+  },
+  middleware: "authenticated",
+  computed: {
+    ...mapGetters(["user"]),
+    room() {
+      return this.$store.state.room || this.user.room || null;
+    },
 
-            isJoinRoomModalVisible() {
-                if(!this.$refs.joinRoomModal) return false
+    isJoinRoomModalVisible() {
+      if (!this.$refs.joinRoomModal) return false;
 
-                return this.$refs.joinRoomModal.visible
-            },
-            isCreateRoomModalVisible() {
-                if(!this.$refs.createRoomModal) return false
+      return this.$refs.joinRoomModal.visible;
+    },
+    isCreateRoomModalVisible() {
+      if (!this.$refs.createRoomModal) return false;
 
-                return this.$refs.createRoomModal.visible
-            }
-        },
-        methods: {
-            leaveRoom() {
-                if(!confirm('Are you sure you want to leave this room? Once you leave this room, you cannot join back without an invite')) return
+      return this.$refs.createRoomModal.visible;
+    }
+  },
+  methods: {
+    leaveRoom() {
+      if (
+        !confirm(
+          "Are you sure you want to leave this room? Once you leave this room, you cannot join back without an invite"
+        )
+      )
+        return;
 
-                this.leavingRoom = true
-                this.$store.dispatch('leaveRoom')
-            },
+      this.leavingRoom = true;
+      this.$store.dispatch("leaveRoom");
+    },
 
-            showCreateRoomModal() {
-                if(!this.$refs.createRoomModal) return
+    showCreateRoomModal() {
+      if (!this.$refs.createRoomModal) return;
 
-                this.$refs.createRoomModal.visible = true
-            },
-            showJoinRoomModal() {
-                if(!this.$refs.joinRoomModal) return
+      this.$refs.createRoomModal.visible = true;
+    },
+    showJoinRoomModal() {
+      if (!this.$refs.joinRoomModal) return;
 
-                this.$refs.joinRoomModal.visible = true
-            },
-            hideModals() {
-                if(!this.$refs.joinRoomModal && !this.$refs.joinRoomModal) return
+      this.$refs.joinRoomModal.visible = true;
+    },
+    hideModals() {
+      if (!this.$refs.joinRoomModal && !this.$refs.joinRoomModal) return;
 
-                this.$refs.createRoomModal.visible = false
-                this.$refs.joinRoomModal.visible = false
-            }
-        },
-        data() {
-            return {
-                leavingRoom: false
-            }
-        },
-        mounted() {
-            if(!this.$refs.joinRoomModal && !this.$refs.joinRoomModal) return
+      this.$refs.createRoomModal.visible = false;
+      this.$refs.joinRoomModal.visible = false;
+    }
+  },
+  data() {
+    return {
+      leavingRoom: false
+    };
+  },
+  mounted() {
+    if (!this.$refs.joinRoomModal && !this.$refs.joinRoomModal) return;
 
-            this.$refs.createRoomModal.visible = this.$route.hash === '#create-room'
-            this.$refs.joinRoomModal.visible = this.$route.hash === '#join-room'
-        },
-        components: {
-            Input,
-            Button,
+    this.$refs.createRoomModal.visible = this.$route.hash === "#create-room";
+    this.$refs.joinRoomModal.visible = this.$route.hash === "#join-room";
+  },
+  components: {
+    Input,
+    Button,
 
-            Modal,
-            JoinRoom,
-            CreateRoom
-        }
-    }
+    Modal,
+    JoinRoom,
+    CreateRoom
+  }
+};
 </script>
 
 <style src="~/static/css/home.css" scoped></style>
diff --git a/pages/i/_id.vue b/pages/i/_id.vue
index 72a22c5..6e502b5 100644
--- a/pages/i/_id.vue
+++ b/pages/i/_id.vue
@@ -10,23 +10,23 @@
                 <div class="invite-member-icons-overlay"></div>
             </div>
             <div class="invite-details">
-                <h1 class="title">Join {{ room.name }}</h1>
-                <p class="subtitle">Start watching along with {{ membersList }} instantly</p>
+                <h1 class="title" v-html="$t('invite.title', {room: room.name})"></h1>
+                <p class="subtitle" v-html="$t('invite.subtitle', {membersList})"></p>
                 <Form>
                     <Button type="discord" :href=redirectUrl v-if=!user icon="/icons/discord-white.svg" hover="/icons/discord-colour.svg">
-                        Login with Discord
+                        {{ $t('invite.loginWithDiscord') }}
                     </Button>
-                    <Button v-else-if=!isSelfInInvitedRoom :loading=loading :disabled=isSelfInRoom @click.native=joinRoom()>{{ loading ? 'Accepting invite...' : 'Accept Invite' }}</Button>
-                    <Button v-else-if=isSelfInInvitedRoom href="/room">View Room</Button>
+                    <Button v-else-if=!isSelfInInvitedRoom :loading=loading :disabled=isSelfInRoom @click.native=joinRoom()>{{ loading ? $t('invite.acceptingInvite') : $t('invite.acceptInvite') }}</Button>
+                    <Button v-else-if=isSelfInInvitedRoom href="/room">{{ $t('invite.viewRoom') }}</Button>
                 </Form>
                 <p class="disclaimer" v-if="isSelfInRoom && !isSelfInInvitedRoom">You're already in a room. You need to <a href="#" @click=leaveRoom()>leave the room you're in</a> before joining this one</p>
-                <p class="disclaimer" v-else-if=isSelfInInvitedRoom>You're already in this room</p>
+                <p class="disclaimer" v-else-if=isSelfInInvitedRoom v-html="$t('invite.alreadyInThisRoom')"></p>
                 <p class="error" v-if=error>{{ error }}</p>
             </div>
         </div>
         <div class="invite-not-found" v-else>
-            <h1 class="title">Invite Not Found</h1>
-            <p class="subtitle">We couldn't find a room linked with this invite code. Make sure you have the right invite and try again!</p>
+            <h1 class="title" v-html="$t('invite.inviteNotFound.title')"></h1>
+            <p class="subtitle" v-html="$t('invite.inviteNotFound.subtitle')"></p>
             <p>If something seems fishy, <nuxt-link to="/support" target="_blank">contact support</nuxt-link>.</p>
         </div>
     </div>
@@ -57,10 +57,10 @@
             if(this.room)
                 inviteHeaders = {
                     meta: [
-                        { name: 'description', content: `You've been invted to join ${this.membersList} on ${this.brand.name}, the best way to share the internet with your friends` },
+                        { name: 'description', content: `You've been invited to join ${this.membersList} on ${this.brand.name}, the best way to share the internet with your friends` },
 
                         { property: 'og:title', content: `Join ${this.room.name} on ${this.brand.name}` },
-                        { property: 'og:description', content: `You've been invted to join ${this.membersList} on ${this.brand.name}, the best way to share the internet with your friends` },
+                        { property: 'og:description', content: `You've been invited to join ${this.membersList} on ${this.brand.name}, the best way to share the internet with your friends` },
                     ],
                     link: [
                         { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
@@ -76,9 +76,9 @@
             ...mapGetters(['user']),
 
             membersList() {
-                const memberLimit = 3, members = this.room.members.slice(0, 3)
+                const memberLimit = 3, members = this.room.members.slice(0, memberLimit)
 
-                return `${members.map(({ name }) => name).join(', ')}${this.room.members.length > memberLimit ? ` and ${this.room.members.length - memberLimit} others` : ''}`
+                return `${members.map(({ name }) => name).join(', ')}${this.room.members.length > memberLimit ? ` ${this.$t("invite.membersOthers", [this.room.members.length - memberLimit])}` : ''}`
             },
 
             isSelfInRoom() {
@@ -116,7 +116,7 @@
                 }
             },
             leaveRoom() {
-                if(!confirm(`Are you sure you want to leave ${this.user.room.name}? Once you leave, you cannot join back without an invite`)) return
+                if(!confirm(this.$t('invite.confirmLeave', {room: this.user.room.name}))) return
 
                 this.$store.dispatch('leaveRoom')
             }
diff --git a/pages/index.vue b/pages/index.vue
index c5a4f1c..dbf34da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,55 +1,72 @@
 <template>
-    <div class="landing">
-        <div :class="{ left: hasLandingVideo, 'has-landing-video': hasLandingVideo }">
-            <div class="center">
-                <img src="/img/logo.svg" class="logo">
-                <h1 class="title">Share the internet with your friends</h1>
-                <p class="body">{{ brand.name }} makes it easy to start up a room, add your friends, and browse the web</p>
-                <div class="login" v-if=!token>
-                    <Button type="discord" :href=redirectUrl icon="/icons/discord-white.svg" hover="/icons/discord-colour.svg">
-                        Login with Discord
-                    </Button>
-                </div>
-                <div class="continue" v-else>
-                    <Button href="/home" icon="/icons/user-white.svg" hover="/icons/user.svg">Continue to {{ brand.name }}</Button>
-                </div>
-            </div>
+  <div class="landing">
+    <div :class="{ left: hasLandingVideo, 'has-landing-video': hasLandingVideo }">
+      <div class="center">
+        <img src="/img/logo.svg" class="logo" />
+        <h1 class="title">{{ $t("index.title") }}</h1>
+        <p class="body">{{ $t("index.body", { brand: brand.name }) }}</p>
+        <div class="login" v-if="!token">
+          <Button
+            type="discord"
+            :href="redirectUrl"
+            icon="/icons/discord-white.svg"
+            hover="/icons/discord-colour.svg"
+          >{{ $t("index.loginWithDiscord") }}</Button>
         </div>
-        <div class="right" v-if=hasLandingVideo>
-            <iframe class="video" width="1920" height="1080" :src="`https://www.youtube.com/embed/${brand.landing_video_id}?controls=0&autoplay=1&loop=1&playlist=${brand.landing_video_id}`" frameborder="0" allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <div class="continue" v-else>
+          <Button
+            href="/home"
+            icon="/icons/user-white.svg"
+            hover="/icons/user.svg"
+          >{{ $t("index.continueToBrand", {brand: brand.name}) }}</Button>
         </div>
+      </div>
     </div>
+    <div class="right" v-if="hasLandingVideo">
+      <iframe
+        class="video"
+        width="1920"
+        height="1080"
+        :src="`https://www.youtube.com/embed/${brand.landing_video_id}?controls=0&autoplay=1&loop=1&playlist=${brand.landing_video_id}`"
+        frameborder="0"
+        allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </div>
 </template>
 <script>
-    import { mapGetters } from 'vuex'
-    
-    import brand from '~/brand/config'
+import { mapGetters } from "vuex";
+
+import brand from "~/brand/config";
 
-    import Button from '~/components/button'
+import Button from "~/components/button";
 
-    export default {
-        async asyncData(context) {
-            const redirectUrl = await context.$axios.$get('auth/discord/redirect')
+export default {
+  async asyncData(context) {
+    const redirectUrl = await context.$axios.$get("auth/discord/redirect");
 
-            return { redirectUrl }
-        },
-        computed: {
-            ...mapGetters(['token']),
+    return { redirectUrl };
+  },
+  computed: {
+    ...mapGetters(["token"]),
 
-            hasLandingVideo() {
-                return this.brand.landing_video_id && this.brand.landing_video_id.length > 0
-            }
-        },
-        layout: 'logged-out',
-        middleware: 'logged-out',
-        data() {
-            return {
-                brand
-            }
-        },
-        components: {
-            Button
-        }
+    hasLandingVideo() {
+      return (
+        this.brand.landing_video_id && this.brand.landing_video_id.length > 0
+      );
     }
+  },
+  layout: "logged-out",
+  middleware: "logged-out",
+  data() {
+    return {
+      brand
+    };
+  },
+  components: {
+    Button
+  }
+};
 </script>
 <style src="~/static/css/landing.css" scoped></style>
diff --git a/yarn.lock b/yarn.lock
index 25bd2c5..0141bc5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7113,6 +7113,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-i18n@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.15.0.tgz#9b11ef8e7a124f67cdf788c8c90a81f3606240ed"
+  integrity sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q==
+
 vue-loader@^15.7.1:
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.1.tgz#6ccacd4122aa80f69baaac08ff295a62e3aefcfd"