integrate config for actionmailer and make confirmation usable

sitcomlab · Jul 10, 2014 · 2df57ef · 2df57ef
1 parent 1b52fb2
commit 2df57ef
Show file tree

Hide file tree

Showing 15 changed files with 203 additions and 78 deletions.
diff --git a/app/assets/javascripts/angular/services/User.js.coffee b/app/assets/javascripts/angular/services/User.js.coffee
@@ -45,11 +45,14 @@ angular.module('DialogMapApp')
       scope.loginCredentials = {}
       scope.registerCredentials = {}
       scope.loading = false
-      scope.user =
-        email: user.email
-        id: user.id
-      _user.user = scope.user
-      scope.authenticated = _user.isAuthenticated()
+      if user.confirmed is true
+        scope.user =
+          email: user.email
+          id: user.id
+        _user.user = scope.user
+      else
+        scope.needConfirmation = true
+      scope.authenticated = user.confirmed and _user.isAuthenticated()
       # _user._off = $rootScope.$on 'devise:unauthorized', _user._unauthorized
       return
 
@@ -124,6 +127,7 @@ angular.module('DialogMapApp')
       scope.flash = undefined
       scope.loginCredentials = {}
       scope.registerCredentials = {}
+      scope.needConfirmation = false
       return
 
     scope.$on 'ngDialog.opened', (e, $dialog) ->

diff --git a/app/assets/javascripts/templates/user_modal.html.haml b/app/assets/javascripts/templates/user_modal.html.haml
@@ -1,51 +1,55 @@
 .loading_container{ ng_show: "loading" }
   = image_tag("loading.gif", class: "loading")
 %div{ ng_hide: "authenticated || loading" }
-  %h3 {{ !showLoginTab ? "Einloggen" : "Registrieren" }}
-  %a{ ng_click: "showLoginTab=!showLoginTab; flash = undefined", href:"" } oder {{ showLoginTab ? "einloggen" : "registrieren" }}?
-  #flash{ ng_show: "flash" } {{ flash }}
-  %form{ id: "register_form", name: "register_form", novalidate: true, ng_show: "showLoginTab" }
-    .field_label_container
-      .field_label E-Mail
-    %input#email.username{ name: "email",
-            ng_class: "{error: register_form.email.$dirty && register_form.email.$invalid}",
-            ng_model: "registerCredentials.email",
-            type: "email",
-            required: true }
-    .field_error_container
-      .field_error{ ng_show: "register_form.email.$dirty && register_form.email.$invalid || errors.email" }
-        %span{ ng_show: "errors.email", ng_repeat: "error in errors.email"} {{ error }}
-        %span{ ng_show: "register_form.email.$error.email" } muss eine E-Mail Adresse sein
-    .field_label_container
-      .field_label Passwort
-    %input#password.password{ name: "password",
-            ng_class: "{error: register_form.password.$dirty && register_form.password.$invalid}",
-            ng_model: "registerCredentials.password",
-            type: "password",
-            title: "muss mindestens 6 Zeichen enthalten",
-            required: true,
-            ng_minlength: 6 }
-    .field_error_container
-      .field_error{ ng_show: "register_form.password.$dirty && register_form.password.$invalid || errors.password" }
-        %span{ ng_show: "errors.password", ng_repeat: "error in errors.password"} {{ error }}
-        %span{ ng_show: "register_form.password.$error.minlength" } muss mindestens 6 Zeichen enthalten
-    .field_label_container
-      .field_label Passwortwiederholung
-    %input#password_confirmation.password{ name: "password_confirmation",
-            ng_class: "{error: register_form.password_confirmation.$dirty && register_form.password_confirmation.$invalid}",
-            ng_model: "registerCredentials.password_confirmation",
-            type: "password",
-            required: true,
-            password_match: "password",
-            ng_minlength: 6,
-            ui_keypress: "{13:'performRegister()'}" }
-    .field_error_container
-      .field_error{ ng_show: "register_form.password_confirmation.$dirty && register_form.password_confirmation.$invalid || register_form.password_confirmation.$error.pwmatch || errors.password_confirmation" }
-        %span{ ng_show: "register_form.password_confirmation.$error.pwmatch" } stimmt nicht mit der Bestätigung überein
-        %span{ ng_show: "errors.password_confirmation", ng_repeat: "error in errors.password_confirmation"} {{ error }}
-    %i.fa.fa-check.pointer.submit-button{ ng_click: "!register_form.$invalid && performRegister()", ng_disabled: "register_form.$invalid" } Registrieren
+  %div{ ng_hide: "needConfirmation" }
+    %h3 {{ !showLoginTab ? "Einloggen" : "Registrieren" }}
+    %a{ ng_click: "showLoginTab=!showLoginTab; flash = undefined", href:"" } oder {{ showLoginTab ? "einloggen" : "registrieren" }}?
+    #flash{ ng_show: "flash" } {{ flash }}
+    %form{ id: "register_form", name: "register_form", novalidate: true, ng_show: "showLoginTab" }
+      .field_label_container
+        .field_label E-Mail
+      %input#email.username{ name: "email",
+              ng_class: "{error: register_form.email.$dirty && register_form.email.$invalid}",
+              ng_model: "registerCredentials.email",
+              type: "email",
+              required: true }
+      .field_error_container
+        .field_error{ ng_show: "register_form.email.$dirty && register_form.email.$invalid || errors.email" }
+          %span{ ng_show: "errors.email", ng_repeat: "error in errors.email"} {{ error }}
+          %span{ ng_show: "register_form.email.$error.email" } muss eine E-Mail Adresse sein
+      .field_label_container
+        .field_label Passwort
+      %input#password.password{ name: "password",
+              ng_class: "{error: register_form.password.$dirty && register_form.password.$invalid}",
+              ng_model: "registerCredentials.password",
+              type: "password",
+              title: "muss mindestens 6 Zeichen enthalten",
+              required: true,
+              ng_minlength: 6 }
+      .field_error_container
+        .field_error{ ng_show: "register_form.password.$dirty && register_form.password.$invalid || errors.password" }
+          %span{ ng_show: "errors.password", ng_repeat: "error in errors.password"} {{ error }}
+          %span{ ng_show: "register_form.password.$error.minlength" } muss mindestens 6 Zeichen enthalten
+      .field_label_container
+        .field_label Passwortwiederholung
+      %input#password_confirmation.password{ name: "password_confirmation",
+              ng_class: "{error: register_form.password_confirmation.$dirty && register_form.password_confirmation.$invalid}",
+              ng_model: "registerCredentials.password_confirmation",
+              type: "password",
+              required: true,
+              password_match: "password",
+              ng_minlength: 6,
+              ui_keypress: "{13:'performRegister()'}" }
+      .field_error_container
+        .field_error{ ng_show: "register_form.password_confirmation.$dirty && register_form.password_confirmation.$invalid || register_form.password_confirmation.$error.pwmatch || errors.password_confirmation" }
+          %span{ ng_show: "register_form.password_confirmation.$error.pwmatch" } stimmt nicht mit der Bestätigung überein
+          %span{ ng_show: "errors.password_confirmation", ng_repeat: "error in errors.password_confirmation"} {{ error }}
+      %i.fa.fa-check.pointer.submit-button{ ng_click: "!register_form.$invalid && performRegister()", ng_disabled: "register_form.$invalid" } Registrieren
+  %div{ ng_show: "needConfirmation" }
+    Danke für deine Registrierung. Bitte schau in dein Postfach für die Adresse {{user.email}} und folge den Anweisungen, um deinen Account freizuschalten.
+    %i.fa.fa-check.pointer.submit-button{ ng_click: "needConfirmation = false; showLoginTab = false" } zurück zum Login
 
-  .social-buttons-container.center
+  .social-buttons-container.center{ ng_hide: "showLoginTab" }
     %i.fa.fa-login-fcbk.social-login-button{ ng_click: "initSocialLogin('facebook')" } Facebook
     %i.fa.fa-login-twtr.social-login-button{ ng_click: "initSocialLogin('twitter')" } Twitter
     %i.fa.fa-login-ggl.social-login-button{ ng_click: "initSocialLogin('google_oauth2')" } Google

diff --git a/app/controllers/confirmations_controller.rb b/app/controllers/confirmations_controller.rb
@@ -0,0 +1,9 @@
+class ConfirmationsController < Devise::ConfirmationsController
+
+  private
+
+    def after_confirmation_path_for(resource_name, resource)
+      '/finish_confirmation.html'
+    end
+
+end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -12,6 +12,8 @@ def finish_signup
       end
     elsif request.get? && current_user.email.match(User::TEMP_EMAIL_REGEX).nil?
       redirect_to '/finish_signin.html'
+    else
+      render :layout => 'application_without_angular'
     end
   end
 

diff --git a/app/serializers/user_serializer.rb b/app/serializers/user_serializer.rb
@@ -1,3 +1,7 @@
 class UserSerializer < ActiveModel::Serializer
-  attributes :id, :email, :name
+  attributes :id, :email, :name, :confirmed
+
+  def confirmed
+    object.confirmed?
+  end
 end
diff --git a/app/views/layouts/application_without_angular.html.haml b/app/views/layouts/application_without_angular.html.haml
@@ -0,0 +1,15 @@
+!!! 5
+%html{ :"ng-app" => "DialogMapApp" }
+  %head
+    %meta{:charset => "utf-8"}
+    %title DialogMap
+    %meta{:content => "Supporting public deliberation through spatially referenced dialogues", :name => "description"}/
+    %meta{:content => "Gerald Pape", :name => "author"}/
+    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+    %meta{:content => "width=device-width, initial-scale=1.0, maximum-scale=1.0", :name => "viewport"}
+    %link{rel: "icon", href: "favicon.png", type: "image/png"}
+    <style>#add-email{width: 400px;margin:auto}input{text-align: center;margin: auto;display: block;}#user_email{width: 100%;}p.help-block{text-align: justify;}p.no-spam{text-align:center;}</style>
+
+    = csrf_meta_tags
+  %body
+    = yield
diff --git a/app/views/users/finish_signup.html.erb b/app/views/users/finish_signup.html.erb
diff --git a/app/views/users/finish_signup.html.haml b/app/views/users/finish_signup.html.haml
@@ -0,0 +1,17 @@
+#add-email
+  %h2 Eine Sache noch..
+  = form_for(current_user, :as => 'user', :url => finish_signup_path(current_user), :html => { role: 'form'}) do |f|
+    - if @show_errors && current_user.errors.any?
+      #error_explanation
+        Fehler:
+        - current_user.errors.full_messages.each do |msg|
+          = msg
+    %p.help-block Leider wird bei der Authentifizierung mit Twitter keine E-Mail Adresse mitgeschickt. Bitte vervollständige sie an dieser Stelle, damit andere Benutzer dich eindeutig identifizieren können.
+    = current_user.name
+    #form-group
+      = f.label :email
+      #controls
+        = f.text_field :email, :autofocus => true, :value => '', class: 'form-control', placeholder: '[email protected]'
+        %p.no-spam Es wird kein Spam versendet!
+    #actions
+      = f.submit 'Speichern und Fortfahren'
diff --git a/config/application.rb b/config/application.rb
@@ -19,7 +19,7 @@ class Application < Rails::Application
     # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
     config.i18n.default_locale = :de
-    config.action_mailer.default_url_options = { host: 'localhost:3000' }
+    config.action_mailer.default_url_options = { host: ENV['HOSTNAME'] }
     config.angular_templates.module_name = 'DialogMapApp'
   end
 end
diff --git a/config/environments/production.rb b/config/environments/production.rb
@@ -80,4 +80,14 @@
 
   # Do not dump schema after migrations.
   config.active_record.dump_schema_after_migration = false
+
+  config.action_mailer.smtp_settings = {
+    :address   => ENV["SMTP_HOST"],
+    :port      => ENV["SMTP_PORT"], # ports 587 and 2525 are also supported with STARTTLS
+    :enable_starttls_auto => true, # detects and uses STARTTLS
+    :user_name => ENV["SMTP_USER"],
+    :password  => ENV["SMTP_PASSWORD"], # SMTP password is any valid API key
+    :authentication => 'login', # Mandrill supports 'plain' or 'login'
+    :domain => ENV["HOSTNAME"], # your domain to identify your server when connecting
+  }
 end
diff --git a/config/initializers/devise.rb b/config/initializers/devise.rb
@@ -15,7 +15,7 @@
   # Configure the e-mail address which will be shown in Devise::Mailer,
   # note that it will be overwritten if you use your own mailer class
   # with default "from" parameter.
-  config.mailer_sender = '[email protected]'
+  config.mailer_sender = ENV["EMAIL_FROM"]
 
   # Configure the class responsible to send e-mails.
   # config.mailer = 'Devise::Mailer'

diff --git a/config/routes.rb b/config/routes.rb
@@ -2,7 +2,13 @@
   devise_for :admin_users, ActiveAdmin::Devise.config
   ActiveAdmin.routes(self)
   root 'page#index'
-  devise_for :users, path: "api/users", defaults: { format: :json }, :controllers => { omniauth_callbacks: 'omniauth_callbacks' }
+  devise_for :users, path: "api/users", defaults: { format: :json }, :controllers => { omniauth_callbacks: 'omniauth_callbacks' }, skip: [:confirmations]
+
+  as :user do
+    get   '/users/confirm', to: 'confirmations#show',   as: 'user_confirmation'
+    post  '/users/confirm', to: 'confirmations#create'
+    get   '/users/confirm/resend', to: 'confirmations#new',    as: 'new_user_confirmation'
+  end
 
   namespace :api, defaults: { format: :json } do
     get 'contributions/filter_items', to: 'contributions#filter_items'
@@ -12,7 +18,7 @@
     resources :contributions
   end
 
-  match '/finish_signup/:id' => 'users#finish_signup', via: [:get, :patch], :as => :finish_signup
+  match '/finish_signup/:id' => 'users#finish_signup', via: [:get, :patch], as: :finish_signup
 
   # The priority is based upon order of creation: first created -> highest priority.
   # See how all your routes lay out with "rake routes".

diff --git a/example.rbenv-vars b/example.rbenv-vars
@@ -7,3 +7,9 @@ OAUTH_TWITTER_KEY=swaghettiYolonaise
 OAUTH_TWITTER_SECRET=swaghettiYolonaise
 OAUTH_GOOGLE_KEY=swaghettiYolonaise
 OAUTH_GOOGLE_SECRET=swaghettiYolonaise
+HOSTNAME=localhost:3000
+SMTP_HOST=smtp.mandrillapp.com
+SMTP_PORT=25
+SMTP_USER=SOMEUSER
+SMTP_PASSWORD=SOMEPASS
+[email protected]
diff --git a/public/finish_confirmation.html b/public/finish_confirmation.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Confirmation Redirect</title>
+    <style>
+    p {
+      display: block;
+      text-align: center;
+    }
+    </style>
+  </head>
+  <body>
+    <p>Vielen Dank! Dein Account ist nun aktiviert.<br />Du kannst diese Seite jetzt schließen, oder  <a href="/">hier</a> klicken um direkt zur DialogMap zu gehen.</p>
+  </body>
+</html>
diff --git a/public/finish_signin.html b/public/finish_signin.html
@@ -5,10 +5,63 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Login Redirect</title>
     <script>
-      setTimeout('window.close();', 1200);
+      setTimeout('window.close();', 1000);
     </script>
+    <style>
+    p {
+      display: block;
+      text-align: center;
+    }
+    .ellipsis i {
+      opacity: 0;
+      -webkit-animation: dot 1.3s infinite;
+      -webkit-animation-delay: 0.0s;
+      -moz-animation: dot 1.3s infinite;
+      -moz-animation-delay: 0.0s;
+      animation: dot 1.3s infinite;
+      animation-delay: 0.0s;
+    }
+
+    .ellipsis i+i {
+        opacity: 0;
+        -webkit-animation: dot 1.3s infinite;
+        -webkit-animation-delay: 0.2s;
+        -moz-animation: dot 1.3s infinite;
+        -moz-animation-delay: 0.2s;
+        animation: dot 1.3s infinite;
+        animation-delay: 0.2s;
+    }
+
+    .ellipsis i+i+i {
+        opacity: 0;
+        -webkit-animation: dot 1.3s infinite;
+        -webkit-animation-delay: 0.3s;
+        -moz-animation: dot 1.3s infinite;
+        -moz-animation-delay: 0.3s;
+        animation: dot 1.3s infinite;
+        animation-delay: 0.3s;
+    }
+
+    @-webkit-keyframes dot {
+          0% { opacity: 0; }
+         50% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+
+    @-moz-keyframes dot {
+        0% { opacity: 0; }
+       50% { opacity: 0; }
+      100% { opacity: 1; }
+    }
+
+    @keyframes dot {
+        0% { opacity: 0; }
+       50% { opacity: 0; }
+      100% { opacity: 1; }
+    }
+    </style>
   </head>
   <body>
-    <p>Login erfolgreich. Weiterleitung erfolgt</p>
+    <p>Login erfolgreich.<br />Weiterleitung erfolgt in Kürze<i class="ellipsis"><i>.</i><i>.</i><i>.</i></i></p>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,8 @@ def finish_signup @@
           end
         elsif request.get? && current_user.email.match(User::TEMP_EMAIL_REGEX).nil?
           redirect_to '/finish_signin.html'
+        else
+          render :layout => 'application_without_angular'
         end
       end
@@ Expand Down @@