Some small improvements to email channel management.

app/assets/javascripts/app/controllers/_channel/email.js.coffee

@@ -11,16 +11,16 @@ class App.ChannelEmail extends App.ControllerTabs
         target:     'c-account',
         controller: App.ChannelEmailAccountOverview,
       },
-      {
-        name:       'Signatures',
-        target:     'c-signature',
-        controller: App.ChannelEmailSignature,
-      },
       {
         name:       'Filter',
         target:     'c-filter',
         controller: App.ChannelEmailFilter,
       },
+      {
+        name:       'Signatures',
+        target:     'c-signature',
+        controller: App.ChannelEmailSignature,
+      },
       {
         name:       'Settings',
         target:     'c-setting',
@@ -354,6 +354,7 @@ class App.ChannelEmailAccountWizard extends App.Controller
     'change .js-outbound [name=adapter]': 'toggleOutboundAdapter'
     'submit .js-outbound':                'probleOutbound'
     'click  .js-back':                    'goToSlide'
+    'click  .js-close':                   'hide'
 
   constructor: ->
     super
@@ -385,12 +386,10 @@ class App.ChannelEmailAccountWizard extends App.Controller
       backdrop:  true
       container: @container
     .on
-      'show.bs.modal':   @onShow
-      'shown.bs.modal':  @onComplete
       'hidden.bs.modal': =>
         if @callback
           @callback()
-        $('.modal').remove()
+        @el.remove()
 
     if @slide
       @showSlide(@slide)
@@ -418,7 +417,7 @@ class App.ChannelEmailAccountWizard extends App.Controller
 
     # inbound
     configureAttributesInbound = [
-      { name: 'adapter',            display: 'Type',     tag: 'select', multiple: false, null: false, options: { imap: 'IMAP', pop3: 'POP3' } },
+      { name: 'adapter',            display: 'Type',     tag: 'select', multiple: false, null: false, options: { imap: 'imap', pop3: 'pop3' } },
       { name: 'options::host',      display: 'Host',     tag: 'input',  type: 'text', limit: 120, null: false, autocapitalize: false },
       { name: 'options::user',      display: 'User',     tag: 'input',  type: 'text', limit: 120, null: false, autocapitalize: false },
       { name: 'options::password',  display: 'Password', tag: 'input',  type: 'password', limit: 120, null: false, autocapitalize: false, single: true },
@@ -645,6 +644,10 @@ class App.ChannelEmailAccountWizard extends App.Controller
     @formEnable(e)
     @$('.wizard-controls .btn').attr('disabled', false)
 
+  hide: (e) =>
+    e.preventDefault()
+    @el.modal('hide')
+
 class App.ChannelEmailNotificationWizard extends App.Controller
   elements:
     '.modal-body': 'body'
@@ -654,6 +657,7 @@ class App.ChannelEmailNotificationWizard extends App.Controller
   events:
     'change .js-outbound [name=adapter]': 'toggleOutboundAdapter'
     'submit .js-outbound':                'probleOutbound'
+    'click  .js-close':                   'hide'
 
   constructor: ->
     super
@@ -689,7 +693,7 @@ class App.ChannelEmailNotificationWizard extends App.Controller
       'hidden.bs.modal': =>
         if @callback
           @callback()
-        $('.modal').remove()
+        @el.remove()
 
     if @slide
       @showSlide(@slide)
@@ -784,4 +788,8 @@ class App.ChannelEmailNotificationWizard extends App.Controller
 
   enable: (e) =>
     @formEnable(e)
-    @$('.wizard-controls .btn').attr('disabled', false)
+    @$('.wizard-controls .btn').attr('disabled', false)
+
+  hide: (e) =>
+    e.preventDefault()
+    @el.modal('hide')

app/assets/javascripts/app/models/email_address.js.coffee

@@ -17,7 +17,7 @@ class App.EmailAddress extends App.Model
     { name: 'channel_id', display: 'Channel',   tag: 'select', multiple: false, null: true, relation: 'Channel', nulloption: true, filter: @filterChannel },
     { name: 'note',       display: 'Note',      tag: 'textarea', note: 'Notes are visible to agents only, never to customers.', limit: 250, null: true },
     { name: 'updated_at', display: 'Updated',   tag: 'datetime', readonly: 1 },
-    { name: 'active',     display: 'Active',    tag: 'active',   default: true },
+    { name: 'active',     display: 'Active',    tag: 'active',   readonly: 1 },
   ]
   @configure_overview = [
     'realname', 'email'

app/assets/javascripts/app/views/channel/email_account_wizard.jst.eco

@@ -1,8 +1,13 @@
-<div class="modal-dialog">
+<div class="modal-dialog wizard">
 
- <form class="setup wizard js-intro">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Account') %></h2>
+  <form class="modal-content setup wizard js-intro">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Account') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <div class="alert alert--danger hide" role="alert"></div>
         <fieldset>
@@ -20,37 +25,56 @@
           </div>
         </fieldset>
       </div>
-      <div class="wizard-controls center">
-        <button class="btn btn--primary align-right"><%- @T('Connect') %></button>
-      </div>
+    </div>
+    <div class="modal-footer">
+        <div class="modal-centerFooter">
+          <button class="btn btn--primary align-center"><%- @T('Connect') %></button>
+        </div>
     </div>
   </form>
 
-  <form class="setup wizard hide js-probe">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Account') %></h2>
+  <form class="modal-content setup wizard hide js-probe">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Account') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <p class="wizard-loadingText">
           <span class="loading icon"></span> <%- @T('Testing') %> <span class="js-email"></span>
         </p>
       </div>
     </div>
+    <div class="modal-footer"></div>
   </form>
 
-  <form class="setup wizard hide js-test">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Account') %></h2>
+  <form class="modal-content setup wizard hide js-test">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Account') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <p class="wizard-loadingText">
           <span class="loading icon"></span> <%- @T('Verifying...') %>
         </p>
       </div>
     </div>
+    <div class="modal-footer"></div>
   </form>
 
-  <form class="setup wizard hide js-verify">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Account') %></h2>
+  <form class="modal-content setup wizard hide js-verify">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Account') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <div class="alert alert--danger hide" role="alert"></div>
         <p class="wizard-loadingText">
@@ -58,33 +82,52 @@
         </p>
       </div>
     </div>
+    <div class="modal-footer"></div>
   </form>
 
-  <form class="setup wizard hide js-inbound">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Inbound') %></h2>
+  <form class="modal-content setup wizard hide js-inbound">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Inbound') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <div class="alert alert--danger hide" role="alert"></div>
         <div class="base-inbound-settings"></div>
       </div>
-      <div class="wizard-controls center">
-        <a class="btn btn--text btn--secondary js-back" data-slide="js-intro"><%- @T('Go Back') %></a>
-        <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
+    </div>
+    <div class="modal-footer">
+      <div class="modal-rightFooter">
+      <a class="btn btn--text btn--secondary js-back align-left" data-slide="js-intro"><%- @T('Go Back') %></a>
+      </div>
+      <div class="modal-rightFooter">
+        <button class="btn btn--primary align-right"><%- @T('Continue') %></button>
       </div>
     </div>
   </form>
 
-  <form class="setup wizard hide js-outbound">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Outbound') %></h2>
+  <form class="modal-content setup wizard hide js-outbound">
+    <div class="modal-header">
+        <div class="modal-close js-close">
+          <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        </div>
+        <h1 class="modal-title"><%- @T('Email Outbound') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <div class="alert alert--danger hide" role="alert"></div>
         <div class="base-outbound-type"></div>
         <div class="base-outbound-settings"></div>
       </div>
-      <div class="wizard-controls center">
-        <a class="btn btn--text btn--secondary js-back" data-slide="js-inbound"><%- @T('Go Back') %></a>
-        <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
+    </div>
+    <div class="modal-footer">
+      <div class="modal-rightFooter">
+      <a class="btn btn--text btn--secondary js-back align-left" data-slide="js-inbound"><%- @T('Go Back') %></a>
+      </div>
+      <div class="modal-rightFooter">
+        <button class="btn btn--primary align-right"><%- @T('Continue') %></button>
       </div>
     </div>
   </form>

app/assets/javascripts/app/views/channel/email_notification_wizard.jst.eco

@@ -1,37 +1,56 @@
-<div class="modal-dialog">
+<div class="modal-dialog wizard">
 
-  <form class="setup wizard hide js-probe">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Account') %></h2>
+  <form class="modal-content setup wizard hide js-probe">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Notification') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <p class="wizard-loadingText">
           <span class="loading icon"></span> <%- @T('Testing') %> <span class="js-email"></span>
         </p>
       </div>
     </div>
+    <div class="modal-footer"></div>
   </form>
 
-  <form class="setup wizard hide js-test">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Account') %></h2>
+  <form class="modal-content setup wizard hide js-test">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Notification') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <p class="wizard-loadingText">
           <span class="loading icon"></span> <%- @T('Verifying...') %>
         </p>
       </div>
     </div>
+    <div class="modal-footer"></div>
   </form>
 
-  <form class="setup wizard js-outbound">
-    <div class="wizard-slide">
-      <h2><%- @T('Email Outbound') %></h2>
+  <form class="modal-content setup wizard js-outbound">
+    <div class="modal-header">
+      <div class="modal-close js-close">
+        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
+      <h1 class="modal-title"><%- @T('Email Notification') %></h1>
+    </div>
+    <div class="modal-body">
       <div class="wizard-body vertical justified">
         <div class="alert alert--danger hide" role="alert"></div>
         <div class="base-outbound-type"></div>
         <div class="base-outbound-settings"></div>
       </div>
-      <div class="wizard-controls center">
-        <button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
+    </div>
+    <div class="modal-footer">
+      <div class="modal-rightFooter">
+        <button class="btn btn--primary align-right"><%- @T('Continue') %></button>
       </div>
     </div>
   </form>

app/assets/stylesheets/zammad.css.scss

@@ -4429,6 +4429,9 @@ footer {
   margin-top: 35px;
   margin-bottom: 35px;
 }
+.modal-dialog.wizard {
+  max-width: 460px;
+}
 
 .modal-backdrop {
   position: fixed;

app/models/email_address.rb

@@ -21,18 +21,28 @@ check and if channel not exists reset configured channels for email addresses
 
   def self.channel_cleanup
     EmailAddress.all.each {|email_address|
-      next if !email_address.channel_id
-      next if Channel.find_by(id: email_address.channel_id)
-      email_address.channel_id = nil
-      email_address.save
+      if email_address.channel_id && Channel.find_by(id: email_address.channel_id)
+        if !email_address.active
+          email_address.save
+        end
+        next
+      end
+      if email_address.channel_id || email_address.active
+        email_address.save
+      end
     }
   end
 
   private
 
   def channel_check
-    return if Channel.find_by(id: channel_id)
+    if channel_id && Channel.find_by(id: channel_id)
+      self.active = true
+      return true
+    end
     self.channel_id = nil
+    self.active = false
+    true
   end
 
 end