Changeset 50f2fb4 for src/app/page.tsx


Ignore:
Timestamp:
01/30/26 01:40:27 (8 months ago)
Author:
Stefan-Saveski <stefansaveski19@…>
Branches:
master
Children:
ba52069
Parents:
298f9b3
Message:

Added dual language feature.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/app/page.tsx

    r298f9b3 r50f2fb4  
    1212import { useState } from 'react';
    1313import { login } from '@/lib/auth';
     14import { useTranslation } from 'react-i18next';
     15import LanguageSwitcher from '@/components/LanguageSwitcher';
    1416
    1517export default function LoginPage() {
     18  const { t } = useTranslation();
    1619  const [showPassword, setShowPassword] = useState(false);
    1720  const [isSubmitting, setIsSubmitting] = useState(false);
    … …  
    5457              <div className="w-full flex flex-col gap-4">
    5558                <div className="bg-yellow-100 border border-yellow-200 rounded-xl shadow-sm p-5">
    56                   <div className="text-sm font-bold text-gray-900 mb-2">Login for Student</div>
     59                  <div className="text-sm font-bold text-gray-900 mb-2">{t('login_student_title')}</div>
    5760                  <div className="text-xs text-gray-800 whitespace-pre-wrap font-mono">
    58                     {`"email":"boris@example.com",
    59 "password":"your-password-here",`}
     61                    {t('login_student_example')}
    6062                  </div>
    6163                  <div className="mt-3 text-xs text-gray-700">
    62                     may take up to 30 seconds afte long inactivity
     64                    {t('login_note_slow')}
    6365                  </div>
    6466                </div>
    6567
    6668                <div className="bg-yellow-100 border border-yellow-200 rounded-xl shadow-sm p-5">
    67                   <div className="text-sm font-bold text-gray-900 mb-2">Login for Professor</div>
     69                  <div className="text-sm font-bold text-gray-900 mb-2">{t('login_professor_title')}</div>
    6870                  <div className="text-xs text-gray-800 whitespace-pre-wrap font-mono">
    69                     {`"email":"andonov@gmail.com",
    70 "password":"123lol456",`}
     71                    {t('login_professor_example')}
    7172                  </div>
    7273                </div>
    … …  
    8485                </div>
    8586              </div>
    86               <h1 className="text-2xl font-bold mb-2">Добредојде</h1>
     87              <h1 className="text-2xl font-bold mb-2">{t('login_welcome')}</h1>
    8788              <p className="text-blue-100 text-sm">
    88                 Најавете се во вашиот IKnow акаунт
     89                {t('login_subtitle')}
    8990              </p>
    9091            </div>
    … …  
    9293            {/* Form */}
    9394            <div className="p-8">
     95              {/* Language Switcher above email field, centered */}
     96              <div className="flex justify-center mb-6">
     97                <LanguageSwitcher />
     98              </div>
    9499              <form onSubmit={handleSubmit} className="space-y-6">
    95100                {/* Email Field */}
    96101                <div>
    97102                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
    98                     Внесете е-пошта
     103                    {t('login_email_label')}
    99104                  </label>
    100105                  <div className="relative">
    … …  
    110115                      onChange={handleInputChange}
    111116                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
    112                       placeholder="Внесете е-пошта"
     117                      placeholder={t('login_email_placeholder')}
    113118                    />
    114119                  </div>
    … …  
    118123                <div>
    119124                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
    120                     Лозинка
     125                    {t('login_password_label')}
    121126                  </label>
    122127                  <div className="relative">
    … …  
    132137                      onChange={handleInputChange}
    133138                      className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
    134                       placeholder="Внесете лозинка"
     139                      placeholder={t('login_password_placeholder')}
    135140                    />
    136141                    <button
    … …  
    157162                    />
    158163                    <label htmlFor="remember" className="ml-2 block text-sm text-gray-700">
    159                       Запомни ме
     164                      {t('login_remember_me')}
    160165                    </label>
    161166                  </div>
    … …  
    164169                    className="text-sm text-primary hover:text-blue-700 font-medium transition-colors"
    165170                  >
    166                     Заборавена лозинка?
     171                    {t('login_forgot_password')}
    167172                  </button>
    168173                </div>
    … …  
    170175                {errorMessage && (
    171176                  <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
    172                     {errorMessage}
     177                    {t(errorMessage) || errorMessage}
    173178                  </div>
    174179                )}
    … …  
    181186                >
    182187                  <FontAwesomeIcon icon={faSignInAlt} className="h-4 w-4" />
    183                   {isSubmitting ? 'Најави се...' : 'Најави се'}
     188                  {isSubmitting ? t('login_button_loading') : t('login_button')}
    184189                </button>
    185190              </form>
    … …  
    189194            <div className="bg-gray-50 px-8 py-4 border-t border-gray-100">
    190195              <p className="text-center text-sm text-gray-600">
    191                 Немате акаунт?{' '}
     196                {t('login_no_account')}{' '}
    192197                <button className="text-primary hover:text-blue-700 font-medium transition-colors">
    193                   Контактирајте ја администрацијата
     198                  {t('login_contact_admin')}
    194199                </button>
    195200              </p>
    … …  
    202207                    <FontAwesomeIcon icon={faGraduationCap} className="text-primary" />
    203208                    <span className="text-sm text-gray-600">
    204                       Студентски информационен систем
     209                      {t('login_footer')}
    205210                    </span>
    206211                  </div>
Note: See TracChangeset for help on using the changeset viewer.