Scribd
Upload
7 views

wtexp9

The document outlines an assignment to design a registration and login application using AngularJS. It includes HTML code for the user interface and JavaScript code for the application logic, allowing users to register, log in, and log out. The application features a toggle between registration and login forms, user data storage, and basic validation for user inputs.

Uploaded by

bargeanjali650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

wtexp9

The document outlines an assignment to design a registration and login application using AngularJS. It includes HTML code for the user interface and JavaScript code for the application logic, allowing users to register, log in, and log out. The application features a toggle between registration and login forms, user data storage, and basic validation for user inputs.

Uploaded by

bargeanjali650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Assignment No: 9

Aim: Design an application using Angular JS. e.g. Design registration (first name, last name,
username, password) and login page using Angular JS.
Code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Registration & Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- jQuery -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- AngularJS -->


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Custom CSS -->


<link rel="stylesheet" href="style.css">

<!-- Angular App -->


<script src="app.js"></script>
</head>
<body>

<div ng-app="myApp" class="container">


<h3>Registration & Login</h3>

<div ng-controller="ContactController">
<ul class="nav nav-tabs">
<li ng-class="{active: isRegisterView}">
<a href="#" ng-click="isRegisterView = true">Register</a>
</li>
<li ng-class="{active: !isRegisterView}">
<a href="#" ng-click="isRegisterView = false">Login</a>
</li>
</ul>

<!-- Registration Form -->


<form class="well" ng-show="isRegisterView">
<div class="form-group">
<label>First Name:</label>
<input type="text" class="form-control" ng-model="newUser.firstName">
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" class="form-control" ng-model="newUser.lastName">
</div>
<div class="form-group">
<label>Username:</label>
<input type="text" class="form-control" ng-model="newUser.username">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="newUser.password">
</div>
<button class="btn btn-primary" ng-click="register()">Register</button>
</form>

<!-- Login Form -->


<form class="well" ng-show="!isRegisterView">
<div class="form-group">
<label>Username:</label>
<input type="text" class="form-control" ng-model="loginData.username">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="loginData.password">
</div>
<button class="btn btn-success" ng-click="login()">Login</button>
</form>

<!-- Welcome Message -->


<div ng-if="loggedInUser">
<h4>Welcome, {{loggedInUser.firstName}}!</h4>
<button class="btn btn-danger" ng-click="logout()">Logout</button>
</div>
</div>
</div>

</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
app.js:
var myApp = angular.module("myApp", []);

myApp.controller("ContactController", function ($scope) {


$scope.isRegisterView = true;
$scope.users = [];
$scope.newUser = {};
$scope.loginData = {};
$scope.loggedInUser = null;

$scope.register = function () {
if (
$scope.newUser.username &&
$scope.newUser.password &&
$scope.newUser.firstName &&
$scope.newUser.lastName
){
// Check if username already exists
var existing = $scope.users.find(user => user.username === $scope.newUser.username);
if (existing) {
alert("Username already exists!");
return;
}
$scope.users.push(angular.copy($scope.newUser));
alert("Registered Successfully!");
$scope.newUser = {};
$scope.isRegisterView = false;
} else {
alert("Please fill all fields.");
}
};

$scope.login = function () {
var user = $scope.users.find(
user =>
user.username === $scope.loginData.username &&
user.password === $scope.loginData.password
);

if (user) {
$scope.loggedInUser = user;
alert("Login Successful!");
} else {
alert("Invalid username or password.");
}
};

$scope.logout = function () {
$scope.loggedInUser = null;
$scope.loginData = {};
};
});
-------------------------------------------------------------------------------------------------------------------------
Output:

Fig.1 Registration Page


Fig.2 Registration done Successfully

Fig.3 Login Page

Fig.4 Login done and Welcome Message

You might also like