signup new user from webapp implemented

8 years ago · 8a6f3bf221
5 changed files with 169 additions and 3 deletions
--- a/web/controllers.js
+++ b/web/controllers.js
@ -1,10 +1,12 @@
 var url="http://localhost:3000/api/";
 angular.module('thoughtsApp', [])
  .controller('ThoughtsController', function(
        $scope,
        $http
    ) {
    var thoughtsList = this;
    if(window.sessionStorage.getItem('thoughtsToken'))
    {
@ -13,6 +15,11 @@ angular.module('thoughtsApp', [])
        $scope.userLogged=false;
    }
    $scope.availableAvatars=[
        "img/icons/animals/cat.png",
        "img/icons/animals/crab.png",
        "img/icons/animals/toucan.png"
    ];
    $http({
        method : "GET",
        url : url + "thoughts"
@ -22,11 +29,36 @@ angular.module('thoughtsApp', [])
        $scope.myWelcome = response.statusText;
    });
    thoughtsList.addTodo = function() {
      todoList.todos.push({text:todoList.todoText, done:false});
      todoList.todoText = '';
    };
    $scope.signin = function(){
        ActivateLoadBar();
        var obj = {
            username: $scope.username,
            password: $scope.password,
            description: $scope.description,
            mail: $scope.mail,
            avatar: $scope.avatar
        };
        $http({
            method : "POST",
            url : url + "users",
            data: obj
        }).then(function mySucces(response) {
                toastr.success("Signed in, now login");
                setTimeout(function(){
                    window.location="login.html";
                }, 1000);
        }, function myError(response) {
            toastr.error(response.statusText);
        });
    };
    $scope.login = function(){
        ActivateLoadBar();
--- a/web/login.html
+++ b/web/login.html
@ -9,7 +9,7 @@
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Thoughts - new thought</title>
      <title>Thoughts - login</title>
      <!-- ANGULAR -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
--- a/web/menu.htm
+++ b/web/menu.htm
@ -24,8 +24,8 @@
            </ul>
            <ul class='right' ng-hide="userLogged">
                <li><a href='login.html'><i class='material-icons'>input</i></a></li>
                <li><a href='signup.html'><i class='material-icons'>person_pin</i></a></li>
                <li><a href='login.html'><i class='material-icons'>vpn_key</i></a></li>
            </ul>
--- a/web/signup.html
+++ b/web/signup.html
@ -0,0 +1,75 @@
  <!DOCTYPE html>
  <html ng-app="thoughtsApp">
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Thoughts - signup</title>
      <!-- ANGULAR -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>
    <body ng-controller="ThoughtsController">
        <div ng-include="'menu.htm'"></div>
        <div class="container">
            <div class="row">
                <div class="input-field col s12">
                  <input ng-model="username" id="username" type="text" class="validate">
                  <label for="username">Username</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                  <input ng-model="password" id="password" type="password" class="validate">
                  <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                  <input ng-model="description" id="description" type="text" class="validate">
                  <label for="description">Description</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                  <input ng-model="mail" id="mail" type="email" class="validate">
                  <label for="mail">Mail</label>
                </div>
                <div class="input-field col s6">
                  <input ng-model="avatar" id="avatar" type="email" class="validate">
                  <label for="avatar">Avatar</label>
                </div>
            </div>
            <a href="index.html" class="waves-effect waves-light btn red lighten-2 ">Cancel</a>
            <a ng-click="signin()" class="waves-effect waves-light btn indigo lighten-2 right">Login</a>
        </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script src="jslib/toastr.js"></script>
      <link type="text/css" rel="stylesheet" href="jslib/toastr.css"/>
      <script src="controllers.js"></script>
    </body>
  </html>
--- a/web/user.html
+++ b/web/user.html
@ -0,0 +1,59 @@
  <!DOCTYPE html>
  <html ng-app="thoughtsApp">
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Thoughts</title>
      <!-- ANGULAR -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>
    <body ng-controller="ThoughtsController as thoughtsList">
        <div ng-include="'menu.htm'"></div>
        <div class="container">
            <div>
                <ul class="collection">
                    <li class="collection-item avatar" ng-repeat="thought in thoughtsList.thoughts | orderBy: '-time'">
                        <img ng-src="img/icons/animals/{{thought.avatar}}.png" class="circle">
                        <a ng-href="user.html?={{thought.username}}" class="title">
                            {{thought.username}}
                        </a>
                        <div class="chip">{{thought.time | date:'HH:mm'}}</div>
                        <p>{{thought.content}}</p>
                        <a href="#!" class="secondary-content"><i class="material-icons indigo-text text-lighten-2">grade</i></a>
                    </li>
                </ul>
            </div>
        </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script src="jslib/toastr.js"></script>
      <link type="text/css" rel="stylesheet" href="jslib/toastr.css"/>
      <script src="controllers.js"></script>
    </body>
  </html>