Line data    Source code

       1             : // Filepath: Melodex/melodex-front-end/src/components/Register.jsx
       2           0 : import React, { useState } from 'react';
       3           0 : import { Auth } from 'aws-amplify';
       4           0 : import { useNavigate } from 'react-router-dom';
       5           0 : import { useUserContext } from '../contexts/UserContext';
       6             : 
       7           0 : const Register = () => {
       8           0 :   const [email, setEmail] = useState('');
       9           0 :   const [username, setUsername] = useState('');
      10           0 :   const [password, setPassword] = useState('');
      11           0 :   const [verificationCode, setVerificationCode] = useState('');
      12           0 :   const [showVerification, setShowVerification] = useState(false);
      13           0 :   const [errorMessage, setErrorMessage] = useState('');
      14           0 :   const navigate = useNavigate();
      15           0 :   const ctx = useUserContext();
      16           0 :   console.log('UserContext value:', ctx);
      17           0 :   const { setUserID, setDisplayName, setProfilePicture, checkUser } = ctx;
      18             : 
      19           0 :   const handleRegister = async () => {
      20           0 :     if (!email || !username || !password) {
      21           0 :       setErrorMessage('All fields are required');
      22           0 :       return;
      23           0 :     }
      24             : 
      25           0 :     try {
      26           0 :       const signUpResponse = await Auth.signUp({
      27           0 :         username: email,
      28           0 :         password,
      29           0 :         attributes: {
      30           0 :           email,
      31           0 :           'custom:username': username,
      32           0 :           'picture': 'https://i.imgur.com/uPnNK9Y.png',
      33           0 :         },
      34           0 :       });
      35           0 :       console.log('Sign-up response:', signUpResponse);
      36           0 :       setShowVerification(true);
      37           0 :       setErrorMessage('');
      38           0 :     } catch (error) {
      39           0 :       console.error('Registration error:', error);
      40           0 :       setErrorMessage(error.message || 'Registration failed');
      41           0 :     }
      42           0 :   };
      43             : 
      44           0 :   const handleVerify = async () => {
      45           0 :     try {
      46           0 :       await Auth.confirmSignUp(email, verificationCode);
      47           0 :       console.log('Verified');
      48           0 :       const user = await Auth.signIn(email, password);
      49           0 :       console.log('Signed in after verification:', user);
      50             : 
      51             : 
      52           0 :       try { console.log('before setUserID'); setUserID(user.username); console.log('after setUserID'); } catch (e) { console.error('setUserID failed', e); throw e; }
      53           0 :       try { console.log('before setDisplayName'); setDisplayName(username); console.log('after setDisplayName'); } catch (e) { console.error('setDisplayName failed', e); throw e; }
      54           0 :       try { console.log('before setProfilePicture'); setProfilePicture('https://i.imgur.com/uPnNK9Y.png'); console.log('after setProfilePicture'); } catch (e) { console.error('setProfilePicture failed', e); throw e; }
      55             : 
      56           0 :       try { console.log('before checkUser'); await checkUser(); console.log('after checkUser'); } catch (e) { console.error('checkUser failed', e); throw e; }
      57             : 
      58             : 
      59           0 :       console.log('Navigating to /rank');
      60           0 :       navigate('/rank');
      61           0 :     } catch (error) {
      62           0 :       console.error('Verification error:', error);
      63           0 :       setErrorMessage(error.message || 'Verification failed');
      64           0 :     }
      65           0 :   };
      66             : 
      67           0 :   const handleBackToLogin = () => {
      68           0 :     console.log('Navigating back to /login');
      69           0 :     navigate('/login');
      70           0 :   };
      71             : 
      72           0 :   return (
      73           0 :     <div className="auth-container">
      74           0 :       <h2
      75           0 :         style={{
      76           0 :           textAlign: 'center',
      77           0 :           fontFamily: "'Inter', sans-serif",
      78           0 :           fontSize: '2rem', // Larger than navbar
      79           0 :           fontWeight: 600, // Matches navbar
      80           0 :           color: '#141820',
      81           0 :           marginBottom: '0.5rem',
      82           0 :         }}
      83           0 :       >
      84             :         Melodx.io
      85           0 :       </h2>
      86           0 :       <p
      87           0 :         style={{
      88           0 :           textAlign: 'center',
      89           0 :           fontSize: '1rem',
      90           0 :           color: '#666',
      91           0 :           marginBottom: '1.5rem',
      92           0 :         }}
      93           0 :       >
      94             :         Register
      95           0 :       </p>
      96           0 :       {!showVerification ? (
      97           0 :         <div className="auth-form">
      98           0 :           <input
      99           0 :             className="auth-input"
     100           0 :             type="email"
     101           0 :             placeholder="Email"
     102           0 :             value={email}
     103           0 :             onChange={(e) => setEmail(e.target.value)}
     104           0 :           />
     105           0 :           <input
     106           0 :             className="auth-input"
     107           0 :             type="text"
     108           0 :             placeholder="Username"
     109           0 :             value={username}
     110           0 :             onChange={(e) => setUsername(e.target.value)}
     111           0 :           />
     112           0 :           <input
     113           0 :             className="auth-input"
     114           0 :             type="password"
     115           0 :             placeholder="Password"
     116           0 :             value={password}
     117           0 :             onChange={(e) => setPassword(e.target.value)}
     118           0 :           />
     119           0 :           <button
     120           0 :             className="auth-button auth-button-primary"
     121           0 :             onClick={handleRegister}
     122           0 :             style={{ borderRadius: '0.5rem' }}
     123           0 :           >
     124             :             Register
     125           0 :           </button>
     126           0 :           <button
     127           0 :             className="auth-button auth-button-secondary"
     128           0 :             onClick={handleBackToLogin}
     129           0 :             style={{
     130           0 :               borderRadius: '0.5rem',
     131           0 :               marginTop: '1rem', // Space above the button
     132           0 :               background: '#7f8c8d', // Matches gray from Login
     133           0 :             }}
     134           0 :           >
     135             :             Back to Login
     136           0 :           </button>
     137           0 :           {errorMessage && <p className="auth-error">{errorMessage}</p>}
     138           0 :         </div>
     139             :       ) : (
     140           0 :         <div className="auth-form">
     141           0 :           <input
     142           0 :             className="auth-input"
     143           0 :             type="text"
     144           0 :             placeholder="Verification Code"
     145           0 :             value={verificationCode}
     146           0 :             onChange={(e) => setVerificationCode(e.target.value)}
     147           0 :           />
     148           0 :           <button
     149           0 :             className="auth-button auth-button-primary"
     150           0 :             onClick={handleVerify}
     151           0 :             style={{ borderRadius: '0.5rem' }}
     152           0 :           >
     153             :             Verify
     154           0 :           </button>
     155           0 :           <button
     156           0 :             className="auth-button auth-button-secondary"
     157           0 :             onClick={handleBackToLogin}
     158           0 :             style={{
     159           0 :               borderRadius: '0.5rem',
     160           0 :               marginTop: '1rem',
     161           0 :               background: '#7f8c8d', // Matches gray from Login
     162           0 :             }}
     163           0 :           >
     164             :             Back to Login
     165           0 :           </button>
     166           0 :           {errorMessage && <p className="auth-error">{errorMessage}</p>}
     167           0 :         </div>
     168             :       )}
     169           0 :     </div>
     170             :   );
     171           0 : };
     172             : 
     173           0 : export default Register;