Good intentions, just harsher way of getting things done. Great read though. It created such a favorable perception of Apple, I dunno if I can ever buy anything that is not Apple anymore. I’m left with the feeling that Apple is the only company that is innovating and everyone just copies from them.

Troxler’s fading or Troxler’s effect is a phenomenon of visual perception. When one fixates a particular point, after about 20 seconds or so, a stimulus away from the fixation point, in peripheral vision, will fade away and disappear. The effect is enhanced if the stimulus is small, is of low contrast or equiluminant, or is blurred. The effect is enhanced the further the stimulus is away from the fixation point. Source: Wikipedia

Fixate on the +, after about 10-15 seconds the circles around it will fade away and you will see a green dot revolving around a circle. If you look away, you will see the below circle with green dots. Blinking is ok, but try not to for the best effect.

The design is inspired by the new Blue Screen of Death in Windows 8. Download the code from Github, you can also see a demo of the page here. Switch the theme for a dark version.

It was easy enough, the code is in the validate() method in userBean.cfc. You just need to add the highlighted lines in. Instead of modifying the core file, you can use method injection to inject the method, the process is similar to this post. This way it won’t break when you update mura.

<cffunction name="validate" access="public" output="false" >
<cfset var extErrors=structNew() />
<cfif len(getSiteID())>
<cfset extErrors=variables.configBean.getClassExtensionManager().validateExtendedData(getAllValues())>
</cfif>
<cfset variables.instance.errors=structnew() />
<cfif not structIsEmpty(extErrors)>
<cfset structAppend(variables.instance.errors,extErrors)>
</cfif>
<cfif trim(variables.instance.siteid) neq "">
<cfif variables.instance.type eq 2 and (variables.instance.username eq "" or not checkUsername())>
<cfsetvariables.instance.errors.username=variables.settingsManager.getSite(getSiteID()).getRBFactory().getResourceBundle().messageFormat(variables.settingsManager.getSite(getSiteID()).getRBFactory().getKey("user.usernamevalidate") , getusername() ) />
</cfif>
<cfif variables.instance.type eq 2 and variables.instance.email eq "">
<cfsetvariables.instance.errors.email=variables.settingsManager.getSite(getSiteID()).getRBFactory().getKey("user.emailrequired")/>
</cfif>
<cfif variables.instance.type eq 2 and not checkEmail()>
<cfsetvariables.instance.errors.email=variables.settingsManager.getSite(getSiteID()).getRBFactory().getKey("user.emailalreadyinuse")/>
</cfif>
<!--- If captcha data has been submitted validate it --->
<cfif not (not len(variables.instance.hKey) or variables.instance.hKey eq hash(variables.instance.uKey))>
<cfsetvariables.instance.errors.SecurityCode=variables.settingsManager.getSite(getSiteID()).getRBFactory().getKey("captcha.error")/>
</cfif>
<!--- If cfformprotect has been submitted validate it --->
<cfif not variables.instance.passedProtect>
<cfsetvariables.instance.errors.Spam=variables.settingsManager.getSite(getSiteID()).getRBFactory().getKey("captcha.spam")/>
</cfif>
<cfelse>
<cfset variables.instance.errors.siteid="The 'SiteID' variable is missing." />
</cfif>
<cfreturn this>
</cffunction>

Add the ‘user.emailalreadyinuse’ key in the properties files in resourcebundles folder in your theme. You can add a message like ‘This email is already in use’ or of you want it to be more verbose, ‘This email already has an account, please go to the login page to login or if you have forgotten your password, reset it using the Forgot Password form on the login page.’

I did not have enough time to test it thoroughly, but it worked on the registration page and it did not seem to break anything else. Please test it out some more before deploying to production.

So here is how it breaks out

1. Blogger to host the website and customize the heck out of the HTML and CSS
2. Picasa to host all the images
3. Dropbox to host javascript libraries which are not already on Google CDN
4. MailChimp for the mailing list sign up box

I needed Dropbox to host the Shadowbox lightbox plugin, just place the javascript file in the public folder and use the URL it gives. Mailchimp free plan allows 2000 members, non-profits get some more.
Take a look at the website here
Its a complete website with mailing list sign ups, donations, a superb photo gallery with a very robust CMS hosted by  Google and its completely free. This is more than enough for the small business or a local restaurant, wonder how much they are charged out there.
I know I’m sensationalizing a bit here since for any software project, most of the costs are for the requirements gathering, design and development, but the hosting costs and other services become significant over a period of time.

There is an way to add a user to a group at sign up but nothing about mailing list, which is weird since it is a common feature on most sign up pages, a checkbox at the end saying ‘Sign up for our newsletter’.

So, anyway it doesn’t really matter, it was pretty easy to add that functionality anyway. It requires 2 edits,

{theme_directory}/display_objects/dsp_edit_profile.cfm

You can copy this file from {siteroot}/default/includes/ if it’s not there already.
add this in the form where you want the checkbox to show up.

<cfif not session.mura.isLoggedIn>
<fieldset>
  <ul>
        <li>
        <div style="margin-top:20px;">
        <input type="checkbox" id="signupnewsletter" name="mlid" value="334FA4F6-AC74-$#B2-9BB871B2438EED44"/>
        <label for="signupnewsletter" style="float:none;">Sign up for our newsletter</label>
        </div>
        </li>
  </ul>
</fieldset>
</cfif>

includes/eventHandler.cfc

This code checks if the mlid input was checked, if it is, it creates a struct with data required for adding to the mailing list and submits it to the createmember method in the mailingListManager.

<cffunction name="onBeforeUserCreate" output="true">
  <cfargument name="$">

  <cfset uu.userEmail = $.event("userBean").getemail()>
  <cfset uu.username = $.event("userBean").getusername()>

    <cfif $.event().valueExists("mlid")>
      <cfset maillistdata = structNew()>
        <cfset maillistdata.email = uu.userEmail>
        <cfset maillistdata.siteid = $.event('siteid')>
        <cfset maillistdata.mlid = $.event().getValue("mlid")>
      <cftry>
    <cfset $.getBean("mailingListManager").createMember(maillistdata)>
        <cfcatch type="any"></cfcatch>
        </cftry>
    </cfif>

</cffunction>

If there is something already built in, I would love to know. Please let me know in the comments. I hope you find it useful.

Look for this snippet in your {theme folder}/display_objects/dsp_edit_profile.cfm. You can copy this file from {siteroot}/{siteid}/includes/ if it’s not there already.

 <input name="inactive" type="hidden" value="1" />

Make sure the value is 1

To send e-mails, edit the {siteroot}/{siteid}/includes/eventHandler.cfc and add this snippet of code.

set your own encryption key.

<cffunction name="onApplicationLoad" output="false">
<cfargument name="$">
<cfargument name="event">

<cfset application.encKey="as7gas6fgas6fga76sfg6gfw6gqfg6fgfwe6fgwe8fg6">

</cffunction>

Here, we send the activation email, I’m using cfusion_encrypt() because the encrypted output only contains alphanumeric characters. This avoids any issues with emails clients or browsers.

<cffunction name="onBeforeUserCreate" output="true">
<cfargument name="$">

<cfset uu.userEmail = $.event("userBean").getemail()>
<cfset uu.username = $.event("userBean").getusername()>

<cfmail to="#uu.userEmail#"
from='#$.siteConfig().getmailserverusername()#'
subject="Activate Your Account on #$.siteConfig().getsite()#"
server="#$.siteConfig().getmailserverip()#"
username="#$.siteConfig().getmailserverusername()#"
password="#$.siteConfig().getmailserverpassword()#"
port="#$.siteConfig().getmailserversmtpport()#"
replyto="#$.siteConfig().getmailserverusernameemail()#"
failto="#$.siteConfig().getmailserverusernameemail()#"
type="html">

<p>Thank you for creating an account on #$.siteConfig().getsite()#. You need to confirm your email to activate your account</p>

<p><a href="http://#$.siteConfig().getdomain()##$.createHREF(filename='accounts/verify')#?passphrase=#cfusion_encrypt(uu.username, application.encKey)#">Click here</a> to activate your account</p>

<p>If you are not able to click directly, copy and paste the URL below:</p>

<p>http://#$.siteConfig().getdomain()##$.createHREF(filename='accounts/verify')#?passphrase=#cfusion_encrypt(uu.username, application.encKey)#</p>

<p>Thanks, <br />
The ArrowConcept Team</p>

</cfmail>

</cffunction>

OK. So, the email is sent, now we need to activate the account when they click on the link. In my activation email, I’m pointing them to accounts/verify. You can change it per your need and create that page in the mura admin. Assign it a separate template and in that template, add this code

<cfparam name="url.passphrase" default="">
<cfoutput>
<cfinclude template="inc/html_head.cfm" />
<body id="#$.getTopID()#" class="oneCol depth#arrayLen($.event('crumbdata'))#">
<div class="container #$.createCSSid($.content('menuTitle'))#">
<cfinclude template="inc/header.cfm" />
</div>
<div id="container" class="#$.createCSSid($.content('menuTitle'))#">
  <div id="content" class="clearfix">
    <div id="primary" class="article">
      #$.dspCrumbListLinks("crumbList","&nbsp;&raquo;&nbsp;")#
            <cfif len(url.passphrase)>
                <cftry>
                  <cfset uu.username = cfusion_decrypt(url.passphrase, application.encKey)>
                <cfcatch type="any">
                </cfcatch>
                </cftry>

                <cfif len(uu.username) and $.getBean("user").checkUsername(uu.username)>
                    <cfset uu.getUserBean=$.getBean("user").loadby(username=uu.username)>
                    <cfset uu.getUserBean.setInactive(0)>
                    <cfset uu.getUserBean.save()>
                    #$.dspBody(body=$.content('body'),crumbList=0,showMetaImage=1)#
<pre>               <cfelse>
               <cflocation url="/" addtoken="no"></pre>
</cfif>
 <cfelse>
 <cflocation url="/" addtoken="no">
 </cfif>
 </div>
 </div>
</div>
<cfinclude template="inc/footer.cfm" />
</body>
</html>
</cfoutput>​

That’s it, if the user is activated, it shows them the message you type in the body of the page. Any other scenario, it redirects to the home page.

Now there are a couple more things you can do to improve the usability of the accounts creation process. Change the create account confirmation message to say that they need to click the activation link in the email to be able to login. In our usability testing, most did not bother reading the message and kept trying to login but the application just gives a username and password do not match notification message. So, need to do one more change to show a message saying, your account is inactive, you need to click the activation link in your email to be able to login.

Back to the eventHandler.cfc file in your includes folder

<cffunction name="LoginWithEmailToo" output="false">
  <cfargument name="username" type="string" required="true" default="">
  <cfargument name="password" type="string" required="true" default="">
  <cfargument name="siteid" type="string" required="false" default="">
  <cfset var rolelist = "" />
  <cfset var rsUser = "" />
  <cfset var user = "" />
  <cfset var group = "" />
  <cfset var lastLogin = now() />
  <cfset var pluginEvent = createObject("component","mura.event").init(arguments) />
  <cfset var strikes = createObject("component","mura.user.userstrikes").init(arguments.username,variables.configBean) />

  <cflogout>
  <cfparam name="session.blockLoginUntil" type="string" default="#strikes.blockedUntil()#" />

  <cfif len(arguments.siteID)>
    <cfset variables.pluginManager.announceEvent('onSiteLogin',pluginEvent)/>
  <cfelse>
    <cfset variables.pluginManager.announceEvent('onGlobalLogin',pluginEvent)/>
  </cfif>
  <cfquery datasource="#application.configBean.getDatasource()#" name="rsUser" username="#variables.configBean.getDBUsername()#" password="#variables.configBean.getDBPassword()#">
  SELECT * FROM tusers WHERE
  (username=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.username)#">
  OR email=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.username)#">)
  AND
  (
    password=<cfqueryparam cfsqltype="cf_sql_varchar" value="#hash(trim(arguments.password))#">
    <cfif not variables.configBean.getEncryptPasswords() and len(trim(arguments.password)) neq 32>
    OR
    password=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.password)#">
    </cfif>
  )
  AND Type = 2
  and inactive=0
  </cfquery>

  <cfif rsUser.RecordCount GREATER THAN 0
    and not strikes.isBlocked()>

      <cfif rsUser.isPublic and (arguments.siteid eq '' or variables.settingsManager.getSite(arguments.siteid).getPublicUserPoolID() neq rsUser.siteid)>

        <cfset strikes.addStrike()>

        <cfreturn false  >
      </cfif>

      <cfset session.blockLoginUntil=""/>

      <cfset loginByQuery(rsUser)/>
      <cfset strikes.clear()>
      <cfif len(arguments.siteID)>
        <cfset variables.pluginManager.announceEvent('onSiteLoginSuccess',pluginEvent)/>
      <cfelse>
        <cfset variables.pluginManager.announceEvent('onGlobalLoginSuccess',pluginEvent)/>
      </cfif>

      <cfreturn true />

  <cfelse>
    <cfif not strikes.isBlocked()>
      <cfset strikes.addStrike()>
    <cfelse>

      <cfif len(arguments.siteID)>
        <cfset variables.pluginManager.announceEvent('onSiteLoginBlocked',pluginEvent)/>
      <cfelse>
        <cfset variables.pluginManager.announceEvent('onGlobalLoginBlocked',pluginEvent)/>
      </cfif>

      <cfset session.blockLoginUntil=strikes.blockedUntil()/>

    </cfif>

        <cfquery datasource="#application.configBean.getDatasource()#" name="rsUserInactive" username="#variables.configBean.getDBUsername()#" password="#variables.configBean.getDBPassword()#">
        SELECT * FROM tusers WHERE
        (username=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.username)#">
        OR email=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.username)#">)
        AND
        (
            password=<cfqueryparam cfsqltype="cf_sql_varchar" value="#hash(trim(arguments.password))#">
            <cfif not variables.configBean.getEncryptPasswords() and len(trim(arguments.password)) neq 32>
            OR
            password=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.password)#">
            </cfif>
        )
        AND Type = 2
        and inactive=1
        </cfquery>

        <cfif rsUserInactive.recordcount>
            <cfset session.logininactive = true>
        </cfif>

  </cfif>

  <cfreturn false />
</cffunction>

<cffunction name="onApplicationLoad" output="false">
    <cfargument name="$">
    <cfargument name="event">

    <cfset $.getBean("userUtility").injectMethod("Login",LoginWithEmailToo)/>

    <cfset application.encKey="as7gas6fgas6fga76sfg6gfw6gqfg6fgfwe6fgwe8fg6">

</cffunction>

This includes code to use email address along with username to login. The first highlighted block does that. You can copy it if you want that feature. For what we are doing now, you need the bottom 2 highlighted code blocks.

And in the {themefolder}/display_objects/dsp_login.cfm, replace this block of text at the top

<cfif request.status eq 'failed'>
 <cfif isDate(session.blockLoginUntil) and session.blockLoginUntil gt now()>
 <cfset request.isBlocked=true />
 <p id="loginMsg" class="error">#variables.rbFactory.getKey('user.loginblocked')#</p>
 <cfelse>
 <cfif isDefined("session.logininactive")>
 <p id="loginMsg" class="error">#variables.rbFactory.getKey('user.logininactive')#</p>
 <cfset structDelete(session, "logininactive")>
 <cfelse>
 <p id="loginMsg" class="error">#variables.rbFactory.getKey('user.loginfailed')#</p>
 </cfif>

 </cfif>
 </cfif>

Phew! Add the ‘user.logininactive’ key in the properties file in resourcebundles folder in your theme. And you’re done.

Obviously there are better ways to do this, plugin would be ideal, with the passphrase generated randomly and stored in a column in the database which is more secure, but this is quite secure in itself and you can make it harder to crack by using email or join date along with the username during encryption and encrypting multiple times.

So, there you go, a simple way to add account activation emails in mura

<cffunction name="LoginWithEmailToo" output="false">
  <cfargument name="username" type="string" required="true" default="">
  <cfargument name="password" type="string" required="true" default="">
  <cfargument name="siteid" type="string" required="false" default="">
  <cfset var rolelist = "" />
  <cfset var rsUser = "" />
  <cfset var user = "" />
  <cfset var group = "" />
  <cfset var lastLogin = now() />
  <cfset var pluginEvent = createObject("component","mura.event").init(arguments) />
  <cfset var strikes = createObject("component","mura.user.userstrikes").init(arguments.username,variables.configBean) />

  <cflogout>
  <cfparam name="session.blockLoginUntil" type="string" default="#strikes.blockedUntil()#" />

  <cfif len(arguments.siteID)>
    <cfset variables.pluginManager.announceEvent('onSiteLogin',pluginEvent)/>
  <cfelse>
    <cfset variables.pluginManager.announceEvent('onGlobalLogin',pluginEvent)/>
  </cfif>
  <cfquery datasource="#application.configBean.getDatasource()#" name="rsUser" username="#variables.configBean.getDBUsername()#" password="#variables.configBean.getDBPassword()#">
  SELECT * FROM tusers WHERE
  (username=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.username)#">
  OR email=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.username)#">)
  AND
  (
    password=<cfqueryparam cfsqltype="cf_sql_varchar" value="#hash(trim(arguments.password))#">
    <cfif not variables.configBean.getEncryptPasswords() and len(trim(arguments.password)) neq 32>
    OR
    password=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(arguments.password)#">
    </cfif>
  )
  AND Type = 2
  and inactive=0
  </cfquery>

  <cfif rsUser.RecordCount GREATER THAN 0
    and not strikes.isBlocked()>

      <cfif rsUser.isPublic and (arguments.siteid eq '' or variables.settingsManager.getSite(arguments.siteid).getPublicUserPoolID() neq rsUser.siteid)>

        <cfset strikes.addStrike()>

        <cfreturn false  >
      </cfif>

      <cfset session.blockLoginUntil=""/>

      <cfset loginByQuery(rsUser)/>
      <cfset strikes.clear()>
      <cfif len(arguments.siteID)>
        <cfset variables.pluginManager.announceEvent('onSiteLoginSuccess',pluginEvent)/>
      <cfelse>
        <cfset variables.pluginManager.announceEvent('onGlobalLoginSuccess',pluginEvent)/>
      </cfif>

      <cfreturn true />

  <cfelse>
    <cfif not strikes.isBlocked()>
      <cfset strikes.addStrike()>
    <cfelse>

      <cfif len(arguments.siteID)>
        <cfset variables.pluginManager.announceEvent('onSiteLoginBlocked',pluginEvent)/>
      <cfelse>
        <cfset variables.pluginManager.announceEvent('onGlobalLoginBlocked',pluginEvent)/>
      </cfif>

      <cfset session.blockLoginUntil=strikes.blockedUntil()/>

    </cfif>

  </cfif>

  <cfreturn false />
</cffunction>

<cffunction name="onApplicationLoad" output="false">
    <cfargument name="$">

    <cfset $.getBean("userUtility").injectMethod("Login",LoginWithEmailToo)/>

</cffunction>

Once this is done, you will want to update your label and the required field message. Open up includes/resourceBundles folder in your site directory. Copy the language file you are currently using (Hint: en.properties is for English) into the resourceBundles folder in your theme directory. At the end of the file, add two new values, user.loginusername and user.loginusernamerequired. Copy the displayobjects/dsp_login.cfm file to your themes display_objects folder and change the label and the required message rbfactory values for the Username to the ones we just created. And you’re done :)

user.username=Username or Email
user.usernamerequired=Please enter your 'Username' or 'Email Address'.