refactor(dashboard,language): migrade js confirm to modal

https://zanata.atlassian.net/browse/ZNTA-1286
zanata · Jul 29, 2016 · 55a694e · 55a694e
1 parent ff42d7d
commit 55a694e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 42 deletions.
diff --git a/zanata-war/src/main/resources/messages.properties b/zanata-war/src/main/resources/messages.properties
@@ -196,7 +196,6 @@ jsf.dashboard.settings.profileSettings.label=Profile Settings
 jsf.dashboard.settings.usernameCannotBeChanged.message=Your username cannot be changed
 jsf.dashboard.settings.updateProfile.label=Update profile
 jsf.dashboard.settings.languageTeams.label=Language Teams
-jsf.dashboard.settings.leaveLanguageTeam.confirm.message=Are you sure you want to leave the {0} team?
 jsf.dashboard.settings.clientSettings.label=Client Settings
 jsf.dashboard.settings.apiKey.label=API Key
 jsf.dashboard.settings.generateNewApiKey.label=Generate new API key
@@ -205,7 +204,7 @@ jsf.dashboard.settings.joinLangTeam.message=Join a language team
 jsf.dashboard.settings.clientConfigHelp.message= Help: Configuring the Client
 jsf.dashboard.settings.mavenClientConfigHelp.message=Help: Configuring the Maven Plugin
 jsf.dashboard.settings.profileUpdated.message=Your profile has been updated
-jsf.dashboard.settings.removeIdentity.confirm.message=Are you sure you want to remove this connected account?
+jsf.dashboard.settings.removeIdentity.title=Remove connection
 jsf.dashboard.settings.apiKeyNeeded.message=An API key and configuration is needed for the CLI client
 
 
@@ -971,6 +970,7 @@ jsf.ApiKey=API Key
 ! the API key is shown in a box to the right of this text
 jsf.YourCurrentApiKeyIs=Your current API key is
 jsf.NotGenerated=(Not generated)
+jsf.apiKey.generate.title=Generate API Key
 jsf.apikey.ConfirmGenerate=Are you sure you want to generate your API Key?
 ! 'zanata.ini' should not be translated
 jsf.ConfigurationForZanataini=Configuration [zanata.ini]
@@ -1111,6 +1111,7 @@ jsf.language.members.empty=No members
 jsf.language.member.joined=You are a member of this language
 jsf.language.requests=Requests
 jsf.language.myRequests=My Requests
+jsf.language.delete.title=Delete language
 jsf.language.delete.description=Are you sure you wish to delete language this from Zanata?
 
 #------ [home] > Administration > Manage Languages > Add New Language ------

diff --git a/zanata-war/src/main/webapp/WEB-INF/layout/dashboard/settings.xhtml b/zanata-war/src/main/webapp/WEB-INF/layout/dashboard/settings.xhtml
@@ -7,6 +7,28 @@
   xmlns:zanata="http://java.sun.com/jsf/composite/zanata">
 
   <h1>#{msgs['jsf.dashboard.settings.title']}</h1>
+
+  <script type="application/javascript">
+    function onGenerateApiKeyResponse(generate) {
+      if (generate) {
+        regenerateApiKey();
+      }
+      zanata.modal.hide('#generateAPIKeyModal')
+    }
+  </script>
+
+  <h:form>
+    <a4j:jsFunction name="regenerateApiKey"
+      action="#{userSettingsAction.regenerateApiKey}"
+      render="apiKeyForm" status="client-loader"
+      limitRender="true"/>
+  </h:form>
+
+  <zanata:confirm-modal id="generateAPIKeyModal"
+    title="#{msgs['jsf.apiKey.generate.title']}"
+    message="#{userSettingsAction.regenerateAPiKeyMsg}"
+    onresponse="onGenerateApiKeyResponse" />
+
   <div class="tabs--vertical js-tabs">
     <ul class="tabs__nav js-tabs-nav">
       <li>
@@ -127,17 +149,13 @@
                       <h:outputText
                         value="(#{cred.email != null ? cred.email : cred.user})" />
                     </span>
-                    <a4j:commandLink
-                      styleClass="l--float-right txt--danger reveal__target"
+
+                    <zanata:ajax-command-button styleClass="txt--danger button button--small reveal__target"
                       action="#{userSettingsAction.remove(cred)}"
-                      render="credentialsList"
-                      onclick="return confirm('#{msgs['jsf.dashboard.settings.removeIdentity.confirm.message']}')"
-                      title="">
-                      <i class="i--large i--remove"></i>
-                    </a4j:commandLink>
-                    <a href="#" class="l--float-right txt--danger reveal__target"
-                      title="#{msgs['jsf.dashboard.settings.removeAccount.label']}">
-                    </a>
+                      render="credentialsList">
+                      <i class="i i--remove"></i>
+                      <span class="is-hidden--m-l-down">#{msgs['jsf.dashboard.settings.removeIdentity.title']}</span>
+                    </zanata:ajax-command-button>
                   </li>
                 </ui:repeat>
               </ul>
@@ -237,13 +255,13 @@
                 <span class="txt--understated l--push-left-quarter">
                   [#{locale.localeId.id}]
                 </span>
-                <a4j:commandLink
-                  styleClass="l--float-right txt--danger reveal__target"
+                <zanata:ajax-command-button styleClass="txt--danger button button--small reveal__target"
+                  title="#{msgs['jsf.dashboard.settings.removeAccount.label']}"
                   action="#{userSettingsAction.leaveLanguageTeam(locale.localeId.id)}"
-                  render="languageListForm"
-                  onclick="return confirm('#{interpolator.interpolate(msgs['jsf.dashboard.settings.leaveLanguageTeam.confirm.message'], locale.retrieveDisplayName())}')">
-                  <i class="i--large i--remove"></i>
-                </a4j:commandLink>
+                  render="languageListForm">
+                  <i class="i i--remove"></i>
+                  <span class="is-hidden--m-l-down">#{msgs['jsf.LeaveLanguageTeam']}</span>
+                </zanata:ajax-command-button>
               </li>
             </ui:repeat>
           </ul>
@@ -257,11 +275,6 @@
           #{msgs['jsf.dashboard.settings.clientSettings.label']}
         </h2>
         <h:form id="apiKeyForm">
-          <a4j:jsFunction name="regenerateApiKey"
-            action="#{userSettingsAction.regenerateApiKey}"
-            render="apiKeyForm" status="client-loader"
-            limitRender="true"/>
-
           <p class="txt--meta">
             <h:outputText value="#{msgs['jsf.dashboard.settings.apiKeyNeeded.message']}"/>
             <a href="http://zanata.org/help/cli/cli-configuration/"
@@ -290,17 +303,10 @@
               </p>
             </ui:fragment>
           </div>
-          <script>
-            function confirmGenerateApiKey() {
-              if (confirm("#{userSettingsAction.regenerateAPiKeyMsg}")) {
-                regenerateApiKey();
-              }
-            }
-          </script>
-          <button id="generateKeyButton" class="button"
-            onclick="confirmGenerateApiKey();return false;">
+          <a href="#" class="button"
+            data-toggle="modal" data-target="#generateAPIKeyModal">
             #{msgs['jsf.dashboard.settings.generateNewApiKey.label']}
-          </button>
+          </a>
           <div class="form__item l--push-top-1">
             <label for="config">Configuration (zanata.ini)</label>
             <textarea id="config" rows="4" readonly="" class="js-form__input--copyable">[servers]

diff --git a/zanata-war/src/main/webapp/language/home.xhtml b/zanata-war/src/main/webapp/language/home.xhtml
@@ -7,11 +7,32 @@
   xmlns:a4j="http://richfaces.org/a4j"
   xmlns:zanata="http://java.sun.com/jsf/composite/zanata"
   xmlns:rich="http://richfaces.org/rich"
-  template="../WEB-INF/template/template.xhtml">
+  template="/WEB-INF/template/template.xhtml">
 
   <ui:define name="page_title">#{msgs['jsf.Languages']}</ui:define>
 
   <ui:define name="center_content">
+
+    <ui:fragment rendered="#{identity.hasRole('admin')}">
+      <zanata:confirm-modal id="deleteLanguageModal"
+        title="#{msgs['jsf.language.delete.title']}"
+        message="#{msgs['jsf.language.delete.description']}"
+        onresponse="onDeleteLanguageResponse" />
+
+      <script type="text/javascript">
+        var selectedLocaleId;
+        function setSelectedLocaleId(id) {
+          selectedLocaleId = id
+        }
+        function onDeleteLanguageResponse(del) {
+          if (del) {
+            deleteLanguage(selectedLocaleId)
+          }
+          zanata.modal.hide('#deleteLanguageModal')
+        }
+      </script>
+    </ui:fragment>
+
     <div class="g--centered">
       <div class="g__item w--1-s w--1-2 l--push-bottom-half">
         <h1 class="l--push-all-0">#{msgs['jsf.Languages']}</h1>
@@ -69,12 +90,6 @@
               <a4j:param name="val1" assignTo="#{localeId}"/>
             </a4j:jsFunction>
 
-            <script type="text/javascript">
-              function confirmDelete() {
-                return confirm("#{msgs['jsf.language.delete.description']}");
-              }
-            </script>
-
             <ul class="list--stats">
               <ui:repeat value="#{languagesAction.currentPage}" var="language">
                 <li name="entry" class="l--pad-all-quarter #{not language.active ? 'is-disabled' : ''} #{identity.hasRole('admin') ? 'list__item--actionable' : ''}">
@@ -90,7 +105,8 @@
                         <ul class="dropdown__content js-dropdown__content">
                           <li>
                             <a href="#" class="i__item--right txt--danger"
-                              onclick="if(confirmDelete()){deleteLanguage('#{language.localeId}')};return false">
+                              onclick="setSelectedLocaleId('#{language.localeId}')"
+                              data-toggle="modal" data-target="#deleteLanguageModal">
                               #{msgs['jsf.Delete']}
                               <i class="i i--remove i__item__icon"></i>
                             </a>

diff --git a/zanata-war/src/main/webapp/resources/zanata/ajax-command-button.xhtml b/zanata-war/src/main/webapp/resources/zanata/ajax-command-button.xhtml
@@ -16,6 +16,9 @@
   <composite:attribute name="render" type="java.lang.String"
     shortDescription="List of component ids to render after completion"/>
 
+  <composite:attribute name="title" type="java.lang.String"
+    shortDescription="html title attribute"/>
+
   <composite:attribute name="styleClass" type="java.lang.String"
     shortDescription="css style for the generated button"/>
 
@@ -35,7 +38,8 @@
     onclick="event.stopPropagation();"
     onbegin="zanata.loader.activate($(this).find('.js-loader')); $(this).find('.js-default').addClass('is-hidden'); $(this).find('.js-in-progress').removeClass('is-hidden');"
     oncomplete="$(this).find('.js-in-progress').addClass('is-hidden'); $(this).find('.js-default').removeClass('is-hidden'); zanata.loader.deactivate($(this).find('.js-loader')); #{cc.attrs.oncomplete}"
-    render="#{cc.attrs.render}">
+    render="#{cc.attrs.render}"
+    title="#{cc.attrs.title}">
     <span
       class="loader--mini loader--inline loader--button js-loader">
     </span>