`src/components/GitHubLoginButton.jsx`

71 lines
/**
 * GitHub Sign-In Button Component
 * Styled button for GitHub OAuth authentication
 */

import React from 'react';

const GitHubLoginButton = ({ onClick, disabled, loading }) => {
  const handleClick = () => {
    if (!disabled && !loading) {
      window.location.href = '/api/auth/github';
    }
  };

  return (
    <button
      onClick={onClick || handleClick}
      disabled={disabled || loading}
      className="flex items-center justify-center w-full px-4 py-3
                 bg-gray-900 text-white rounded-lg
                 hover:bg-gray-800
                 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
                 disabled:opacity-50 disabled:cursor-not-allowed
                 transition-all duration-200 ease-in-out
                 shadow-sm hover:shadow"
      type="button"
    >
      {loading ? (
        <svg
          className="animate-spin h-5 w-5 text-white mr-3"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
          />
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
          />
        </svg>
      ) : (
        <svg
          className="w-5 h-5 mr-3"
          viewBox="0 0 24 24"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
          />
        </svg>
      )}
      <span className="font-medium text-sm">
        {loading ? 'Signing in...' : 'Continue with GitHub'}
      </span>
    </button>
  );
};

export default GitHubLoginButton;