Skip to content

Commit b989113

Browse files
JavaChinnaJavaChinna
committed
Upgraded to Bootstrap 5
1 parent dadbdab commit b989113

File tree

4 files changed

+40
-38
lines changed

4 files changed

+40
-38
lines changed

‎angular-12-social-login/src/app/app.component.html

+24-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
<div id="app">
2-
<nav class="navbar navbar-expand navbar-dark bg-dark">
2+
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
33
<a class="navbar-brand p-0" href="/">
4-
<img src="/assets/img/logo.png" width="200" height="50" alt="JavaChinna">
4+
<img src="/assets/img/logo.png" width="200" height="50" alt="Sirius Consult AG">
55
</a>
6-
<ul class="navbar-nav mr-auto" routerLinkActive="active">
7-
<li class="nav-item"><a href="/home" class="nav-link" routerLink="home">Home </a></li>
8-
<li class="nav-item" *ngIf="showAdminBoard"><a href="/admin" class="nav-link" routerLink="admin">Admin Board</a></li>
9-
<li class="nav-item" *ngIf="showModeratorBoard"><a href="/mod" class="nav-link" routerLink="mod">Moderator Board</a></li>
10-
<li class="nav-item"><a href="/user" class="nav-link" *ngIf="isLoggedIn" routerLink="user">User</a></li>
11-
<li class="nav-item"><a href="/order" class="nav-link" *ngIf="isLoggedIn" routerLink="order">Order</a></li>
12-
</ul>
13-
<ul class="navbar-nav ml-auto" *ngIf="!isLoggedIn">
14-
<li class="nav-item"><a href="/register" class="nav-link" routerLink="register">Sign Up</a></li>
15-
<li class="nav-item"><a href="/login" class="nav-link" routerLink="login">Login</a></li>
16-
</ul>
17-
<ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">
18-
<li class="nav-item"><a href="/profile" class="nav-link" routerLink="profile">{{ username }}</a></li>
19-
<li class="nav-item"><a href class="nav-link" (click)="logout()">LogOut</a></li>
20-
</ul>
6+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
7+
aria-label="Toggle navigation">
8+
<span class="navbar-toggler-icon"></span>
9+
</button>
10+
<div class="collapse navbar-collapse" id="navbarCollapse">
11+
<ul class="navbar-nav me-auto mb-2 mb-md-0" routerLinkActive="active">
12+
<li class="nav-item"><a href="/home" class="nav-link" routerLink="home">Home</a></li>
13+
<li class="nav-item" *ngIf="showAdminBoard"><a href="/admin" class="nav-link" routerLink="admin">Admin Board</a></li>
14+
<li class="nav-item" *ngIf="showModeratorBoard"><a href="/mod" class="nav-link" routerLink="mod">Moderator Board</a></li>
15+
<li class="nav-item"><a href="/user" class="nav-link" *ngIf="isLoggedIn" routerLink="user">User</a></li>
16+
<li class="nav-item"><a href="/order" class="nav-link" *ngIf="isLoggedIn" routerLink="order">Order</a></li>
17+
</ul>
18+
<ul class="navbar-nav ms-auto mb-2 mb-md-0" *ngIf="!isLoggedIn">
19+
<li class="nav-item"><a href="/register" class="nav-link" routerLink="register">Sign Up</a></li>
20+
<li class="nav-item"><a href="/login" class="nav-link" routerLink="login">Login</a></li>
21+
</ul>
22+
<ul class="navbar-nav ms-auto mb-2 mb-md-0" *ngIf="isLoggedIn">
23+
<li class="nav-item"><a href="/profile" class="nav-link" routerLink="profile">{{ username }}</a></li>
24+
<li class="nav-item"><a href class="nav-link" (click)="logout()">LogOut</a></li>
25+
</ul>
26+
</div>
2127
</nav>
22-
<div class="container-fluid bg-light">
28+
<div class="container-fluid">
2329
<router-outlet></router-outlet>
2430
</div>
2531
</div>

‎angular-12-social-login/src/app/login/login.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<div *ngIf="password.errors.minlength">Password must be at least 6 characters</div>
1515
</div>
1616
</div>
17-
<div class="form-group">
18-
<button class="btn btn-primary btn-block">Login</button>
17+
<div class="form-group d-grid mt-2">
18+
<button class="btn btn-primary">Login</button>
1919
</div>
2020
<div class="form-group">
2121
<div class="alert alert-danger" role="alert" *ngIf="isLoginFailed">Login failed: {{ errorMessage }}</div>

‎angular-12-social-login/src/app/register/register.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<input type="checkbox" class="form-check-input" name="using2FA" [(ngModel)]="form.using2FA" #using2FA="ngModel" /><label class="form-check-label" for="using2FA">Use
3939
Two Step Verification</label>
4040
</div>
41-
<div class="form-group">
41+
<div class="form-group d-grid mt-2">
4242
<button class="btn btn-primary btn-block">Sign Up</button>
4343
</div>
4444
<div class="alert alert-warning" *ngIf="f.submitted && isSignUpFailed">

‎angular-12-social-login/src/index.html

+13-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>Angular12SocialLogin</title>
6-
<base href="/" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9-
<link
10-
rel="stylesheet"
11-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
12-
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
13-
crossorigin="anonymous"
14-
/>
15-
</head>
16-
<body>
17-
<app-root></app-root>
18-
</body>
19-
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Angular12SocialLogin</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
11+
</head>
12+
<body>
13+
<app-root></app-root>
14+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
15+
</body>
2016
</html>

0 commit comments

Comments
 (0)