257 lines
10 KiB
TypeScript
257 lines
10 KiB
TypeScript
/**
|
|
* File: page.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Role registration page for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
export default function RegisterRolePage() {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [selectedRole, setSelectedRole] = useState('');
|
|
|
|
const [formData, setFormData] = useState({
|
|
institution: '',
|
|
className: '', // This will store class code for students
|
|
teachingLevel: '',
|
|
purpose: '',
|
|
nim: '',
|
|
});
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/register-role', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
role: selectedRole,
|
|
...formData,
|
|
}),
|
|
credentials: 'include',
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
router.push('/dashboard');
|
|
router.refresh();
|
|
} else {
|
|
console.error('Failed to register role:', result.message);
|
|
// You could show an error message to the user here
|
|
}
|
|
} catch (error) {
|
|
console.error('Error registering role:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRoleSelect = (role: string) => {
|
|
setSelectedRole(role);
|
|
setFormData({
|
|
institution: '',
|
|
className: '',
|
|
teachingLevel: '',
|
|
purpose: '',
|
|
nim: '',
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-white mb-2">Pilih Role Anda</h1>
|
|
<p className="text-gray-400">Upgrade akun Anda untuk mengakses fitur lengkap</p>
|
|
</div>
|
|
|
|
{!selectedRole ? (
|
|
<div className="space-y-4">
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all cursor-pointer" onClick={() => handleRoleSelect('CALON_PENDIDIK')}>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white mb-2">Calon Pendidik</h3>
|
|
<p className="text-gray-400 text-sm mb-3">Bergabung sebagai peserta didik untuk mengakses materi pembelajaran, mengerjakan tugas, dan berpartisipasi dalam forum diskusi kelas.</p>
|
|
<ul className="text-gray-300 text-sm space-y-1">
|
|
<li>• Akses video pembelajaran</li>
|
|
<li>• Bergabung dengan kelas</li>
|
|
<li>• Mengerjakan tugas</li>
|
|
<li>• Forum diskusi kelas</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all cursor-pointer" onClick={() => handleRoleSelect('PENDIDIK')}>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a2 2 0 012-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm7-2a2 2 0 11-4 0v4a2 2 0 014 0V9z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white mb-2">Pendidik</h3>
|
|
<p className="text-gray-400 text-sm mb-3">Daftar sebagai instruktur untuk membuat kelas, mengelola konten pembelajaran, dan membimbing calon pendidik.</p>
|
|
<ul className="text-gray-300 text-sm space-y-1">
|
|
<li>• Buat dan kelola kelas</li>
|
|
<li>• Upload video pembelajaran</li>
|
|
<li>• Berikan tugas dan revisi</li>
|
|
<li>• Moderasi forum kelas</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="bg-white/5 rounded-lg p-4 mb-6">
|
|
<p className="text-sm text-gray-300">
|
|
Anda memilih role: <span className="font-semibold text-white">
|
|
{selectedRole === 'CALON_PENDIDIK' ? 'Calon Pendidik' : 'Pendidik'}
|
|
</span>
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedRole('')}
|
|
className="text-sm text-gold-400 hover:text-gold-300 mt-2"
|
|
>
|
|
← Pilih role lain
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="institution" className="text-gray-300">
|
|
Instansi
|
|
</Label>
|
|
<Input
|
|
id="institution"
|
|
value={formData.institution}
|
|
onChange={(e) => setFormData({ ...formData, institution: e.target.value })}
|
|
required
|
|
placeholder="Nama instansi pendidikan Anda"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
{selectedRole === 'CALON_PENDIDIK' ? (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="classCode" className="text-gray-300">
|
|
Kode Kelas
|
|
</Label>
|
|
<Input
|
|
id="classCode"
|
|
value={formData.className}
|
|
onChange={(e) => setFormData({ ...formData, className: e.target.value })}
|
|
required
|
|
placeholder="Masukkan kode kelas yang diberikan oleh pendidik"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
<p className="text-xs text-gray-400">
|
|
Hubungi pendidik Anda untuk mendapatkan kode kelas
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="nim" className="text-gray-300">
|
|
NIM (Nomor Induk Mahasiswa)
|
|
</Label>
|
|
<Input
|
|
id="nim"
|
|
value={formData.nim}
|
|
onChange={(e) => setFormData({ ...formData, nim: e.target.value })}
|
|
required
|
|
placeholder="Masukkan NIM Anda"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="className" className="text-gray-300">
|
|
Nama Kelas
|
|
</Label>
|
|
<Input
|
|
id="className"
|
|
value={formData.className}
|
|
onChange={(e) => setFormData({ ...formData, className: e.target.value })}
|
|
required
|
|
placeholder="Nama kelas yang akan Anda buat"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="teachingLevel" className="text-gray-300">
|
|
Jenjang Mengajar
|
|
</Label>
|
|
<Textarea
|
|
id="teachingLevel"
|
|
rows={3}
|
|
value={formData.teachingLevel}
|
|
onChange={(e) => setFormData({ ...formData, teachingLevel: e.target.value })}
|
|
required
|
|
placeholder="Jelaskan jenjang mengajar Anda (contoh: Tari Tradisional, Tari Modern, dll)"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="purpose" className="text-gray-300">
|
|
Tujuan Bergabung
|
|
</Label>
|
|
<Textarea
|
|
id="purpose"
|
|
rows={3}
|
|
value={formData.purpose}
|
|
onChange={(e) => setFormData({ ...formData, purpose: e.target.value })}
|
|
required
|
|
placeholder="Jelaskan tujuan Anda bergabung sebagai pendidik"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="pt-4 flex justify-end space-x-3">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => setSelectedRole('')}
|
|
disabled={loading}
|
|
className="text-gray-300 hover:text-white"
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="bg-gold-500 hover:bg-gold-600 text-navy-900"
|
|
>
|
|
{loading ? 'Mendaftar...' : 'Daftar Sekarang'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
} |