Changed components folder to screens

frontend/src/screens/JoinStation.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+function JoinStation() {
+  const [verifyMethod, setVerifyMethod] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleJoinStation = () => {
+    console.log('Joining station with password:', password);
+  };
+
+  return (
+    <div className="join-station">
+      <header className="join-station-header">
+        <h1>Join a Station on Serena</h1>
+      </header>
+
+      <main className="join-station-content">
+        <div className="verify-method-section">
+          <h2>How would you like to verify access?</h2>
+          
+          <div className="radio-option">
+            <label>
+              <input
+                type="radio"
+                name="verifyMethod"
+                value="password"
+                checked={verifyMethod === 'password'}
+                onChange={(e) => setVerifyMethod(e.target.value)}
+              />
+              Password
+            </label>
+          </div>
+
+          {verifyMethod === 'password' && (
+            <div className="password-input-section">
+              <label htmlFor="station-password">Station Password:</label>
+              <input
+                type="password"
+                id="station-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter station password"
+              />
+            </div>
+          )}
+        </div>
+
+        <button 
+          className="join-station-final-btn"
+          onClick={handleJoinStation}
+          disabled={verifyMethod !== 'password' || !password.trim()}
+        >
+          Join Station
+        </button>
+      </main>
+    </div>
+  );
+}
+
+export default JoinStation;