Untitled

<!DOCTYPE html>
<html ng-app="labos5" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>


        let ForumApp = angular.module('labos5', ['ui.router']);

        ForumApp.config(function($stateProvider, $urlRouterProvider) {

            $stateProvider.state('main',{
                url:'/',
                component:'main'
            }).state('login',{
                url:'/login',
                component:'login'
            }).state('register',{
                url:'/register',
                component:'register'
            })
              .state('profile',{
                url:'/:id',
                component:'profile'
              });

            $urlRouterProvider.otherwise('/');

        });

        ForumApp.component('main', {
            template:
                `   <span>Welcome, {{c.user.username}} ({{c.user.email}}).</span>
                    <br/>
                    <div class="well" style="width:400px;" ng-repeat="dat in c.details">
                         By {{c.user.username}} at {{dat.timestamp}}<hr>

                        <span>{{dat.comment}}</span>
                    </div>

                     <button class="btn btn-primary" ng-click="hideShow=(hideShow ? false:true)">New Comment</button>
                     <div ng-if="hideShow">
                        New Comment:
                        <textarea ng-model="c.new.komentar"></textarea><br>
                        <button ng-class="c.new.komentar.length > 0 ? 'btn btn-success' : 'btn btn-danger'" ng-disabled="!c.new.komentar" ng-click="c.add()">Send</button>
                     </div>
                     <a ui-sref="register">Register</a>
            `,
            controller:function($http, $scope){

                getInfo();
                function getInfo() {
// Sending request to EmpDetails.php files
                    $http.post('server/data.php').then(function (data) {
// Stored the returned data into scope
                        $scope.details = data;
                    });
                }

                /*this.posts=ForumService.getPosts();

                $scope.$on('init', (event, post)=>{

                    this.posts=ForumService.getPosts();

                });

                $scope.$on('modeChange', ()=>{

                    this.mode=''

                });


                this.changeSelected=function(post){

                    this.selectedPost=$window.angular.copy(post);


                };

                this.mode='';
                this.selectedPost=null;

                this.doDelete=function(index){

                    ForumService.deletePost(this.posts[index].name, index);

                };*/

            },

            controller:function($http, $state, AuthenticationService){


                if (!AuthenticationService.isAuthenticated()) $state.go('login'); else {

                    this.user=AuthenticationService.getUser();

                }

            },
            controllerAs:'c'
        });


        ForumApp.component('login', {
          template:
              `
                <div id="login-form">

                <h3>Login</h3>

                <fieldset class="form-group">

                    <label>Username</label>
                    <input class="form-control" type="text" ng-model="c.credentials.username" style="width:200px;" placeholder="Username"/>

                </fieldset>
                <fieldset class="form-group">
                    <label>Password:</label>
                    <input class="form-control" type="password" ng-model="c.credentials.password" style="width:200px;" placeholder="Password"/>

                </fieldset>

                <button class="btn btn-success" ng-click="c.login()">Login!</button>

            </div>
               `,
            controller:function(AuthenticationService){

                this.login=function(){

                    AuthenticationService.login(this.credentials);

                }
            },
            controllerAs:'c'
        });

        ForumApp.component('register', {
            template:
                `
                <div class="col-md-6 col-md-offset-3">
                    <h2>Register</h2>
                    <form name="form" id="form" ng-submit="register();" role="form">
                        <div class="form-group" ng-class="{ 'has-error': form.user.$dirty && form.user.$error.required }">
                            <label for="username">Username</label>
                            <input type="text" name="user" id="user" class="form-control" ng-model="userInfo.user" required />
                            <span ng-show="form.user.$dirty && form.user.$error.required" class="help-block">Username is required</span>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.pass1.$dirty && form.pass1.$error.required }">
                            <label for="password1">Password</label>
                            <input type="password" name="pass1" id="pass1" class="form-control" ng-model="userInfo.pass1" required />
                            <span ng-show="form.pass1.$dirty && form.pass1.$error.required" class="help-block">Password is required</span>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.pass2.$dirty && form.pass2.$error.required }">
                            <label for="password2">Repeat password</label>
                            <input type="password" name="pass2" id="pass2" class="form-control" ng-model="userInfo.pass2" required />
                            <span ng-show="form.pass2.$dirty && form.pass2.$error.required" class="help-block">Passwords don't match</span>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$error.required }">
                            <label for="password">Name</label>
                            <input type="text" name="name" id="name" class="form-control" ng-model="userInfo.name" required />
                            <span ng-show="form.name.$dirty && form.name.$error.required" class="help-block">Name is required</span>
                        </div>
                         <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$error.required }">
                            <label for="email">Email</label>
                            <input type="text" name="email" id="email" class="form-control" ng-model="userInfo.email" required />
                            <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span>
                        </div>
                        <div class="form-actions">
                            <button type="submit" ng-disabled="form.$invalid || userInfo.dataLoading" class="btn btn-primary">Register</button>
                            <img ng-if="userInfo.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
                            <a href="#!/login" class="btn btn-link">Cancel</a>
                        </div>
                    </form>
                </div>
               `,

            controller:function(AuthenticationService){

                this.login=function(){

                    AuthenticationService.login(this.credentials);

                }
            },

            controller:function($http, $scope) {

                $scope.userInfo={};
                $scope.register = function () {
                    $http.post('server/register.php', {
                        "name": $scope.userInfo.name,
                        "email": $scope.userInfo.email,
                        "username": $scope.userInfo.user,
                        "password": $scope.userInfo.pass1
                    }).then(function (response) {
                        $scope.msg = "Room is inserted into database.";
                    });

                }

                function getInfo() {
                    $http.post('server/data.php').then(function (data) {
                        $scope.details = data;
                    });
                }
            },

            controllerAs:'c'
        });


    </script>

    <script src="infrastructure/data.service.js"></script>
    <script src="infrastructure/auth.service.js"></script>
    <script src="infrastructure/forum.service.js"></script>

</head>
</head>
<body>
<main ui-view></main>
</body>
</html>