Skip to content

Commit

Permalink
add pass viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhagarwal1
shubhagarwal1 committed Oct 10, 2024
1 parent 50f865f commit 035a2ad
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 169 deletions.
189 changes: 89 additions & 100 deletions src/app/components/login-page/login-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form</title>
<link
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="login-page.component.css" />
<style>
.go-back-container {
background-color: white; /* White background */
padding: 10px 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute; /* Position absolute to place at bottom left */
bottom: 10px; /* Adjust this value to move vertically */
left: 10px; /* Adjust this value to move horizontally */
cursor: pointer;
}
.go-back-text {
color: black; /* Black text color */
margin-left: 0px; /* No extra margin */
}
.go-back-container:hover {
background-color: #f0f0f0; /* Hover effect */
}

.box {
position: relative; /* Make the box relative so go-back stays inside */
}
</style>
</head>
<body>
<div class="id">
<h1>WELCOME TO THE GRAPH TRAVERSAL!</h1>
</div>
<div class="container">
<div class="box">
<div class="left">
<h2>Login</h2>
<form id="loginForm" (ngSubmit)="login(loginForm)" #loginForm="ngForm">
<div class="input-box">
<i class="bx bx-user"></i>
<input
type="text"
id="username"
placeholder="Username"
required
/>
</div>
<div class="input-box">
<i class="bx bx-lock-alt"></i>
<input
type="password"
id="password"
placeholder="Password"
required
/>
</div>
<button type="submit" [routerLink]="['/mainIndex']" class="btn"> Login
</button>
<div class="social-icons">
<a
href="https://www.linkedin.com/in/mdsakeel103/"
class="social-icon"
title="LinkedIn"
><i class="fab fa-linkedin"></i
></a>
<a
href="https://github.com/sakeel-103"
class="social-icon"
title="GitHub"
><i class="fab fa-github"></i
></a>
<a
href="https://sakeel-103.github.io/My_Portfolio_new/"
class="social-icon"
title="Portfolio"
><i class="fas fa-laptop"></i
></a>
</div>
<p class="signup-text">
Don't have an account? <a routerLink="/signup">Sign Up</a>
</p>
</form>
<!-- Go Back Container in the bottom left -->
<div class="go-back-container" (click)="goBack()">
<span class="go-back-text"><< Go Back</span>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form</title>
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="login-page.component.css" />
<style>
.go-back-container {
background-color: white;
/* White background */
padding: 10px 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute;
/* Position absolute to place at bottom left */
bottom: 10px;
/* Adjust this value to move vertically */
left: 10px;
/* Adjust this value to move horizontally */
cursor: pointer;
}

.go-back-text {
color: black;
/* Black text color */
margin-left: 0px;
/* No extra margin */
}

.go-back-container:hover {
background-color: #f0f0f0;
/* Hover effect */
}

.box {
position: relative;
/* Make the box relative so go-back stays inside */
}
</style>
</head>

<body>
<div class="id">
<h1>WELCOME TO THE GRAPH TRAVERSAL!</h1>
</div>
<div class="container">
<div class="box">
<div class="left">
<h2>Login</h2>
<form id="loginForm" (ngSubmit)="login(loginForm)" #loginForm="ngForm">
<div class="input-box">
<i class="bx bx-user"></i>
<input type="text" id="username" placeholder="Username" required />
</div>
</div>
<div class="right">
<h1>WELCOME BACK!</h1>
<p>Login/Signup Form To perform or Visualize the Graph Traversal</p>
<div class="input-box" style="position: relative;">
<i class="bx bx-lock-alt"></i>
<input type="password" id="password" placeholder="Password" required
[type]="passwordVisible ? 'text' : 'password'" />
<i class="bx" [ngClass]="passwordVisible ? 'bx bx-show' : 'bx bx-hide'" (click)="togglePasswordVisibility()"
style="cursor: pointer; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"></i>
</div>

<button type="submit" [routerLink]="['/mainIndex']" class="btn"> Login
</button>
<div class="social-icons">
<a href="https://www.linkedin.com/in/mdsakeel103/" class="social-icon" title="LinkedIn"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sakeel-103" class="social-icon" title="GitHub"><i class="fab fa-github"></i></a>
<a href="https://sakeel-103.github.io/My_Portfolio_new/" class="social-icon" title="Portfolio"><i
class="fas fa-laptop"></i></a>
</div>
<p class="signup-text">
Don't have an account? <a routerLink="/signup">Sign Up</a>
</p>
</form>
<!-- Go Back Container in the bottom left -->
<div class="go-back-container" (click)="goBack()">
<span class="go-back-text">
<< Go Back</span>
</div>
</div>
<div class="right">
<h1>WELCOME BACK!</h1>
<p>Login/Signup Form To perform or Visualize the Graph Traversal</p>
</div>
</div>
</body>
</html>
</div>
</body>

</html>
17 changes: 12 additions & 5 deletions src/app/components/login-page/login-page.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgForm, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; // Import CommonModule
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

@Component({
selector: 'app-login-page',
standalone: true,
imports: [RouterModule, FormsModule],
imports: [RouterModule, FormsModule, CommonModule], // Add CommonModule here
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.css'],
})
export class LoginPageComponent {
passwordVisible: boolean = false;

constructor(
private router: Router,
private toastr:ToastrService,
private toastr: ToastrService
) {}

login(form: NgForm): void {
const { username, password } = form.value;
const isSuccess = this.authenticate(username, password);
console.log("username", username,"pass", password)
console.log("username", username, "pass", password);
if (isSuccess) {
this.toastr.success("Login Successfully",'Success')
this.toastr.success("Login Successfully", 'Success');
// this.router.navigate(['/main-index']);
} else {
console.error('Login failed');
this.toastr.error("Invalid username or password",'Error')
this.toastr.error("Invalid username or password", 'Error');
}
}

Expand All @@ -37,4 +40,8 @@ export class LoginPageComponent {
goBack() {
this.router.navigate(['/signup']); // Navigate back to the signup page
}

togglePasswordVisibility() {
this.passwordVisible = !this.passwordVisible; // Toggle the password visibility
}
}
107 changes: 50 additions & 57 deletions src/app/components/signup-page/signup-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="div-first">
<h2>WELCOME TO THE GRAPH TRAVERSAL!</h2>
</div>
<div class="container">
<div class="box">
<div class="left">
<h1>WELCOME BACK!</h1>
<p>Login/Signup Form To perform or Visualize the Graph Traversal</p>
</div>
<div class="right">
<h2>Sign Up</h2>
<!-- Cross Button -->
<button type="button" class="cross-button" (click)="goHome()">&times;</button>
<form [formGroup]="signupForm" id="signupForm" (ngSubmit)="SignUp()">
<div class="input-box">
<i class="bx bxs-user"></i>
<input
type="text"
id="username"
placeholder="Username"
formControlName="username"
/>
</div>
<div class="input-box">
<i class="bx bxs-envelope"></i>
<input
type="email"
id="email"
placeholder="Email"
formControlName="email"
/>
</div>
<div class="input-box">
<i class="bx bxs-lock-alt"></i>
<input
type="password"
id="password"
placeholder="Password"
formControlName="password"
/>
</div>
<button type="submit" class="btn">
Sign Up
</button>
<p class="signup-text">
Have not an account yet? <a routerLink="/login">login</a>
</p>
</form>
</div>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<title>Document</title>
</head>

<body>
<div class="div-first">
<h2>WELCOME TO THE GRAPH TRAVERSAL!</h2>
</div>
<div class="container">
<div class="box">
<div class="left">
<h1>WELCOME BACK!</h1>
<p>Login/Signup Form To perform or Visualize the Graph Traversal</p>
</div>
<div class="right">
<h2>Sign Up</h2>
<!-- Cross Button -->
<button type="button" class="cross-button" (click)="goHome()">&times;</button>
<form [formGroup]="signupForm" id="signupForm" (ngSubmit)="SignUp()">
<div class="input-box">
<i class="bx bxs-user"></i>
<input type="text" id="username" placeholder="Username" formControlName="username" />
</div>
<div class="input-box">
<i class="bx bxs-envelope"></i>
<input type="email" id="email" placeholder="Email" formControlName="email" />
</div>
<div class="input-box" style="position: relative;">
<i class="bx bx-lock-alt"></i>
<input type="password" id="password" placeholder="Password" formControlName="password"
[type]="passwordVisible ? 'text' : 'password'" />
<i class="bx" [ngClass]="passwordVisible ? 'bx bx-show' : 'bx bx-hide'" (click)="togglePasswordVisibility()"
style="cursor: pointer; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"></i>
</div>

<button type="submit" class="btn">
Sign Up
</button>
<p class="signup-text">
Have not an account yet? <a routerLink="/login">login</a>
</p>
</form>
</div>
</div>
</body>
</html>
</div>
</body>

</html>
Loading

0 comments on commit 035a2ad

Please sign in to comment.