JSFiddle - React, Tailwind, and code Playground
by Yonathan Benitah
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js"></script>
<div ng-app="myAdmin" class="container">
<div class="profile">
<button class="profile__avatar" id="btn_avatar">
<img src="/images/avatar.png" alt="Avatar" />
</button>
<div class="profile__form">
<div class="profile__fields">
<h3 class="text-center">Welcome Admin Lelang</h3>
<form name="login-form" role="form" ng-controller="loginCtrl">
<div class="fields">
<input type="text" class="input" required-pattern=.*\S.* id="username" placeholder="Username" ng-model="userEmail"/>
<label class="label" for="fieldUsername">Username</label>
</div>
<div class="fields">
<input type="password" class="input" required-pattern=.*\S.* id="password" placeholder="password" ng-model="userPassword"/>
<label class="label" for="fieldPassword">Password</label>
</div>
<div class="alert alert-warning" id="warning">
<em class="fa fa-lg fa-warning"> </em>Peringatan, username atau password salah
</div>
<div class="profile__footer">
<center>
<button class="btn" id="btn-submit" ng-click="login()">LOG IN</button>
</center>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
document.getElementById('btn_avatar').addEventListener('click',
function () {
[].map.call(document.querySelectorAll('.profile'),
function(el) {
el.classList.toggle('profile--open');
});
}
);
</script>
JavaScript
(function () {
'use strict';
//"the initialize angular module"
debugger;
angular.module("myAdmin", []).controller('loginCtrl', function($scope, $http){
$scope.login = function() {
$http.post('/admin/',{useremail:$scope.userEmail, userpassword:$scope.userPassword}).
then(function(response) {
console.log("posted successfully");
window.location.href="/admin/home";
}).catch(function(response) {
console.error("error in posting");
})
}
}
)
}) // <- theses bracket and parenthesis are missing
();