Adding Microsoft Authentication

src/Components/Firebase/Firebase.js

@@ -7,7 +7,8 @@ import {
   GoogleAuthProvider, 
   GithubAuthProvider, 
   FacebookAuthProvider, 
-  TwitterAuthProvider, // Import TwitterAuthProvider
+  TwitterAuthProvider,
+  OAuthProvider, // Import OAuthProvider for Microsoft
   signInWithPopup, 
   RecaptchaVerifier, 
   signInWithPhoneNumber 
@@ -31,22 +32,24 @@ const db = getFirestore(firebaseApp);
 const googleProvider = new GoogleAuthProvider();
 const githubProvider = new GithubAuthProvider();
 const facebookProvider = new FacebookAuthProvider();
-const twitterProvider = new TwitterAuthProvider(); // Initialize TwitterAuthProvider
+const twitterProvider = new TwitterAuthProvider();
+const microsoftProvider = new OAuthProvider('microsoft.com'); // Initialize Microsoft provider
 const auth = getAuth(firebaseApp);
 
 export { 
   auth, 
   signInWithPopup, 
-  githubProvider, 
   googleProvider, 
+  githubProvider, 
   facebookProvider, 
-  twitterProvider, // Export twitterProvider
+  twitterProvider, 
+  microsoftProvider, // Export Microsoft provider
   GithubAuthProvider, 
   FacebookAuthProvider, 
-  TwitterAuthProvider, // Export TwitterAuthProvider
+  TwitterAuthProvider, 
   RecaptchaVerifier, 
   signInWithPhoneNumber 
 };
 
 export { db, analytics, firebaseApp as app };
-export default firebaseApp;
+export default firebaseApp;

src/Components/Login.js

@@ -5,14 +5,14 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 import logImg from './Profile/log.svg';
 import registerImg from './Profile/register.svg';
 import homeIcon from './FreeLancer/homeicon.png';
-import { auth, googleProvider, githubProvider, facebookProvider } from './Firebase/Firebase.js';
+import { auth, googleProvider, githubProvider, facebookProvider, microsoftProvider } from './Firebase/Firebase.js';
 import {
   signInWithPopup,
   signInWithEmailAndPassword,
   createUserWithEmailAndPassword,
   RecaptchaVerifier,
   signInWithPhoneNumber,
-  TwitterAuthProvider
+  TwitterAuthProvider,
 } from 'firebase/auth';
 
 const LogIn = () => {
@@ -74,6 +74,18 @@ const LogIn = () => {
     }
   };
 
+  const handleMicrosoftSignIn = async () => {
+    try {
+      const result = await signInWithPopup(auth, microsoftProvider);
+      const user = result.user;
+      localStorage.setItem('user', JSON.stringify(user));
+      console.log('Microsoft sign-in success:', user);
+      navigate('/');
+    } catch (error) {
+      console.error('Microsoft sign-in error:', error);
+    }
+  };
+
   const handleLogin = async (e) => {
     e.preventDefault();
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
@@ -282,6 +294,9 @@ const LogIn = () => {
               <div onClick={handleGitHubSignIn} className="social-icon">
                 <i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
               </div>
+              <div onClick={handleMicrosoftSignIn} className="social-icon">
+              <i className="fab fa-microsoft" style={{ color: 'darkturquoise' }}></i>
+              </div>
               <div onClick={togglePhoneAuth} className="social-icon">
                 <i className="fas fa-phone" style={{ color: 'darkturquoise' }}></i>
               </div>
@@ -380,6 +395,9 @@ const LogIn = () => {
               <div onClick={handleGitHubSignIn} className="social-icon">
                 <i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
               </div>
+              <div onClick={handleMicrosoftSignIn} className="social-icon">
+              <i className="fab fa-microsoft" style={{ color: 'darkturquoise' }}></i>
+              </div>
               <div onClick={togglePhoneAuth} className="social-icon">
                 <i className="fas fa-phone" style={{ color: 'darkturquoise' }}></i>
               </div>
@@ -446,4 +464,4 @@ const LogIn = () => {
   );
 };
 
-export default LogIn;
+export default LogIn;

src/Components/footer_section/ContactUs/contact_us.css

@@ -133,6 +133,10 @@
     background-color: #3a3756;
     color: white;
 }
+.select-issue {
+    height: 100px;
+    /* Add any other styles you want here */
+}
 
 .contentInside a {
     font-size: large;

src/Components/footer_section/ContactUs/contact_us.js

@@ -117,19 +117,19 @@ function ContactUs() {
                     <p>Use the form below to get in touch. We attempt to respond to support requests within 1 business day.</p>
                     <form onSubmit={handleSubmit}>
                         <label htmlFor="flname">Name :</label>
-                        <input type='text' placeholder='Name' id='flname' name='flname' required></input>
+                        <input type='text' placeholder='Name' id='flname' name='flname' required />
                         <label htmlFor="email">Email :</label>
-                        <input type='email' placeholder='Email' id='email' name='email' required></input>
+                        <input type='email' placeholder='Email' id='email' name='email' required />
                         <label htmlFor="issue">Issue Type:</label>
-                        <select name='issue' id='issue' required>
+                        <select name='issue' id='issue' className='select-issue' required>
                             <option value='Bug'>Bug</option>
                             <option value='Suggestion'>Suggestion</option>
                             <option value='Other'>Other</option>
                         </select>
                         <label htmlFor="message">Message :</label>
                         <textarea id='message' placeholder='Message' name='message' required></textarea>
                         <label htmlFor="attachments">Any Attachments :</label>
-                        <input type='file' id='attachments' name='attachments'></input>
+                        <input type='file' id='attachments' name='attachments' />
                         <button type='submit'>Submit</button>
                     </form>
                 </div>