Skip to content

feat: enhance admin login interface and functionality #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
io-somaya wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: enhance admin login interface and functionality #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions frontend/learnify-frontend/src/app/formes/admin-login/admin-login.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -743,3 +743,137 @@ form {
opacity: 0.1;
}
}

/* Admin-specific Styles */
.admin-side {
background: linear-gradient(135deg, var(--dark-purple), #1a2244);
}

.admin-notice {
background-color: #f8f9fa;
border-left: 3px solid var(--dark-purple);
padding: 12px 15px;
margin: 20px 0;
border-radius: 6px;
display: flex;
align-items: center;
}

.admin-notice i {
color: var(--dark-purple);
font-size: 18px;
margin-right: 10px;
}

.admin-notice span {
color: #555;
font-size: 14px;
}

.admin-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.3);
padding: 30px;
border-radius: 12px;
width: 80%;
backdrop-filter: blur(5px);
z-index: 10;
}

.admin-icon {
font-size: 48px;
margin-bottom: 15px;
color: white;
}

.admin-overlay h3 {
font-size: 28px;
font-weight: 600;
margin-bottom: 10px;
}

.admin-overlay p {
font-size: 16px;
opacity: 0.9;
}

/* Student Login Link Section */
.student-login-section {
margin-top: 30px;
text-align: center;
border-top: 1px solid #eee;
padding-top: 20px;
}

.student-login-text {
color: #6c757d;
font-size: 14px;
margin-bottom: 10px;
}

.student-login-link {
display: inline-flex;
align-items: center;
color: var(--dark-purple);
font-weight: 500;
text-decoration: none;
padding: 8px 15px;
border-radius: 20px;
background-color: var(--light-pink);
transition: all 0.3s ease;
cursor: pointer;
}

.student-login-link i {
margin-right: 8px;
font-size: 16px;
}

.student-login-link:hover {
background-color: var(--light-purple);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(45, 51, 107, 0.2);
}

.student-login-link:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(45, 51, 107, 0.2);
}

/* Override the signup-link button for admin login */
.signup-link .btn {
background-color: var(--light-pink);
color: var(--dark-purple);
border: none;
border-radius: 20px;
padding: 8px 15px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.signup-link .btn:hover {
background-color: var(--light-purple);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Make the signin button more admin-like */
.signin-btn {
background: linear-gradient(to right, #2D336B, #1A2244);
}

.signin-btn:hover {
background: linear-gradient(to right, #252E5F, #151B36);
}
37 changes: 17 additions & 20 deletions frontend/learnify-frontend/src/app/formes/admin-login/admin-login.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
<div class="logo-text">Learnify</div>
</div>
<div class="signup-link">
<a routerLink="/register" class="btn"><i class="fas fa-user-plus"></i> Sign Up</a>
<a (click)="goToStudentLogin()" class="btn"><i class="fas fa-graduation-cap"></i> Student Login</a>
</div>
</div>

<h2>Welcome Back!</h2>
<p class="subheading">Log in to continue your learning journey and access all your courses.</p>
<h2>Admin Login</h2>
<p class="subheading">Access teacher and administrator features to manage courses, students, and content.</p>

<div *ngIf="errorMessage" class="alert alert-danger">
{{ errorMessage }}
Expand Down Expand Up @@ -50,39 +50,36 @@ <h2>Welcome Back!</h2>
</div>

<button type="submit" class="btn signin-btn" [disabled]="loginForm.invalid || isLoading">
<span *ngIf="!isLoading">Sign In</span>
<span *ngIf="!isLoading"><i class="fas fa-lock"></i> Admin Sign In</span>
<span *ngIf="isLoading">
<i class="fas fa-spinner fa-spin"></i> Signing In...
</span>
</button>

<div class="divider">OR</div>
<div class="admin-notice">
<i class="fas fa-info-circle"></i>
<span>This login is exclusively for teachers and administrators.</span>
</div>

<div class="social-buttons">
<button type="button" class="social-btn google-btn">
<svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18px" height="18px">
<path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/>
<path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/>
<path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
<path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/>
</svg>
Google
</button>
<button type="button" class="social-btn">
<i class="fab fa-facebook-f social-icon facebook-icon"></i>
Facebook
</button>
<!-- Student Login Link -->
<div class="student-login-section">
<p class="student-login-text">Are you a student?</p>
<a class="student-login-link" (click)="goToStudentLogin()">
<i class="fas fa-user-graduate"></i> Go to Student Login
</a>
</div>
</form>
</div>

<div class="col-md-6 right-side">
<div class="col-md-6 right-side admin-side">
<!-- Animated background with geometric shapes -->
<div class="animated-background">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>


</div>
</div>
</div>
Expand Down
35 changes: 24 additions & 11 deletions frontend/learnify-frontend/src/app/formes/admin-login/admin-login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ export class AdminLoginComponent implements OnInit {
// Single image with fallback
images = [
{
src: 'assets/pics/login.png',
alt: 'Login',
fallback: 'https://via.placeholder.com/500x500.png?text=Login'
src: 'assets/pics/admin-login.png',
alt: 'Admin Login',
fallback: 'https://via.placeholder.com/500x500.png?text=Admin+Login'
}
];
currentImageIndex = 0;
Expand Down Expand Up @@ -96,19 +96,27 @@ export class AdminLoginComponent implements OnInit {
this.authService.adminLogin(email, password).subscribe({
next: (response) => {
this.isLoading = false;
console.log('Login successful', response);
// show toast message
this.toastService.success('Login completed successfully!');
const userRole = response.user?.role || this.authService.userRole;

// Navigate to dashboard
this.router.navigate(['/admin/dashboard']);
// Verify user is a teacher or assistant
if (userRole === 'teacher' || userRole === 'assistant') {
// Success message
this.toastService.success('Admin login successful!');
// Navigate to admin dashboard
this.router.navigate(['/admin/dashboard']);
} else {
// Not authorized as admin
this.errorMessage = 'You do not have permission to access the admin area.';
this.toastService.error(this.errorMessage);
// Logout the user
this.authService.logout();
}
},
error: (error) => {
this.isLoading = false;
this.errorMessage = 'Login failed. Please check your credentials and try again.';
this.errorMessage = 'Invalid credentials. This login is for administrators only.';
console.error('Login error', error);
// show toast message
this.toastService.error("Login failed. Please check your credentials and try again.");
this.toastService.error(this.errorMessage);
}
});
}
Expand All @@ -120,4 +128,9 @@ export class AdminLoginComponent implements OnInit {
// Navigate to forgot password page
this.router.navigate(['/forgot-password']);
}

// Navigate back to the regular student login page
goToStudentLogin() {
this.router.navigate(['/']);
}
}
23 changes: 19 additions & 4 deletions frontend/learnify-frontend/src/app/formes/login/login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,22 @@ export class LoginComponent implements OnInit {
next: (response) => {
this.isLoading = false;
console.log('Login successful', response);
// show toast message
this.toastService.success('Login completed successfully!');

// Navigate to dashboard
this.router.navigate(['/admin/dashboard']);
// Show success toast message
this.toastService.success('Login completed successfully!');

// Get user role
const userRole = response.user?.role || this.authService.userRole;

// Handle different user roles
if (userRole === 'teacher' || userRole === 'assistant') {
// If a teacher/admin tries to log in through the student form
this.toastService.info('Please use the admin login page for teacher/admin access');
this.router.navigate(['/admin/login']);
} else {
// All other users (including students) go to student dashboard
this.router.navigate(['/student/dashboard']);
}
},
error: (error) => {
this.isLoading = false;
Expand All @@ -120,4 +131,8 @@ export class LoginComponent implements OnInit {
// Navigate to forgot password page
this.router.navigate(['/forgot-password']);
}

goToAdminLogin() {
this.router.navigate(['/admin/login']);
}
}