sign up

public/app/controllers/login.controller.js

@@ -11,6 +11,7 @@ angular.module('app')
             
             $scope.login = function()
             {
+                $scope.error = null;
                 if ($scope.user.Username == "" || $scope.user.Password == "") {
                     return;
                 }

public/app/controllers/signup.controller.js

@@ -1,4 +1,42 @@
 angular.module('app')
-    .controller('SignUpController', ['$scope', '$state', '$mdDialog',
-        function($scope, $state, $mdDialog) {
+    .controller('SignUpController', ['$scope', '$state', '$mdDialog', 'luticateAuthUsers',
+        function($scope, $state, $mdDialog, luticateAuthUsers) {
+            $scope.user = {
+                Username: "",
+                Passwords: {
+                    Password1: "",
+                    Password2: ""
+                },
+                Firstname: "",
+                Lastname: "",
+                Email: ""
+            };
+
+            $scope.error = null;
+
+            $scope.signUp = function () {
+                $scope.error = null;
+                if ($scope.user.Passwords.Password1 != $scope.user.Passwords.Password2) {
+                    $scope.error = {
+                        Data: "Passwords do not match"
+                    };
+                    return;
+                }
+                if ($scope.user.Username == "" || $scope.user.Firstname == ""
+                    || $scope.user.Lastname == "" || $scope.user.Email == "") {
+                    return;
+                }
+                luticateAuthUsers.add({
+                    username: $scope.user.Username,
+                    password: $scope.user.Passwords.Password1,
+                    firstname: $scope.user.Firstname,
+                    lastname: $scope.user.Lastname,
+                    email: $scope.user.Email
+                }).then(function(data)
+                {
+                    $state.go("login");
+                }, function (error) {
+                    $scope.error = error;
+                })
+            };
     }]);

public/app/less/app.less

@@ -35,4 +35,8 @@
 .error-message {
   color: red;
   font-weight: bold;
+}
+
+.strike {
+  text-decoration: line-through;
 }

public/app/views/home.html

@@ -1,5 +1,5 @@
 <div layout="column" layout-fill layout-align="top center">
     <p>
-        Welcome home
+        Welcome to <span class="strike">500px</span> 420px!
     </p>
 </div>

public/app/views/signup.html

@@ -1,5 +1,50 @@
 <div layout="column" layout-fill layout-align="top center">
-    <p>
-        Welcome home
-    </p>
+    <h1>Sign Up</h1>
+    <div class="col-xs-4">
+        <form ng-submit="signUp()">
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="username">Username</label>
+                    <input name="username" id="username" type="text" ng-model="user.Username" required>
+                </md-input-container>
+            </div>
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="firstname">First name</label>
+                    <input name="firstname" id="firstname" type="text" ng-model="user.Firstname" required>
+                </md-input-container>
+            </div>
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="lastname">Last name</label>
+                    <input name="lastname" id="lastname" type="text" ng-model="user.Lastname" required>
+                </md-input-container>
+            </div>
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="email">Email</label>
+                    <input name="email" id="email" type="text" ng-model="user.Email" required>
+                </md-input-container>
+            </div>
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="password1">Password</label>
+                    <input name="password1" id="password1" type="password" ng-model="user.Passwords.Password1" required>
+                </md-input-container>
+            </div>
+            <div>
+                <md-input-container class="col-xs-12">
+                    <label for="password2">Password confirmation</label>
+                    <input name="password2" id="password2" type="password" ng-model="user.Passwords.Password2" required>
+                </md-input-container>
+            </div>
+            <div class="col-xs-10 col-xs-offset-1">
+                <md-button class="col-xs-12" type="submit">Sign Up!</md-button>
+            </div>
+        </form>
+        <div class="clearfix"></div>
+        <div ng-hide="error == null" class="error-message text-center">
+            {{ error.Data }}
+        </div>
+    </div>
 </div>

public/app/views/toolbar.html

@@ -5,7 +5,10 @@
         </md-button>
         <h2>Toolbar</h2>
         <span flex></span>
-        <span ng-hide="isLogged()"><a ui-sref="login">Login</a></span>
+        <div ng-hide="isLogged()">
+            <span><a ui-sref="signUp">Sign up</a></span> or
+            <span><a ui-sref="login">Login</a></span>
+        </div>
         <span ng-show="isLogged()"><a ui-sref="login">{{ getCurrentUser().Firstname }} {{ getCurrentUser().Lastname }}</a></span>
     </div>
 </md-toolbar>