Skip to content

Commit

Permalink
Login, signout and starting self registration
Browse files Browse the repository at this point in the history
  • Loading branch information
Greg Davis committed May 4, 2012
1 parent c9c0e1e commit 9e631b3
Show file tree
Hide file tree
Showing 13 changed files with 413 additions and 33 deletions.
53 changes: 53 additions & 0 deletions css/appStyles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@import url("reusableStyles.css");
@import url("../js/dojo-release-1.7.2-src/larson/login/resources/loginForm.css");
@import url("../js/dojo-release-1.7.2-src/larson/login/resources/register.css");

/* main application styles */

body {
font-family: Tahoma, Verdana, sans-serif;
font-size: .8em;
line-height: 1.3em;
margin: 30px;
padding: 0;
}

a {
color: #000;
}
a:hover {
color: #666;
}

.sideBar {
width: 200px;
}

.inlineError {
font-size: .85em;
color: red;
line-height: 1.5em;
}

.plainTextButton .dijitButtonNode {
border: 0;
padding: 0;
}

.plainTextButtonHover .dijitButtonNode .dijitButtonText {
color: #666;
text-decoration: underline;
}

.larson .dijitButton.cancelButton .dijitButtonNode {
background: none;
border: 0;
box-shadow: none;
-moz-box-shadow: none;
}
.larson .dijitButton.cancelButton .dijitButtonNode .dijitButtonText {
text-decoration: underline;
}
.larson .dijitButtonHover.cancelButton .dijitButtonNode .dijitButtonText {
text-decoration: none;
}
62 changes: 62 additions & 0 deletions css/reusableStyles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/* styles for text */
.times { font-family: Times New Roman, Times, serif; letter-spacing: -1px; }
.helvetica { font-family: Helvetica, Arial, sans-serif; }
.bold { font-weight: bold; }
.bigText { font-size: 1.3em; }
.grayText { color: #666; }
.whiteText { color: #fff; }
.whiteText a { color: #fff; }
.whiteText a:hover { color: #efefef; }

/*basic layout styles */
.clearFix { clear: both; }
.floatRight { float: right; }
.floatLeft { float: left; }
.spaceAfter { padding-bottom: 15px; }
.spacer { height: 20px; }
.smallSpacer { height: 10px; }
.smallerSpacer { height: 5px; }
.spaceRight { margin-right: 10px; }

/*padding and margins*/
.padding5 { padding: 5px; }
.padding10 { padding: 10px; }
.padding15 { padding: 15px; }
.padding20 { padding: 20px; }
.margin10 { margin: 10px; }
.margin30 { margin: 30px; }
.marginRight { margin-right: 10px; }
.marginTop { margin-top: 10px; }
.overflowAuto { overflow: auto; }

/*simple backgrounds*/
.grayBackground { background-color: #e5e5e5; }
.darkGrayBackground { background-color: #666; }

/*rounded corners and shadows*/
.borderRadius { border-radius: 5px; -moz-border-radius: 5px; }
.boxShadow { box-shadow: 2px 2px 3px #999; -moz-box-shadow: 2px 2px 3px #999; -webkit-box-shadow: 2px 2px 3px #999; }

/*borders of every kind*/
.border { border: 1px solid #000; }
.borderRight { border-right: 1px solid #000; }
.borderTop { border-top: 1px solid #000; }
.borderLeft { border-left: 1px solid #000; }
.borderBottom { border-bottom: 1px solid #000; }
.grayBorder { border-color: #666; }
.whiteBorder { border-color: #fff; }
.lightGrayBorder { border-color :#999 }

/*alignment anyone?*/
.alignMiddle { vertical-align: middle; }
.alignCenter { text-align: center; }

/*a class for making an auto width image*/
.autoImage { width: 100%; height: auto; }

/*some basic classes for styling*/
.quarterWidth { width: 25%; }

.hidden {
display: none;
}
54 changes: 50 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login Page</title>
<title>Larson || Your portal for local food and artisan crafts</title>

<script data-dojo-config="parseOnLoad:true, async:true" src="js/dojo-release-1.7.2-src/dojo/dojo.js"></script>
<script data-dojo-config="async:true" src="js/dojo-release-1.7.2-src/dojo/dojo.js"></script>
<link rel="stylesheet" rel="stylesheet" href="js/dojo-release-1.7.2-src/dijit/themes/larson/larson.css"/>
<link rel="stylesheet" rel="stylesheet" href="css/appStyles.css"/>

<script type="text/javascript">
var dojoConfig = {
Expand All @@ -19,7 +20,20 @@
]
}

require(["larson/login/mainLogin"], function(){})
require(["dojo/ready","dojo/cookie","larson/main","larson/login/mainLogin","larson/login/signout",
"dijit/form/TextBox", "dijit/form/Button", "larson/login/register"], function(ready, cookie, main){
ready(function(){
if(cookie("loginCookie")) {
var loginCookie = dojo.fromJson(cookie("loginCookie"))

dojo.addClass(dojo.byId("signinNode"), "hidden")
dojo.removeClass(dojo.byId("signedinNode"), "hidden")
dojo.byId("signedinNode").innerHTML = "Hi " + loginCookie.firstname + ", welcome back!"
dojo.removeClass(dojo.byId("signoutNode"), "hidden")
dojo.addClass(dojo.byId("registerNode"), "hidden")
}
})
})

</script>

Expand All @@ -28,7 +42,39 @@

<body class="larson">
<div class="pageWrapper">
<div data-dojo-type="larson.login.mainLogin"></div>
<div class="toolBar grayBackground border lightGrayBorder">
<div class="floatLeft padding20 borderRight lightGrayBorder darkGrayBackground whiteText bigText bold">
Larson
</div>
<div class="floatLeft padding10">
<input data-dojo-type="dijit.form.TextBox" />
<button data-dojo-type="dijit.form.Button">Search</button>
</div>
<div class="floatRight">
<!-- bring in registration widget -->
<div data-dojo-type="larson.login.register" class="floatLeft padding20 borderLeft lightGrayBorder" id="registerNode"></div>
<div class="floatLeft padding20 borderLeft lightGrayBorder">
Cart
</div>
<div class="floatLeft padding20 borderLeft lightGrayBorder hidden" id="signedinNode"></div>
<!-- bring in sign in widget -->
<div data-dojo-type="larson.login.mainLogin" class="floatLeft padding20 borderLeft lightGrayBorder" id="signinNode"></div>
<!-- bring in sign out widget -->
<div data-dojo-type="larson.login.signout" class="floatLeft padding20 borderLeft lightGrayBorder hidden" id="signoutNode"></div>
<div class="floatLeft padding20 borderLeft lightGrayBorder">
Help
</div>
</div>
<div class="clearFix"></div>
</div><!-- .toolBar -->
<div class="mainContentArea marginTop">
<div class="sideBar border padding10 lightGrayBorder borderRadius marginRight grayBackground floatLeft">
Sidebar Items go here
</div>
<div>
Main item listings will go here
</div>
</div>
</div><!-- .pageWrapper -->
</body>
</html>
69 changes: 51 additions & 18 deletions js/dojo-release-1.7.2-src/larson/login/mainLogin.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,40 @@ define([
"dijit/_Widget",
"dijit/_Templated",
"dojo/_base/declare",
"dojo/cookie",
"dojo/ready",
"dojo/parser",
"dojo/_base/connect",
"dijit/form/Button",
"dijit/form/ValidationTextBox",
"dijit/form/DropDownButton",
"dijit/TooltipDialog",
"dijit/form/TextBox",
"dojo/text!./resources/mainLogin.html"
], function(_Widget, _Templated, declare, connect, Button, TextBox, template) {
], function(_Widget, _Templated, declare, cookie, ready, parser, connect, Button, DropButton, TooltipDialog, TextBox, template) {

return declare("larson.login.mainLogin", [_Widget, _Templated], {
declare("larson.login.mainLogin", [_Widget, _Templated], {
templateString: template,
widgetsInTemplate: true,
baseClass: "mainLogin",
postCreate: function() {
this.inherited(arguments)

var usernameField = dijit.byId("username"),
loginButton = dijit.byId("loginButton")

loginButton = dijit.byId("loginButton"),
passwordField = dijit.byId("password")

connect.connect(usernameField, "onChange", this.getData)
connect.connect(loginButton, "onClick", this.validatePassword)

},
password: "",
username: "",
getData: function() {
this.inherited(arguments)
var username = dijit.byId("username").get("value")
this.username = dijit.byId("username").get("value")

var xhrArgs = {
url: "http://localhost/users/"+username,
url: "http://localhost/users/"+this.username,
handleAs: "json",
load: function(data) {
dojo.byId("usernameError").innerHTML = ""
Expand All @@ -39,20 +48,44 @@ define([
}
}

var deferred = dojo.xhrGet(xhrArgs);
var deferred = dojo.xhrGet(xhrArgs)
},
validatePassword: function() {
this.inherited(arguments)
var passwordEntered = dijit.byId("password").get("value")
alert(passwordEntered + " " + this.password)
this.username = dijit.byId("username").get("value")

if(passwordEntered == this.password) {
window.location="/page2.html"
dojo.byId("passwordError").innerHTML = ""
}
else {
dojo.byId("passwordError").innerHTML = "You entered the wrong password"
}
var xhrArgs = {
url: "http://localhost/users/"+this.username,
handleAs: "json",
load: function(data) {
this.username = dijit.byId("username").get("value")
this.password = dijit.byId("password").get("value")

if(this.password == data.password) {
dojo.addClass(dojo.byId("signinNode"), "hidden")
dojo.removeClass(dojo.byId("signedinNode"), "hidden")
dojo.byId("signedinNode").innerHTML = "Hi " + data.firstname + ", welcome back!"
dojo.byId("passwordError").innerHTML = ""
dijit.popup.close(dijit.byId("signinTooltip"))
dojo.removeClass(dojo.byId("signoutNode"), "hidden")
dojo.addClass(dojo.byId("registerNode"), "hidden")
cookie("loginCookie", dojo.toJson(data), { expires: 1 })
}
else {
dojo.byId("passwordError").innerHTML = "You entered the wrong password"
}
},
error: function(error) {
dojo.byId("passwordError").innerHTML = "Something went wrong"
}
}

var deferred = dojo.xhrGet(xhrArgs)
}
})
})

ready(function(){
// Call the parser manually so it runs after our widget is defined, and page has finished loading
parser.parse();
})
})
89 changes: 89 additions & 0 deletions js/dojo-release-1.7.2-src/larson/login/register.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
//signout file

define([
"dijit/_Widget",
"dijit/_Templated",
"dojo/_base/declare",
"dojo/cookie",
"dojo/ready",
"dojo/parser",
"dojo/_base/connect",
"dijit/form/Button",
"dijit/form/ValidationTextBox",
"dijit/Dialog",
"dijit/form/Form",
"dojo/text!./resources/register.html",
"dojo/text!./resources/registerDialog.html"
], function(_Widget, _Templated, declare, cookie, ready, parser, connect,
Button, TextBox, Dialog, form, template, dialogTemplate) {

declare("larson.login.register", [_Widget, _Templated], {
templateString: template,
widgetsInTemplate: true,
dialog: "",
username: "",
postCreate: function() {
this.inherited(arguments)

var registerButton = dijit.byId("register")

connect.connect(registerButton, "onClick", this.showRegistrationDialog)

},
showRegistrationDialog: function() {
this.inherited(arguments)

this.dialog = new Dialog({
title: "Register for Larson",
content: dialogTemplate,
style: "width: 400px",
id: "registerDialog",
draggable: false,
onClose: dojo.hitch(this, setTimeout(function(){
if (!dijit.byId("registerDialog").open){
dijit.byId("registerDialog").destroyRecursive()
}
}, 10))
})

this.dialog.show()

var myForm = dijit.byId("registerForm")

myForm.watch('value', function() {
if(myForm.isValid()) {
dijit.byId("registerButton").setAttribute('disabled', false)
}
else {
dijit.byId("registerButton").setAttribute('disabled', true)
}
})
var emailAddress = dijit.byId("emailAddress")
connect.connect(emailAddress, "onChange", this.checkEmailAddress)
},
checkEmailAddress: function() {
this.inherited(arguments)
alert("checking email")
this.username = dijit.byId("emailAddress").get("value")

var xhrArgs = {
url: "http://localhost/users/"+this.username,
handleAs: "json",
load: function(data) {
dojo.byId("emailError").innerHTML = "This email is already taken"
dijit.byId("emailAddress").setAttribute("value", "")
},
error: function(error) {
dojo.byId("emailError").innerHTML = ""
}
}

var deferred = dojo.xhrGet(xhrArgs)
}
})

ready(function(){
// Call the parser manually so it runs after our widget is defined, and page has finished loading
parser.parse();
})
})
Loading

0 comments on commit 9e631b3

Please sign in to comment.