Embed

<section class="yuma-login-section">
  <div class="yuma-login-card">

    <div class="yuma-logo-login">
      <img
        src="https://cdn.durable.co/services/14xQksbZVNLD0ReSj1xSso5PKhPUDRHL5TfC0PliTE6iULDadZQhfpb2uBZsLNH8.png"
        alt="YUMA Sports & Activities"
      >
    </div>

    <h1>Coach Login</h1>

    <p class="yuma-login-subtitle">
      Enter your credentials to access your coach portal.
    </p>

    <form id="yumaCoachLogin">

      <label for="yumaUsername">Email</label>

      <div class="yuma-input-wrapper">
        <input
          id="yumaUsername"
          type="email"
          placeholder="Enter your email"
          autocomplete="email"
          required
        >
      </div>

      <label for="yumaPassword">Password</label>

      <div class="yuma-input-wrapper">
        <input
          id="yumaPassword"
          type="password"
          placeholder="Enter your password"
          autocomplete="current-password"
          required
        >

        <button
          class="yuma-show-password"
          type="button"
          id="yumaShowPassword"
          aria-label="Show password"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z"></path>
            <circle cx="12" cy="12" r="2.5"></circle>
          </svg>
        </button>
      </div>

      <button
        class="yuma-login-button"
        id="yumaLoginButton"
        type="submit"
      >
        Log In
      </button>

      <p id="yumaLoginMessage" class="yuma-login-message"></p>

      <button
        type="button"
        id="yumaForgotPassword"
        class="yuma-forgot-password"
      >
        Forgot Password?
      </button>

    </form>

    <form id="yumaResetPasswordForm" class="yuma-reset-form">
      <h2>Create New Password</h2>

      <p class="yuma-reset-subtitle">
        Enter your new password below.
      </p>

      <label for="yumaNewPassword">New Password</label>

      <div class="yuma-input-wrapper">
        <input
          id="yumaNewPassword"
          type="password"
          placeholder="Enter a new password"
          autocomplete="new-password"
          minlength="8"
          required
        >
      </div>

      <label for="yumaConfirmPassword">Confirm Password</label>

      <div class="yuma-input-wrapper">
        <input
          id="yumaConfirmPassword"
          type="password"
          placeholder="Confirm your new password"
          autocomplete="new-password"
          minlength="8"
          required
        >
      </div>

      <button
        class="yuma-login-button"
        id="yumaResetButton"
        type="submit"
      >
        Save New Password
      </button>

      <p id="yumaResetMessage" class="yuma-login-message"></p>
    </form>
  </div>
</section>

<style>
  .yuma-login-section,
  .yuma-login-section * {
    box-sizing: border-box;
  }

  .yuma-login-section {
    min-height: 650px;
    padding: 70px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
      radial-gradient(
        circle at top,
        rgba(174, 227, 0, 0.14),
        transparent 38%
      ),
      #f5f7f9;
    font-family: Arial, Helvetica, sans-serif;
  }

  .yuma-login-card {
    width: 100%;
    max-width: 480px;
    padding: 42px 42px 48px;
    background: #ffffff;
    border: 1px solid #e4e8ec;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(16, 30, 48, 0.12);
  }

  .yuma-logo-login {
    width: 100%;
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yuma-logo-login img {
    display: block;
    width: 300px;
    max-width: 95%;
    height: auto;
    object-fit: contain;
  }

  .yuma-login-card h1 {
    margin: 0;
    color: #101e30;
    text-align: center;
    font-size: 34px;
    line-height: 1.2;
  }

  .yuma-login-subtitle {
    max-width: 340px;
    margin: 12px auto 34px;
    color: #687386;
    text-align: center;
    font-size: 16px;
    line-height: 1.55;
  }

  .yuma-login-card label {
    display: block;
    margin: 0 0 9px;
    color: #101e30;
    font-size: 15px;
    font-weight: 700;
  }

  .yuma-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
  }

  .yuma-input-wrapper input {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #cfd6de;
    border-radius: 9px;
    background: #ffffff;
    color: #101e30;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 56px;
    outline: none;
    appearance: none;
    transition: 0.2s ease;
  }

  .yuma-input-wrapper input::placeholder {
    color: #919bad;
  }

  .yuma-input-wrapper input:focus {
    border-color: #9bd400;
    box-shadow: 0 0 0 4px rgba(155, 212, 0, 0.14);
  }

  #yumaPassword {
    padding-right: 55px;
  }

  .yuma-show-password {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 5;
  }

  .yuma-show-password svg {
    display: block;
    width: 21px;
    height: 21px;
    margin: 0;
    padding: 0;
    fill: none;
    stroke: #526071;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .yuma-login-button {
    width: 100%;
    height: 56px;
    margin: 4px 0 0;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: linear-gradient(90deg, #b6e800, #91cf00);
    color: #101e30;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .yuma-login-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(145, 207, 0, 0.28);
  }

  .yuma-login-button:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
    box-shadow: none;
  }

  .yuma-login-message {
    min-height: 20px;
    margin: 18px 0 0;
    color: #687386;
    text-align: center;
    font-size: 14px;
  }

  .yuma-forgot-password {
    width: 100%;
    margin: 10px 0 0;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #4169b2;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .yuma-forgot-password:hover {
    text-decoration: underline;
  }

  .yuma-reset-form {
    display: none;
  }

  .yuma-reset-form.active {
    display: block;
  }

  .yuma-reset-form h2 {
    margin: 0;
    color: #101e30;
    text-align: center;
    font-size: 28px;
  }

  .yuma-reset-subtitle {
    margin: 10px 0 28px;
    color: #687386;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
  }

  @media (max-width: 600px) {
    .yuma-login-section {
      min-height: 560px;
      padding: 35px 16px;
    }

    .yuma-login-card {
      padding: 34px 24px 40px;
      border-radius: 14px;
    }

    .yuma-logo-login img {
      width: 250px;
    }

    .yuma-login-card h1 {
      font-size: 29px;
    }
  }
</style>


<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const SUPABASE_URL = "https://zfssibbdzxpkosmcygrv.supabase.co";
  const SUPABASE_KEY = "sb_publishable_ShxSSf-00SrcHPhSlIeFnQ_23Bra78H";
  const LOGIN_URL = "https://yumasportsactivities.com/coach-portal";
  const DASHBOARD_URL = "/coach-dashboard";

  if (!window.supabase) {
    console.error("Supabase library did not load.");
    return;
  }

  const client = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

  const loginForm = document.getElementById("yumaCoachLogin");
  const resetForm = document.getElementById("yumaResetPasswordForm");
  const emailInput = document.getElementById("yumaUsername");
  const passwordInput = document.getElementById("yumaPassword");
  const showPasswordButton = document.getElementById("yumaShowPassword");
  const loginMessage = document.getElementById("yumaLoginMessage");
  const loginButton = document.getElementById("yumaLoginButton");
  const forgotButton = document.getElementById("yumaForgotPassword");
  const newPasswordInput = document.getElementById("yumaNewPassword");
  const confirmPasswordInput = document.getElementById("yumaConfirmPassword");
  const resetButton = document.getElementById("yumaResetButton");
  const resetMessage = document.getElementById("yumaResetMessage");

  function showLogin() {
    loginForm.style.display = "block";
    resetForm.classList.remove("active");
  }

  function showReset() {
    loginForm.style.display = "none";
    resetForm.classList.add("active");
  }

  showPasswordButton.addEventListener("click", function () {
    const hidden = passwordInput.type === "password";
    passwordInput.type = hidden ? "text" : "password";
    showPasswordButton.setAttribute("aria-label", hidden ? "Hide password" : "Show password");
  });

  client.auth.onAuthStateChange(function (event) {
    if (event === "PASSWORD_RECOVERY") {
      showReset();
    }
  });

  client.auth.getSession().then(function (result) {
    const session = result.data.session;
    const url = window.location.href.toLowerCase();
    const recoveryLink = url.includes("type=recovery") || url.includes("access_token=");

    if (session && recoveryLink) {
      showReset();
    } else {
      showLogin();
    }
  });

  loginForm.addEventListener("submit", async function (event) {
    event.preventDefault();

    loginButton.disabled = true;
    loginButton.textContent = "Signing in...";
    loginMessage.style.color = "#687386";
    loginMessage.textContent = "Checking your account...";

    const result = await client.auth.signInWithPassword({
      email: emailInput.value.trim().toLowerCase(),
      password: passwordInput.value
    });

    if (result.error) {
      loginMessage.style.color = "#d64444";
      loginMessage.textContent = "Incorrect email or password.";
      loginButton.disabled = false;
      loginButton.textContent = "Log In";
      return;
    }

    window.location.href = DASHBOARD_URL;
  });

  forgotButton.addEventListener("click", async function () {
    const email = emailInput.value.trim().toLowerCase();

    if (!email) {
      loginMessage.style.color = "#d64444";
      loginMessage.textContent = "Enter your email first.";
      emailInput.focus();
      return;
    }

    forgotButton.disabled = true;
    forgotButton.textContent = "Sending...";
    loginMessage.style.color = "#687386";
    loginMessage.textContent = "Sending password reset email...";

    const result = await client.auth.resetPasswordForEmail(email, {
      redirectTo: LOGIN_URL
    });

    if (result.error) {
      console.error(result.error);
      loginMessage.style.color = "#d64444";
      loginMessage.textContent = "Could not send the reset email: " + result.error.message;
    } else {
      loginMessage.style.color = "#438819";
      loginMessage.textContent = "Reset email sent. Check your inbox.";
    }

    forgotButton.disabled = false;
    forgotButton.textContent = "Forgot Password?";
  });

  resetForm.addEventListener("submit", async function (event) {
    event.preventDefault();

    const newPassword = newPasswordInput.value;
    const confirmPassword = confirmPasswordInput.value;

    if (newPassword.length < 8) {
      resetMessage.style.color = "#d64444";
      resetMessage.textContent = "Password must have at least 8 characters.";
      return;
    }

    if (newPassword !== confirmPassword) {
      resetMessage.style.color = "#d64444";
      resetMessage.textContent = "Passwords do not match.";
      return;
    }

    const sessionResult = await client.auth.getSession();
    if (!sessionResult.data.session) {
      resetMessage.style.color = "#d64444";
      resetMessage.textContent = "This reset link is invalid or expired. Request a new one.";
      return;
    }

    resetButton.disabled = true;
    resetButton.textContent = "Saving...";

    const result = await client.auth.updateUser({ password: newPassword });

    if (result.error) {
      resetMessage.style.color = "#d64444";
      resetMessage.textContent = "Could not update the password: " + result.error.message;
      resetButton.disabled = false;
      resetButton.textContent = "Save New Password";
      return;
    }

    await client.auth.signOut();
    resetMessage.style.color = "#438819";
    resetMessage.textContent = "Password updated. Returning to login...";

    setTimeout(function () {
      window.location.href = LOGIN_URL;
    }, 1200);
  });
});
</script>


YUMA sports & activities

 space dedicated to the athletic, recreational, and personal development of children, youth, and adults. Inspired by the values of I don't give up, Unity, Mindset, and Attitude, YUMA offers tennis training, physical activities, and educational programs that promote effort, discipline, and teamwork at every stage of life.