add setup wizard layout reference

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -512,11 +512,44 @@ class ContentSidebarLeft extends App.ControllerContent
 App.Config.set( 'layout_ref/content_sidebar_left', ContentSidebarLeft, 'Routes' )
 
 
-class ImportWizard extends App.ControllerContent
+class App.ControllerWizard extends App.ControllerContent
   elements:
-    '[data-target]':  'links'
     '[data-slide]':   'slides'
-    '[data-action]':  'actions'
+
+  events:
+    'click [data-target]': 'navigate'
+    'click [data-action]': 'action'
+
+  constructor: ->
+    super
+
+  action: (e) =>
+    button = $(e.currentTarget)
+
+    switch button.attr('data-action')
+      when "reveal" then @showNextButton button
+
+  showNextButton: (sibling) ->
+    sibling.parents('.wizard-slide').find('.btn.hide').removeClass('hide')
+
+  navigate: (e) =>
+    target = $(e.currentTarget).attr('data-target')
+    targetSlide = @$("[data-slide=#{ target }]")
+    console.log(e, target, targetSlide)
+
+    if targetSlide
+      @goToSlide targetSlide
+
+  goToSlide: (targetSlide) =>
+    @slides.addClass('hide')
+    targetSlide.removeClass('hide')
+
+    if targetSlide.attr('data-hide')
+      setTimeout @goToSlide, targetSlide.attr('data-hide'), targetSlide.next()
+
+
+class ImportWizard extends App.ControllerWizard
+  elements:
     '#otrs-link':     'otrsLink'
     '.input-feedback':'inputFeedback'
 
@@ -524,9 +557,6 @@ class ImportWizard extends App.ControllerContent
     super
     @render()
 
-    @links.on 'click', @navigate
-    @actions.on 'click', @action
-
     # wait 500 ms after the last user input before we check the link
     @otrsLink.on 'input', _.debounce(@checkOtrsLink, 600) 
 
@@ -550,30 +580,6 @@ class ImportWizard extends App.ControllerContent
 
     @showNextButton @inputFeedback if state is 'success'
 
-  action: (e) =>
-    button = $(e.delegateTarget)
-
-    switch button.attr('data-action')
-      when "reveal" then @showNextButton button
-
-  showNextButton: (sibling) ->
-    sibling.parents('.wizard-slide').find('.btn.hide').removeClass('hide')
-
-  navigate: (e) =>
-    target = $(e.delegateTarget).attr('data-target')
-    targetSlide = @$("[data-slide=#{ target }]")
-
-    if targetSlide
-      @goToSlide targetSlide
-
-  goToSlide: (targetSlide) =>
-    @slides.addClass('hide')
-    targetSlide.removeClass('hide')
-
-    if targetSlide.attr('data-hide')
-      setTimeout @goToSlide, targetSlide.attr('data-hide'), targetSlide.next()
-
-
   render: ->
     @html App.view('layout_ref/import_wizard')()
 
@@ -601,4 +607,47 @@ class ReferenceOrganizationProfile extends App.ControllerContent
 
 App.Config.set( 'layout_ref/organization_profile', ReferenceOrganizationProfile, 'Routes' )
 
+class ReferenceSetupWizard extends App.ControllerWizard
+  elements:
+    '.fileUpload-preview': 'logoPreview'
+    '#agent_email': 'agentEmail'
+    '#agent_first_name': 'agentFirstName'
+    '#agent_last_name': 'agentLastName'
+
+  events:
+    'change .js-upload': 'onLogoPick'
+    'click .js-inviteAgent': 'inviteAgent'
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/setup')()
+
+  onLogoPick: (event) =>
+    reader = new FileReader()
+
+    reader.onload = (e) =>
+      @logoPreview.attr('src', e.target.result)
+
+    reader.readAsDataURL(event.target.files[0])
+
+  inviteAgent: =>
+    firstname = @agentFirstName.val()
+    lastname = @agentLastName.val()
+
+    App.Event.trigger 'notify', {
+      type:    'success'
+      msg:     App.i18n.translateContent( "Invitation sent to #{ firstname } #{ lastname }" )
+      timeout: 3500
+    }
+
+    @agentEmail.add(@agentFirstName).add(@agentLastName).val('')
+    @agentFirstName.focus()
+
+
+
+App.Config.set( 'layout_ref/setup', ReferenceSetupWizard, 'Routes' )
+
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco

@@ -1,16 +1,16 @@
 <div class="main flex centered darkBackground">
-  <div class="import wizard hero-unit">
+  <div class="import wizard">
-    <div class="wizard-slide vertical" data-slide="home">
+    <div class="wizard-slide" data-slide="home">
       <h2>Import Tickets</h2>
-      <div class="wizard-body flex vertical justified">
+      <div class="wizard-body vertical justified">
         <div class="import-source centered" data-source="otrs" data-target="otrs-prepare-plugin">
-          <img class="logo" src="<%= @C('otrs-logo.png') %>" alt="OTRS" height="37">
+          <img class="logo" src="<%= @C('image_path') + '/' + 'otrs-logo.png' %>" alt="OTRS" height="37">
         </div>
       </div>
     </div>
-    <div class="wizard-slide vertical hide" data-slide="otrs-prepare-plugin" data-hide="2330">
+    <div class="wizard-slide hide" data-slide="otrs-prepare-plugin" data-hide="2330">
       <h2>Create OTRS Migration Plugin</h2>
-      <div class="wizard-body flex vertical justified">
+      <div class="wizard-body vertical justified">
         <p class="wizard-loadingText">
           <span class="loading icon"></span> Personalise Migration Plugin ..
         </p>
@@ -19,9 +19,9 @@
         <a class="subtle-link" data-target="home">Go Back</a>
       </div>
     </div>
-    <div class="wizard-slide vertical hide" data-slide="otrs-plugin">
+    <div class="wizard-slide hide" data-slide="otrs-plugin">
       <h2>Download OTRS Migration Plugin</h2>
-      <div class="wizard-body flex vertical justified">
+      <div class="wizard-body vertical justified">
         <p>
           Download and install this personalised OTRS Migration Plugin on your OTRS System:
         </p>
@@ -32,13 +32,13 @@
         <div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div>
       </div>
     </div>
-    <div class="wizard-slide vertical hide" data-slide="otrs-link">
+    <div class="wizard-slide hide" data-slide="otrs-link">
       <h2>Link OTRS</h2>
-      <div class="wizard-body flex vertical justified">
+      <div class="wizard-body vertical justified">
         <p>
           Enter the link provided by the plugin at the end of the installation to link the two systems:
         </p>
-        <div class="form-group">
+        <div class="form-group fromGroup--standalone">
           <label for="otrs-link">OTRS Link</label>
           <div class="u-positionOrigin">
             <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
@@ -55,9 +55,9 @@
         <div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div>
       </div>
     </div>
-    <div class="wizard-slide vertical hide" data-slide="otrs-export">
+    <div class="wizard-slide hide" data-slide="otrs-export">
       <h2>OTRS Migration</h2>
-      <div class="wizard-body flex vertical justified">
+      <div class="wizard-body vertical justified">
         <table class="progressTable">
           <tr class="is-done">
             <td><span class="js-count">42</span>/<span class="js-max">42</span>

app/assets/javascripts/app/views/layout_ref/index.jst.eco

@@ -17,6 +17,7 @@
     <li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
     <li><a href="#layout_ref/user_profile">User Profile</a></li>
     <li><a href="#layout_ref/organization_profile">Organization Profile</a></li>
+    <li><a href="#layout_ref/setup">Setup Wizard</a></li>
   </ul>
 
 </div>

app/assets/javascripts/app/views/layout_ref/setup.jst.eco

@@ -0,0 +1,337 @@
+<div class="main flex vertical centered darkBackground">
+  <aside class="director">
+    <div data-slide="admin">
+
+    </div>
+  </aside>
+  <img class="zammad full logo" src="<%= @C('image_path') + '/' + 'full logo on dark.svg' %>" alt="Zammad">
+  <div class="setup wizard">
+    <div class="wizard-slide" data-slide="home">
+      <div class="wizard-body vertical centered">
+        <a class="btn btn--primary" data-target="admin"><%- @T('Setup new System') %></a>
+      </div>
+      <div class="wizard-aside">
+        Or <span class="u-clickable u-highlight" data-target="migrate"><%- @T('migrate from another system') %></a>.
+      </div>
+    </div>
+    <div class="wizard-slide hide"  data-slide="admin">
+      <h2>Administrator Account</h2>
+      <div class="wizard-body vertical justified">
+        <fieldset>
+          <div class="form-group formGroup--halfSize">
+            <label for="first_name">Firstname</label>
+            <input id="first_name" class="form-control" value="Hans">
+          </div>
+          <div class="form-group formGroup--halfSize">
+            <label for="last_name">Lastname</label>
+            <input id="last_name" class="form-control" value="Huber">
+          </div>
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" id="email" class="form-control" value="hanshuber@web.de">
+          </div>
+          <div class="form-group formGroup--halfSize">
+            <label for="email">Password</label>
+            <input type="password" id="email" class="form-control" value="123456">
+          </div>
+          <div class="form-group formGroup--halfSize">
+            <label for="email">Password (Confirm)</label>
+            <input type="password" id="email" class="form-control" value="123456">
+          </div>
+        </fieldset>
+      </div>
+      <div class="wizard-controls center">
+        <a class="subtle-link" data-target="home">Go Back</a>
+        <div class="btn btn--success align-right" data-target="company">Create</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide"  data-slide="company">
+      <h2>Company</h2>
+      <div class="wizard-body vertical justified">
+        <fieldset>
+          <div class="form-group">
+            <label>Company Name</label>
+            <input class="form-control" value="Company LLT">
+          </div>
+          <div class="form-group">
+            <label>Logo</label>
+            <div class="horizontal center">
+              <img class="fileUpload-preview" src="">
+              <div class="btn btn--success fileUpload">Upload<input type="file" class="js-upload" accept="image/*"></div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label>System Url</label>
+            <input type="url" class="form-control" placeholder="support.company.com">
+            <p class="help-block">The url to this installation of Zammad.</p>
+          </div>
+        </fieldset>
+      </div>
+      <div class="wizard-controls center">
+        <a class="subtle-link" data-target="home">Go Back</a>
+        <div class="btn btn--primary align-right" data-target="channels">Next</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="channels">
+      <h2>Connect Channels</h2>
+      <div class="wizard-body vertical center">
+        <p class="help-block help-block--center">Setup the communication channels you want to sync with your Zammad inbox</p>
+        <div class="wizard-buttonList vertical">
+          <div class="btn auth_provider auth_provider--wide email" data-target="emailStart">
+            <div class="email provider_icon"></div>
+            <div class="provider_name">Email</div>
+          </div>
+          <div class="btn auth_provider auth_provider--wide twitter" data-target="twitter">
+            <div class="twitter provider_icon"></div>
+            <div class="provider_name">Twitter</div>
+          </div>
+          <div class="btn auth_provider auth_provider--wide facebook" data-target="facebook">
+            <div class="facebook provider_icon"></div>
+            <div class="provider_name">Facebook</div>
+          </div>
+        </div>
+      </div>
+      <div class="wizard-controls center">
+        <a class="subtle-link" data-target="company">Go Back</a>
+        <div class="btn align-right" data-target="agent">Skip</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="emailStart">
+      <h2>Email</h2>
+      <div class="wizard-body vertical justified">
+        <fieldset>
+          <div class="form-group">
+            <label>Full Name</label>
+            <input class="form-control" value="Company Support">
+          </div>
+          <div class="form-group">
+            <label>Email</label>
+            <input type="email" class="form-control" value="support@company.com">
+          </div>
+          <div class="form-group">
+            <label>Password</label>
+            <input type="password" class="form-control" value="123456">
+          </div>
+        </fieldset>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn" data-target="channels">Cancel</div>
+        <a class="subtle-link align-right" data-target="channels">Go Back</a>
+        <div class="btn btn--primary" data-target="emailCheck">Connect</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="emailCheck" data-hide="1000">
+      <h2>Email</h2>
+      <div class="wizard-body vertical justified">
+        <p class="wizard-loadingText">
+          <span class="loading icon"></span> Testing support@company.com
+        </p>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn js-cancelEmailCheck" data-target="emailStart">Cancel</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="inboundEmail">
+      <h2>Incoming Email Server</h2>
+      <div class="alert alert--info" role="alert">Account must be manually configured</div>
+      <div class="wizard-body vertical justified">
+        <fieldset>
+          <div class="form-group">
+            <label>Account Type</label>
+            <div class="u-positionOrigin">
+              <select class="form-control">
+                <option selected>IMAP</option>
+                <option>POP3</option>
+              </select>
+              <div class="select-arrow icon"></div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label>Mail Server</label>
+            <input type="url" class="form-control" value="imap.company.com" placeholder="imap.example.com">
+          </div>
+          <div class="form-group">
+            <label>User Name</label><!-- (prefilled - taken from the email) -->
+            <input class="form-control" value="support">
+          </div>
+          <div class="form-group">
+            <label>Password (prefilled)</label>
+            <input type="password" class="form-control" value="123456">
+          </div>
+        </fieldset>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn js-cancelChannelSetup" data-target="channels">Cancel</div>
+        <a class="subtle-link align-right" data-target="emailStart">Go Back</a>
+        <div class="btn btn--primary" data-target="inboundCheck">Connect</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="inboundCheck" data-hide="2000">
+      <h2>Incoming Email Server</h2>
+      <div class="wizard-body vertical justified">
+        <p class="wizard-loadingText">
+          <span class="loading icon"></span> Connection to imap.company.com
+        </p>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn js-cancelInboundCheck" data-target="inboundEmail">Cancel</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="outboundEmail">
+      <h2>Outgoing Email Server</h2>
+      <div class="wizard-body vertical justified">
+        <fieldset>
+          <div class="form-group">
+            <label>SMTP Server</label>
+            <input type="url" class="form-control" value="smtp.company.com" placeholder="smtp.company.com">
+          </div>
+          <div class="form-group">
+            <label>User Name</label>
+            <input class="form-control" placeholder="Optional">
+          </div>
+          <div class="form-group">
+            <label>Password</label>
+            <input type="password" class="form-control" placeholder="Optional">
+          </div>
+        </fieldset>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn btn--subtle js-cancelChannelSetup" data-target="channels">Cancel</div>
+        <div class="btn btn--subtle align-right" data-target="emailStart">Go Back</div>
+        <div class="btn btn--primary" data-target="outboundCheck">Connect</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="outboundCheck" data-hide="2330">
+      <h2>Outgoing Email Server</h2>
+      <div class="wizard-body vertical justified">
+        <p class="wizard-loadingText">
+          <span class="loading icon"></span> Connecting to smtp.company.com
+        </p>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn js-cancelOutboundCheck" data-target="outboundEmail">Cancel</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="moreChannels">
+      <h2>Connect Channels</h2>
+      <div class="wizard-body vertical center">
+        <label>Connected Channels</label>
+        <div class="channelList">
+          <div class="channelList-entry center">
+            <div class="email channel icon"></div>
+            <div class="channelList-label">
+              <div class="channelList-name">support@company.com</div>
+              <div class="channelList-status">Email</div>
+            </div>
+          </div>
+        </div>
+        <label>Connect Another</label>
+        <div class="wizard-buttonList vertical">
+          <div class="btn auth_provider auth_provider--wide email" data-target="emailStart">
+            <div class="email provider_icon"></div>
+            <div class="provider_name">Email</div>
+          </div>
+          <div class="btn auth_provider auth_provider--wide twitter" data-target="twitter">
+            <div class="twitter provider_icon"></div>
+            <div class="provider_name">Twitter</div>
+          </div>
+          <div class="btn auth_provider auth_provider--wide facebook" data-target="facebook">
+            <div class="facebook provider_icon"></div>
+            <div class="provider_name">Facebook</div>
+          </div>
+        </div>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn btn--primary align-right" data-target="agents">Continue</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="agents">
+      <h2>Invite Colleagues</h2>
+      <div class="wizard-body vertical justified">
+        <fieldset>
+          <div class="form-group formGroup--halfSize">
+            <label for="agent_first_name">Firstname</label>
+            <input id="agent_first_name" class="form-control" value="Eric">
+          </div>
+          <div class="form-group formGroup--halfSize">
+            <label for="agent_last_name">Lastname</label>
+            <input id="agent_last_name" class="form-control" value="Dassner">
+          </div>
+          <div class="form-group">
+            <label for="agent_email">Email</label>
+            <input type="email" id="agent_email" class="form-control" value="ericdassner@web.de">
+          </div>
+        </fieldset>
+      </div>
+      <div class="wizard-controls center">
+        <a class="subtle-link" data-target="moreChannels">Go Back</a>
+        <div class="btn btn--primary align-right" data-target="setupFinished">Continue</div>
+        <div class="btn btn--success js-inviteAgent">Invite</div>
+      </div>
+    </div>
+    <div class="wizard-slide hide" data-slide="setupFinished" data-hide="2330">
+      <h2>Setup Finished</h2>
+      <div class="wizard-body vertical justified">
+        <p class="wizard-loadingText">
+          <span class="loading icon"></span> Starting Zammad
+        </p>
+      </div>
+    </div>
+    <!-- <div class="wizard-slide" data-slide="channels">
+      <h2>Channel List</h2>
+      <div class="wizard-body vertical">
+        <div class="channelList">
+          <!--<div class="channelList-entry center">
+            <div class="email channel icon"></div>
+            <div class="channelList-label">
+              <div class="channelList-name">support@company.com</div>
+              <div class="channelList-status">Email</div>
+            </div>
+          </div>
+          <div class="channelList-entry center">
+            <div class="email channel icon"></div>
+            <div class="channelList-label">
+              <div class="channelList-name">contact@company.com</div>
+              <div class="channelList-status">Email</div>
+            </div>
+          </div>
+          <div class="channelList-entry center">
+            <div class="twitter channel icon"></div>
+            <div class="channelList-label">
+              <div class="channelList-name">@company</div>
+              <div class="channelList-status">Twitter</div>
+            </div>
+          </div>
+          <div class="channelList-placeholder">
+            No Channels Configured
+          </div>
+          <div class="channelList-controls">
+            <div class="channelList-controlEntry dropup dropdown--actions" title="Add Channel">
+              <div class="flex centered" data-toggle="dropdown" id="channelActions" aria-expanded="true">
+                <div class="add icon"></div>
+              </div>
+              <ul class="dropdown-menu" role="menu" aria-labelledby="channelActions">
+                <li role="presentation">
+                  <a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
+                <li role="presentation">
+                  <a role="menuitem" tabindex="-1" href="#">Änderungsprotokoll</a>
+                <li role="presentation">
+                  <a role="menuitem" tabindex="-1">Benutzer zusammenführen</a>
+                <li role="presentation">
+                  <a role="menuitem" tabindex="-1">Benutzer löschen</a>
+              </ul>
+            </div>
+            <div class="channelList-controlEntry js-remove" title="Remove Channel">
+              <div class="flex centered">
+                <div class="remove icon"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wizard-controls center">
+        <div class="btn btn--primary align-right" data-target="agent">Next</div>
+      </div>
+    </div> -->
+  </div>
+</div>

app/assets/javascripts/app/views/login.jst.eco

@@ -29,11 +29,10 @@
 
       <div class="auth_providers horizontal stretch">
         <% for auth_provider in @auth_providers: %>
-          <a class="auth_provider <%= auth_provider.class %> horizontal" href="<%= auth_provider.url %>">
+          <a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
-            <span class="provider_icon"></span>
+            <span class="<%= auth_provider.class %> provider_icon"></span>
             <span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
           </a>
-          <li><a href="<%= auth_provider.url %>"></a></li>
         <% end %>
       </div>
       <% end %>

app/assets/stylesheets/zammad.css.scss

@@ -116,6 +116,20 @@ small {
   background: hsla(50,100%,50%,.13);
 }
 
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+.clearfix { display: inline-block; }
+/* start commented backslash hack \*/
+* html .clearfix { height: 1%; }
+.clearfix { display: block; }
+/* close commented backslash hack */
+
 [contenteditable] {
   display: block;
   white-space: pre-wrap;
@@ -230,6 +244,81 @@ span[data-tooltip]:hover:before {
   display: none;
 }
 
+.btn,
+.btn:hover,
+.btn:focus {
+  font-size: 14px;
+  padding: 10px 24px 9px;
+  color: hsl(202,68%,54%);
+  background: white;
+  border-color: rgba(0,0,0,.1);
+  outline: none;
+  
+  &.is-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: .33;
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+
+  &.btn--primary {
+    color: white;
+    background: #419ed7;
+    border-color: #419ed7;
+  }
+
+  &.btn--success {
+    color: white;
+    background: hsl(145,51%,45%);
+  }
+
+  &.btn--danger {
+    color: white;
+    background: hsl(0,65%,55%);
+  }
+
+  &.btn--subtle {
+    padding-left: 0;
+    padding-right: 0;
+    border: none;
+    color: rgba(0,0,0,.32);
+    text-decoration: underline;
+    background: none;
+    @extend .u-clickable;
+    
+    &:hover {
+      color: rgba(0,0,0,.5);
+    }
+
+    + .btn:not(.align-right) {
+      margin-left: 20px;
+    }
+  }
+}
+
+.btn + .btn {
+  margin-left: 10px;
+}
+
+.btn + .btn.align-right {
+  margin-left: auto;
+}
+
+.vertical > .btn + .btn {
+  margin-left: 0;
+  margin-top: 10px;
+}
+
+.btn--download .download.icon {
+  margin-right: 6px;
+  margin-top: 3px;
+  margin-left: -10px;
+  vertical-align: top;
+}
+
 table {
   table-layout: fixed;
 }
@@ -433,7 +522,7 @@ h5 {
 label,
 .checkbox.form-group label {
   text-transform: uppercase;
-  color: #999;
+  color: rgba(0,0,0,.5);
   font-size: 12px;
   font-weight: normal;
   letter-spacing: 0.1em;
@@ -443,10 +532,15 @@ label,
 
 fieldset {
   margin: 0 -4px;
+  @extend .clearfix;
 }
 
 fieldset .form-group {
   padding: 0 4px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 fieldset > *:not(.form-group) .form-control {
@@ -477,6 +571,10 @@ fieldset > *:not(.form-group) .form-control {
   float: left;
 }
 
+.fromGroup--standalone .form-control {
+  margin-bottom: 0;
+}
+
 input[type="radio"], 
 input[type="checkbox"] {
   margin: 0;
@@ -497,10 +595,10 @@ textarea,
   line-height: 22px;
   color: #555;
   background: white;
-  border: 1px solid hsl(0, 0%, 90%);
+  border: 1px solid transparent;
   border-radius: 3px;
   transition: none;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
   outline: none;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -625,14 +723,15 @@ textarea,
 
 .help-block {
   margin: 0;
+  color: #bcbcbc;
+  
+  &.help-block--center {
+    text-align: center;
+  }
 }
 
 .help-block:not(:empty) {
-  margin: 5px 0 10px;
+  margin: 8px 2px 10px;
-}
-
-.help-block {
-  color: #bcbcbc;
 }
 
 /* replace music icon with attachment */
@@ -662,6 +761,12 @@ textarea,
     margin-top: 0;
   }
 
+.zammad.full.logo {
+  height: 50px;
+  margin-left: -25px;
+  margin-bottom: 5px;
+}
+
 .login, 
 .getstarted, 
 .reset_password,
@@ -807,15 +912,21 @@ ol.tabs li {
     position: relative;
   }
 
-.auth_provider {
+.auth_provider,
-  padding: 9px 7px 8px;
+.auth_provider:hover {
+  padding: 9px 10px 9px 7px;
   color: white;
   line-height: 22px;
   text-align: center;
-  border-radius: 2px;
+  border-radius: 4px;
+  @extend .horizontal;
+  
+  &.auth_provider--wide {
+    padding-right: 25px;
+  }
 }
 
-  .auth_provider:not(:last-child) {
+  .auth_providers .auth_provider:not(:last-child) {
     margin-right: 8px;
   }
 
@@ -825,16 +936,28 @@ ol.tabs li {
     @extend .u-clickable;
   }
 
-  .auth_provider.facebook {
+  .auth_provider.facebook,
-    background-color: #4f699c;
+  .btn.facebook:hover {
+    background: #4f699c;
   }
 
-  .auth_provider.google {
+  .auth_provider.google,
-    background-color: #d8543c;
+  .btn.google:hover {
+    background: #d8543c;
   }
 
-  .auth_provider.twitter {
+  .auth_provider.twitter,
-    background-color: #2eaee1;
+  .btn.twitter:hover {
+    background: hsl(197, 75%, 53%);
+  }
+
+  .auth_provider.email,
+  .btn.email:hover {
+    background: hsl(47, 100%, 59%);
+  }
+
+  .provider_name {
+    @extend .flex;
   }
 
 .provider_icon {
@@ -868,6 +991,49 @@ ol.tabs li {
   background-position: 20px 20px; /* make icon empty */
 }
 
+  .add.icon,
+  .remove.icon {
+    width: 21px;
+    height: 21px;
+    line-height: 20px;
+    vertical-align: bottom;
+  }
+
+  .add.icon:after,
+  .remove.icon:after {
+    display: block;
+    margin-top: 3px;
+  }
+
+  .add.icon:after {
+    content: "+";
+    font-size: 34px;
+    margin-left: 2px;
+  }
+
+  .remove.icon:after {
+    content: "-";
+    font-size: 36px;
+    margin-left: 3px;
+  }
+
+  .status.icon {
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    border: 1px solid;
+  }
+
+  .active.status.icon {
+    background: hsl(145,51%,45%);
+    border-color: hsl(145,51%,39%);
+  }
+
+  .inactive.status.icon {
+    background: hsl(4,82%,44%);
+    border-color: hsl(4,82%,38%);
+  }
+
   .dashboard.icon,
   .overviews.icon,
   .customers.icon,
@@ -1589,65 +1755,6 @@ footer {
   width: 100px;
 }
 
-.btn,
-.btn:hover,
-.btn:focus {
-  font-size: 14px;
-  padding: 10px 24px 9px;
-  color: hsl(202,68%,54%);
-  background: white;
-  border-color: rgba(0,0,0,.1);
-  outline: none;
-  
-  &.is-disabled {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: .33;
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-}
-
-.btn + .btn {
-  margin-left: 10px;
-}
-
-.vertical > .btn + .btn {
-  margin-left: 0;
-  margin-top: 10px;
-}
-
-.btn--primary,
-.btn--primary:hover,
-.btn--primary:focus {
-  color: white;
-  background: #419ed7;
-  border-color: #419ed7;
-}
-
-.btn--success,
-.btn--success:hover,
-.btn--success:focus {
-  color: white;
-  background: hsl(145,51%,45%);
-}
-
-.btn--danger,
-.btn--danger:hover,
-.btn--danger:focus {
-  color: white;
-  background: hsl(0,65%,55%);
-}
-
-.btn--download .download.icon {
-  margin-right: 6px;
-  margin-top: 3px;
-  margin-left: -10px;
-  vertical-align: top;
-}
-
 .navigation {
   width: 260px;
   background: #26272e;
@@ -3361,7 +3468,7 @@ footer {
 }
 
 .tags {
-  margin-bottom: 20px;
+  margin: 15px 0 20px;
 }
 
 .tagList {
@@ -3398,6 +3505,9 @@ footer {
   .newTicket .subtle-link {
     color: hsl(0,0%,89%);
   }
+  .newTicket .article-form-top {
+    margin-top: 15px;
+  }
 
 .box {
   background: white;
@@ -3429,8 +3539,8 @@ footer {
   }
 
 .formset-inset {
-  margin: 18px -24px 24px;
+  margin: 34px -24px 24px;
-  padding: 19px 24px 4px;
+  padding: 19px 24px 24px;
   background: hsl(197,20%,93%);
   border-top: 1px solid hsl(0,0%,90%);
   border-bottom: 1px solid hsl(0,0%,90%);
@@ -3463,6 +3573,7 @@ footer {
   .tokenfield .token-input {
     vertical-align: top;
     margin: 2px 0 0 5px;
+    height: 25px;
   }
 
   .tokenfield .token .token-label {
@@ -3647,7 +3758,7 @@ footer {
   padding: 0;
   min-width: 100%;
   color: white;
-  background: none;
+  background: hsl(234,10%,19%);
   border-radius: 0;
   border: none;
   box-shadow: none;
@@ -3660,7 +3771,6 @@ footer {
 
   .dropdown ul {
     margin: 0;
-    background: hsl(234,10%,19%);
   }
 
   .dropdown li {
@@ -3969,8 +4079,11 @@ footer {
     @extend .u-textTruncate;
   }
 
-.wizard {
+.wizard-slide {
+  @extend .vertical;
+  @extend .hero-unit;
   width: 400px;
+  padding-bottom: 18px;
 }
 
 .wizard h2 {
@@ -3978,21 +4091,33 @@ footer {
   border-bottom: 1px solid rgba(0,0,0,.13);
   padding-bottom: 8px;
   margin-bottom: 16px;
-}
+  
-
+  & + p {
-.wizard .form-group {
+    margin-top: 0;
-  margin: 0;
+  }
 }
 
 .wizard-body {
+  @extend .flex;
   padding-bottom: 15px;
 }
 
 .wizard-controls {
-  padding-top: 15px;
+  @extend .horizontal;
+  margin-top: 15px;
   height: 39px;
 }
 
+.wizard-buttonList {
+  margin-top: 15px;
+  min-width: 200px;
+}
+
+p + .wizard-buttonList,
+label + .wizard-buttonList {
+  margin-top: 5px;
+}
+
 .wizard-loadingText {
   text-align: center;
   margin: 0;
@@ -4003,6 +4128,52 @@ footer {
   margin-right: 10px;
 }
 
+.wizard-aside {
+  padding-top: 15px;
+  text-align: center;
+  border-top: 1px solid rgba(0,0,0,.13);
+}
+
+.setup.wizard .wizard-body {
+  min-height: 140px;
+  
+  & > p:first-child {
+    margin-top: 0;
+  }
+}
+
+.setup.wizard .wizard-slide {
+  h2 .provider_icon {
+    margin-right: 8px;
+    margin-left: -10px;
+  }
+
+  &[data-slide=twitter],
+  &[data-slide=email] {
+    h2 {
+      color: white;
+    }
+  }
+
+  &[data-slide=twitter] {
+    background: hsl(197, 75%, 53%);
+    border-color: hsl(197, 75%, 48%);
+  }
+
+  &[data-slide=email] {
+    background: hsl(47, 100%, 59%);
+    border-color: hsl(47, 100%, 54%);
+  }
+}
+
+.setup.wizard .fileUpload-preview {
+  height: 36px;
+}
+
+.setup.wizard .fileUpload-preview:not([src=""]) + .fileUpload {
+  margin-left: 15px;
+}
+
 .import.wizard .wizard-slide {
   height: 300px;
 }
@@ -4070,6 +4241,77 @@ footer {
   opacity: 1;
 }
 
+.channelList {
+  @extend .flex;
+  @extend .vertical;
+  background: white;
+  border-radius: 2px;
+  margin: 5px 0 20px;
+}
+
+.channelList,
+.channelList-controls,
+.channelList-controlEntry {
+  border: 1px solid hsl(251,6%,90%);
+}
+
+.channelList-entry {
+  @extend .horizontal;
+  cursor: default;
+  padding: 5px 8px;
+  
+  &:not(:last-child) {
+    border-bottom: 1px solid hsl(251,6%,90%);
+  }
+}
+
+.channelList-label {
+  margin: 0 10px;
+  @extend .flex;
+  & > * {
+    @extend .u-textTruncate; 
+  }
+}
+
+.channelList-status {
+  font-size: 12px;
+  color: #999;
+}
+
+.channelList-placeholder {
+  @extend .flex;
+  @extend .centered;
+  color: #999;
+}
+
+.channelList-controls {
+  margin-top: auto;
+  @extend .horizontal;
+  background: hsl(251,6%,92%);
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.channelList-controlEntry {
+  @extend .horizontal;
+  @extend .justified;
+  width: 26px;
+  height: 26px;
+  border-left: none;
+  border-top: none;
+  border-bottom: none;
+  position: relative;
+  
+  [data-toggle=dropdown] {
+    position: relative;
+  }
+  
+  .icon {
+    opacity: 0.8;
+  }
+}
+
 .avatar-holder {
   display: inline-block;
   position: relative;
@@ -4553,6 +4795,12 @@ body.fit {
 
 .align-right {
   margin-left: auto;
+  
+  // give following elements a margin left
+  // used in setup wizard
+  & ~ * {
+    margin-left: 15px;
+  }
 }
 
 .align-center {