From 44eedc8b1da3046869676beefd693f1b7711954a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 7 Nov 2017 16:59:21 -0500
Subject: [PATCH] require all templates for in-line html

---
 .../views/accountsLoginTwoFactor.html         |  4 +-
 src/popup/app/config.js                       | 60 +++++++++----------
 src/popup/app/global/home.html                |  2 +-
 src/popup/app/global/splash.html              |  2 +-
 webpack.common.js                             | 17 +++---
 5 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/popup/app/accounts/views/accountsLoginTwoFactor.html b/src/popup/app/accounts/views/accountsLoginTwoFactor.html
index f1e0a0b11b..d2519011d8 100644
--- a/src/popup/app/accounts/views/accountsLoginTwoFactor.html
+++ b/src/popup/app/accounts/views/accountsLoginTwoFactor.html
@@ -86,7 +86,7 @@
     <div class="content">
         <div class="two-factor-key-page">
             <p>{{i18n.insertYubiKey}}</p>
-            <img src="../images/two-factor/yubikey.jpg" alt="" class="img-rounded img-responsive" />
+            <img src="../../../../images/two-factor/yubikey.jpg" alt="" class="img-rounded img-responsive" />
         </div>
         <div class="list">
             <div class="list-section">
@@ -125,7 +125,7 @@
             <p ng-if="!u2fReady">Loading...</p>
             <div ng-if="u2fReady">
                 <p>{{i18n.insertU2f}}</p>
-                <img src="../images/two-factor/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
+                <img src="../../../../images/two-factor/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
             </div>
         </div>
         <div class="list">
diff --git a/src/popup/app/config.js b/src/popup/app/config.js
index dbf10c77f4..8753349c2c 100644
--- a/src/popup/app/config.js
+++ b/src/popup/app/config.js
@@ -46,21 +46,21 @@ angular
             .state('splash', {
                 url: '/splash',
                 controller: 'baseController',
-                templateUrl: 'app/global/splash.html',
+                template: require('./global/splash.html'),
                 data: { authorize: false },
                 params: { animation: null }
             })
             .state('privateMode', {
                 url: '/private-mode',
                 controller: 'privateModeController',
-                templateUrl: 'app/global/privateMode.html',
+                template: require('./global/privateMode.html'),
                 data: { authorize: false },
                 params: { animation: null }
             })
             .state('home', {
                 url: '/home',
                 controller: 'baseController',
-                templateUrl: 'app/global/home.html',
+                template: require('./global/home.html'),
                 data: { authorize: false },
                 params: { animation: null }
             })
@@ -68,35 +68,35 @@ angular
             .state('login', {
                 url: '/login',
                 controller: 'accountsLoginController',
-                templateUrl: 'app/accounts/views/accountsLogin.html',
+                template: require('./accounts/views/accountsLogin.html'),
                 data: { authorize: false },
                 params: { animation: null, email: null }
             })
             .state('hint', {
                 url: '/hint',
                 controller: 'accountsHintController',
-                templateUrl: 'app/accounts/views/accountsHint.html',
+                template: require('./accounts/views/accountsHint.html'),
                 data: { authorize: false },
                 params: { animation: null }
             })
             .state('twoFactor', {
                 url: '/two-factor',
                 controller: 'accountsLoginTwoFactorController',
-                templateUrl: 'app/accounts/views/accountsLoginTwoFactor.html',
+                template: require('./accounts/views/accountsLoginTwoFactor.html'),
                 data: { authorize: false },
                 params: { animation: null, email: null, masterPassword: null, providers: null, provider: null }
             })
             .state('twoFactorMethods', {
                 url: '/two-factor-methods',
                 controller: 'accountsTwoFactorMethodsController',
-                templateUrl: 'app/accounts/views/accountsTwoFactorMethods.html',
+                template: require('./accounts/views/accountsTwoFactorMethods.html'),
                 data: { authorize: false },
                 params: { animation: null, email: null, masterPassword: null, providers: null, provider: null }
             })
             .state('register', {
                 url: '/register',
                 controller: 'accountsRegisterController',
-                templateUrl: 'app/accounts/views/accountsRegister.html',
+                template: require('./accounts/views/accountsRegister.html'),
                 data: { authorize: false },
                 params: { animation: null }
             })
@@ -104,24 +104,24 @@ angular
             .state('tabs', {
                 url: '/tab',
                 abstract: true,
-                templateUrl: 'app/global/tabs.html',
+                template: require('./global/tabs.html'),
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('tabs.current', {
                 url: '/current',
-                templateUrl: 'app/current/views/current.html',
+                template: require('./current/views/current.html'),
                 controller: 'currentController'
             })
             .state('tabs.vault', {
                 url: '/vault',
-                templateUrl: 'app/vault/views/vault.html',
+                template: require('./vault/views/vault.html'),
                 controller: 'vaultController',
                 params: { syncOnLoad: false, searchText: null }
             })
             .state('tabs.settings', {
                 url: '/settings',
-                templateUrl: 'app/settings/views/settings.html',
+                template: require('./settings/views/settings.html'),
                 controller: 'settingsController'
             })
             .state('tabs.tools', {
@@ -131,35 +131,35 @@ angular
 
             .state('viewFolder', {
                 url: '/view-folder?folderId',
-                templateUrl: 'app/vault/views/vaultViewFolder.html',
+                template: require('./vault/views/vaultViewFolder.html'),
                 controller: 'vaultViewFolderController',
                 data: { authorize: true },
                 params: { animation: null, from: 'vault' }
             })
             .state('viewCipher', {
                 url: '/view-cipher?cipherId',
-                templateUrl: 'app/vault/views/vaultViewCipher.html',
+                template: require('./vault/views/vaultViewCipher.html'),
                 controller: 'vaultViewCipherController',
                 data: { authorize: true },
                 params: { animation: null, from: 'vault' }
             })
             .state('addCipher', {
                 url: '/add-cipher',
-                templateUrl: 'app/vault/views/vaultAddCipher.html',
+                template: require('./vault/views/vaultAddCipher.html'),
                 controller: 'vaultAddCipherController',
                 data: { authorize: true },
                 params: { animation: null, name: null, uri: null, folderId: null, cipher: null, from: 'vault' }
             })
             .state('editCipher', {
                 url: '/edit-cipher?cipherId',
-                templateUrl: 'app/vault/views/vaultEditCipher.html',
+                template: require('./vault/views/vaultEditCipher.html'),
                 controller: 'vaultEditCipherController',
                 data: { authorize: true },
                 params: { animation: null, fromView: true, cipher: null, from: 'vault' }
             })
             .state('attachments', {
                 url: '/attachments?id',
-                templateUrl: 'app/vault/views/vaultAttachments.html',
+                template: require('./vault/views/vaultAttachments.html'),
                 controller: 'vaultAttachmentsController',
                 data: { authorize: true },
                 params: { animation: null, fromView: true, from: 'vault' }
@@ -167,21 +167,21 @@ angular
 
             .state('passwordGenerator', {
                 url: '/password-generator',
-                templateUrl: 'app/tools/views/toolsPasswordGenerator.html',
+                template: require('./tools/views/toolsPasswordGenerator.html'),
                 controller: 'toolsPasswordGeneratorController',
                 data: { authorize: true },
                 params: { animation: null, addState: null, editState: null }
             })
             .state('passwordGeneratorHistory', {
                 url: '/history',
-                templateUrl: 'app/tools/views/toolsPasswordGeneratorHistory.html',
+                template: require('./tools/views/toolsPasswordGeneratorHistory.html'),
                 controller: 'toolsPasswordGeneratorHistoryController',
                 data: { authorize: true },
                 params: { animation: null, addState: null, editState: null }
             })
             .state('export', {
                 url: '/export',
-                templateUrl: 'app/tools/views/toolsExport.html',
+                template: require('./tools/views/toolsExport.html'),
                 controller: 'toolsExportController',
                 data: { authorize: true },
                 params: { animation: null }
@@ -189,42 +189,42 @@ angular
 
             .state('about', {
                 url: '/about',
-                templateUrl: 'app/settings/views/settingsAbout.html',
+                template: require('./settings/views/settingsAbout.html'),
                 controller: 'settingsAboutController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('credits', {
                 url: '/credits',
-                templateUrl: 'app/settings/views/settingsCredits.html',
+                template: require('./settings/views/settingsCredits.html'),
                 controller: 'settingsCreditsController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('features', {
                 url: '/features',
-                templateUrl: 'app/settings/views/settingsFeatures.html',
+                template: require('./settings/views/settingsFeatures.html'),
                 controller: 'settingsFeaturesController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('help', {
                 url: '/help',
-                templateUrl: 'app/settings/views/settingsHelp.html',
+                template: require('./settings/views/settingsHelp.html'),
                 controller: 'settingsHelpController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('sync', {
                 url: '/sync',
-                templateUrl: 'app/settings/views/settingsSync.html',
+                template: require('./settings/views/settingsSync.html'),
                 controller: 'settingsSyncController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('premium', {
                 url: '/premium',
-                templateUrl: 'app/settings/views/settingsPremium.html',
+                template: require('./settings/views/settingsPremium.html'),
                 controller: 'settingsPremiumController',
                 data: { authorize: true },
                 params: { animation: null }
@@ -232,28 +232,28 @@ angular
 
             .state('folders', {
                 url: '/folders',
-                templateUrl: 'app/settings/views/settingsFolders.html',
+                template: require('./settings/views/settingsFolders.html'),
                 controller: 'settingsFoldersController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('addFolder', {
                 url: '/addFolder',
-                templateUrl: 'app/settings/views/settingsAddFolder.html',
+                template: require('./settings/views/settingsAddFolder.html'),
                 controller: 'settingsAddFolderController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('editFolder', {
                 url: '/editFolder?folderId',
-                templateUrl: 'app/settings/views/settingsEditFolder.html',
+                template: require('./settings/views/settingsEditFolder.html'),
                 controller: 'settingsEditFolderController',
                 data: { authorize: true },
                 params: { animation: null }
             })
             .state('environment', {
                 url: '/environment',
-                templateUrl: 'app/settings/views/settingsEnvironment.html',
+                template: require('./settings/views/settingsEnvironment.html'),
                 controller: 'settingsEnvironmentController',
                 data: { authorize: false },
                 params: { animation: null }
diff --git a/src/popup/app/global/home.html b/src/popup/app/global/home.html
index 9c74b4a368..fac40c5ffd 100644
--- a/src/popup/app/global/home.html
+++ b/src/popup/app/global/home.html
@@ -2,7 +2,7 @@
     <a ui-sref="environment({animation: 'in-slide-up'})" class="settings-icon">
         <i class="fa fa-cog fa-lg"></i><span>&nbsp;Settings</span>
     </a>
-    <img src="../../../../images/logo@2x.png" alt="bitwarden" />
+    <img src="../../../images/logo@2x.png" alt="bitwarden" />
     <p>{{i18n.loginOrCreateNewAccount}}</p>
     <div class="bottom-buttons">
         <a class="btn btn-lg btn-primary btn-block" ui-sref="register({animation: 'in-slide-up'})"
diff --git a/src/popup/app/global/splash.html b/src/popup/app/global/splash.html
index ae68eeeb39..ca75c7de89 100644
--- a/src/popup/app/global/splash.html
+++ b/src/popup/app/global/splash.html
@@ -1,5 +1,5 @@
 <div class="content">
     <div class="splash-page">
-        <img src="../../../../images/logo@3x.png" alt="bitwarden" />
+        <img src="../../../images/logo@3x.png" alt="bitwarden" />
     </div>
 </div>
diff --git a/webpack.common.js b/webpack.common.js
index 5622f90c76..f0c52d22c4 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -39,6 +39,16 @@ module.exports = {
                         publicPath: '/'
                     }
                 }]
+            },
+            {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].[ext]',
+                        useRelativePath: true
+                    }
+                }]
             }
         ]
     },
@@ -76,13 +86,6 @@ module.exports = {
             chunks: ['notification/bar']
         }),
         new CopyWebpackPlugin([
-            // Temporarily copy the whole app folder, can be removed once
-            // the templates uses template rather than using templateUrl.
-            {
-                context: 'src/popup/app',
-                from: '**/*.html',
-                to: 'popup/app'
-            },
             './src/manifest.json',
             { from: './src/_locales', to: '_locales' },
             { from: './src/edge', to: 'edge' },