Merge pull request #6769 from thornbill/wizard-server-name

src/apps/wizard/controllers/start/index.html

@@ -1,4 +1,4 @@
-<div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage">
+<div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage" data-backbutton="false">
     <div class="padded-left padded-right padded-top">
         <div class="ui-corner-all ui-shadow wizardContent" style="position:relative;">
             <form class="wizardStartForm">
@@ -12,6 +12,10 @@
                 <br style="clear:both;" />
                 <p>${ThisWizardWillGuideYou}</p>
                 <br />
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtServerName" label="${LabelServerName}" required="required" />
+                    <div class="fieldDescription">${LabelServerNameHelp}</div>
+                </div>
                 <div class="selectContainer">
                     <select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
                 </div>

src/apps/wizard/controllers/start/index.js

@@ -6,12 +6,16 @@ import dom from 'scripts/dom';
 import 'elements/emby-button/emby-button';
 import 'elements/emby-select/emby-select';
 
-function loadPage(page, config, languageOptions) {
-    const elem = page.querySelector('#selectLocalizationLanguage');
-    elem.innerHTML = languageOptions.map(function (l) {
+function loadPage(page, systemInfo, config, languageOptions) {
+    const serverNameElem = page.querySelector('#txtServerName');
+    serverNameElem.value = config.ServerName || systemInfo.ServerName;
+
+    const languageElem = page.querySelector('#selectLocalizationLanguage');
+    languageElem.innerHTML = languageOptions.map(function (l) {
         return '<option value="' + l.Value + '">' + l.Name + '</option>';
     }).join('');
-    elem.value = config.UICulture;
+    languageElem.value = config.UICulture;
+
     loading.hide();
 }
 
@@ -19,7 +23,9 @@ function save(page) {
     loading.show();
     const apiClient = ServerConnections.currentApiClient();
     apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) {
+        config.ServerName = page.querySelector('#txtServerName').value;
         config.UICulture = page.querySelector('#selectLocalizationLanguage').value;
+
         apiClient.ajax({
             type: 'POST',
             data: JSON.stringify(config),
@@ -38,17 +44,22 @@ function onSubmit(e) {
 
 export default function (view) {
     view.querySelector('.wizardStartForm').addEventListener('submit', onSubmit);
+
     view.addEventListener('viewshow', function () {
         document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
         loading.show();
         const page = this;
         const apiClient = ServerConnections.currentApiClient();
-        const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration'));
-        const promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options'));
-        Promise.all([promise1, promise2]).then(function (responses) {
-            loadPage(page, responses[0], responses[1]);
+
+        Promise.all([
+            apiClient.getPublicSystemInfo(),
+            apiClient.getJSON(apiClient.getUrl('Startup/Configuration')),
+            apiClient.getJSON(apiClient.getUrl('Localization/Options'))
+        ]).then(([ systemInfo, config, languageOptions ]) => {
+            loadPage(page, systemInfo, config, languageOptions);
         });
     });
+
     view.addEventListener('viewhide', function () {
         document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
     });

src/strings/en-us.json

@@ -1591,7 +1591,7 @@
     "ThemeSongs": "Theme songs",
     "ThemeVideos": "Theme videos",
     "TheseSettingsAffectSubtitlesOnThisDevice": "These settings affect subtitles on this device",
-    "ThisWizardWillGuideYou": "This wizard will help guide you through the setup process. To begin, please select your preferred language.",
+    "ThisWizardWillGuideYou": "This wizard will help guide you through the setup process. To begin, please enter a server name and select your preferred language.",
     "Thumb": "Thumb",
     "ThumbCard": "Thumb Card",
     "Thursday": "Thursday",