source: frontend/src/app/page.tsx

Last change on this file was b8093a0, checked in by imbrsk <boris696boris@…>, 3 days ago

Merge iknow-remaster into frontend/

Bring the Next.js frontend into this repository as a monorepo subdirectory,
preserving its full commit history via a subtree merge.
  • Property mode set to 100644
File size: 10.4 KB
Line 
1"use client"
2
3import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4import {
5 faUser,
6 faLock,
7 faEye,
8 faEyeSlash,
9 faSignInAlt,
10 faGraduationCap
11} from '@fortawesome/free-solid-svg-icons';
12import { useState } from 'react';
13import { login } from '@/lib/auth';
14import { useTranslation } from 'react-i18next';
15import LanguageSwitcher from '@/components/LanguageSwitcher';
16
17export default function LoginPage() {
18 const { t } = useTranslation();
19 const [showPassword, setShowPassword] = useState(false);
20 const [isSubmitting, setIsSubmitting] = useState(false);
21 const [errorMessage, setErrorMessage] = useState<string | null>(null);
22 const [formData, setFormData] = useState({
23 email: '',
24 password: ''
25 });
26
27 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
28 const { name, value } = e.target;
29 setFormData(prev => ({
30 ...prev,
31 [name]: value
32 }));
33 };
34
35 const handleSubmit = async (e: React.FormEvent) => {
36 e.preventDefault();
37 setErrorMessage(null);
38 setIsSubmitting(true);
39 try {
40 const session = await login({ email: formData.email, password: formData.password });
41 // Admins previously fell through to /students, where they have no
42 // enrolments and every page renders empty.
43 const home =
44 session.role === 'Professor' ? '/professor'
45 : session.role === 'Admin' ? '/admin'
46 : '/students';
47 window.location.href = home;
48 } catch (err) {
49 setErrorMessage(err instanceof Error ? err.message : 'Login failed.');
50 } finally {
51 setIsSubmitting(false);
52 }
53 };
54
55 return (
56 <div className="container mx-auto px-4">
57 <div className="min-h-screen ">
58 {/* Login Form */}
59 <div className="flex items-center justify-center min-h-[calc(100vh-160px)] p-4">
60 <div className="w-full max-w-5xl">
61 <div className="grid grid-cols-1 gap-6 lg:grid-cols-[24rem_28rem_24rem] lg:items-start lg:justify-center">
62 {/* Sticky Notes */}
63 <div className="w-full flex flex-col gap-4">
64 <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
65 <div className="text-sm font-bold text-card-foreground mb-2">{t('login_student_title')}</div>
66 <div className="text-xs text-card-foreground whitespace-pre-wrap">
67 {t('login_student_example')}
68 </div>
69 <div className="mt-3 text-xs text-blue-600 font-medium">
70 {t('login_demo_note')}
71 </div>
72 </div>
73
74 <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
75 <div className="text-sm font-bold text-card-foreground mb-2">{t('login_professor_title')}</div>
76 <div className="text-xs text-card-foreground whitespace-pre-wrap">
77 {t('login_professor_example')}
78 </div>
79 <div className="mt-3 text-xs text-blue-600 font-medium">
80 {t('login_demo_note')}
81 </div>
82 </div>
83
84 <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
85 <div className="text-sm font-bold text-card-foreground mb-2">{t('login_admin_title')}</div>
86 <div className="text-xs text-card-foreground whitespace-pre-wrap">
87 {t('login_admin_example')}
88 </div>
89 <div className="mt-3 text-xs text-blue-600 font-medium">
90 {t('login_demo_note')}
91 </div>
92 </div>
93 </div>
94
95 {/* Login Card Column */}
96 <div className="w-full max-w-md lg:max-w-none lg:w-[28rem] mx-auto">
97 {/* Login Card */}
98 <div className="bg-card rounded-2xl shadow-xl border border-border overflow-hidden">
99 {/* Header */}
100 <div className="bg-primary text-white px-8 py-6 text-center">
101 <div className="mb-4">
102 <div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-full shadow-lg">
103 <FontAwesomeIcon icon={faUser} className="text-2xl text-[#0272D1]" />
104 </div>
105 </div>
106 <h1 className="text-2xl font-bold mb-2">{t('login_welcome')}</h1>
107 <p className="text-blue-100 text-sm">
108 {t('login_subtitle')}
109 </p>
110 </div>
111
112 {/* Form */}
113 <div className="p-8">
114 {/* Language Switcher above email field, centered */}
115 <div className="flex justify-center mb-6">
116 <LanguageSwitcher />
117 </div>
118 <form onSubmit={handleSubmit} className="space-y-6">
119 {/* Email Field */}
120 <div>
121 <label htmlFor="email" className="block text-sm font-medium text-muted-foreground mb-2">
122 {t('login_email_label')}
123 </label>
124 <div className="relative">
125 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
126 <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-muted-foreground" />
127 </div>
128 <input
129 id="email"
130 name="email"
131 type="email"
132 required
133 value={formData.email}
134 onChange={handleInputChange}
135 className="w-full pl-10 pr-4 py-3 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
136 placeholder={t('login_email_placeholder')}
137 />
138 </div>
139 </div>
140
141 {/* Password Field */}
142 <div>
143 <label htmlFor="password" className="block text-sm font-medium text-muted-foreground mb-2">
144 {t('login_password_label')}
145 </label>
146 <div className="relative">
147 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
148 <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-muted-foreground" />
149 </div>
150 <input
151 id="password"
152 name="password"
153 type={showPassword ? "text" : "password"}
154 required
155 value={formData.password}
156 onChange={handleInputChange}
157 className="w-full pl-10 pr-12 py-3 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
158 placeholder={t('login_password_placeholder')}
159 />
160 <button
161 type="button"
162 onClick={() => setShowPassword(!showPassword)}
163 className="absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground transition-colors"
164 >
165 <FontAwesomeIcon
166 icon={showPassword ? faEyeSlash : faEye}
167 className="h-4 w-4"
168 />
169 </button>
170 </div>
171 </div>
172
173 {/* Remember Me & Forgot Password */}
174 <div className="flex items-center justify-between">
175 <div className="flex items-center">
176 <input
177 id="remember"
178 name="remember"
179 type="checkbox"
180 className="h-4 w-4 text-primary focus:ring-primary border-input rounded"
181 />
182 <label htmlFor="remember" className="ml-2 block text-sm text-muted-foreground">
183 {t('login_remember_me')}
184 </label>
185 </div>
186 <button
187 type="button"
188 className="text-sm text-primary hover:text-blue-700 font-medium transition-colors"
189 >
190 {t('login_forgot_password')}
191 </button>
192 </div>
193
194 {errorMessage && (
195 <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
196 {t(errorMessage) || errorMessage}
197 </div>
198 )}
199
200 {/* Submit Button */}
201 <button
202 type="submit"
203 disabled={isSubmitting}
204 className="w-full bg-primary hover:bg-blue-700 disabled:opacity-60 disabled:hover:bg-primary text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
205 >
206 <FontAwesomeIcon icon={faSignInAlt} className="h-4 w-4" />
207 {isSubmitting ? t('login_button_loading') : t('login_button')}
208 </button>
209 </form>
210 </div>
211
212 {/* Footer */}
213 <div className="bg-accent px-8 py-4 border-t border-border">
214 <p className="text-center text-sm text-muted-foreground">
215 {t('login_no_account')}{' '}
216 <button className="text-primary hover:text-blue-700 font-medium transition-colors">
217 {t('login_contact_admin')}
218 </button>
219 </p>
220 </div>
221 </div>
222
223 {/* Additional Info */}
224 <div className="mt-6 text-center">
225 <div className="inline-flex items-center gap-2 px-4 py-2 bg-card bg-opacity-80 rounded-lg shadow-sm">
226 <FontAwesomeIcon icon={faGraduationCap} className="text-primary" />
227 <span className="text-sm text-muted-foreground">
228 {t('login_footer')}
229 </span>
230 </div>
231 </div>
232 </div>
233
234 {/* Right spacer column (keeps login centered) */}
235 <div className="hidden lg:block" />
236 </div>
237 </div>
238 </div>
239 </div>
240 </div>
241 );
242}
Note: See TracBrowser for help on using the repository browser.