activation.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Activate Student Account | Formstead University</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    />
  </head>
  <body class="authentication-page activation-page">
    <header class="auth-header">
      <div class="auth-header-container">
        <a href="index.html" class="brand auth-brand">
          <div class="brand-logo">F</div>
          <div>
            <span class="brand-name">Formstead University</span>
            <small>Student Portal</small>
          </div>
        </a>

        <div class="auth-header-right">
          <span>Need help?</span>
          <a href="contact.html">Contact ICT</a>
        </div>
      </div>
    </header>

    <main class="authentication-main activation-main">
      <div class="authentication-wrapper activation-wrapper">
        <section class="authentication-intro activation-intro">
          <span class="auth-label">STUDENT PORTAL</span>
          <h1>Activate your account.</h1>
          <p class="auth-description">
            Complete the steps below to verify your student identity and
            activate secure access to your academic records, timetable, fees and
            student services.
          </p>

          <div class="auth-services">
            <div class="auth-service">
              <div class="auth-service-icon">
                <i class="fa-solid fa-user-check"></i>
              </div>
              <div>
                <strong>Student Verification</strong>
                <span>Confirm your identity using your academic details.</span>
              </div>
            </div>

            <div class="auth-service">
              <div class="auth-service-icon">
                <i class="fa-solid fa-shield-halved"></i>
              </div>
              <div>
                <strong>Secure Setup</strong>
                <span>Create a strong password and recovery preferences.</span>
              </div>
            </div>

            <div class="auth-service">
              <div class="auth-service-icon">
                <i class="fa-solid fa-arrow-right-to-bracket"></i>
              </div>
              <div>
                <strong>Portal Access</strong>
                <span
                  >Start using your dashboard after approval and
                  activation.</span
                >
              </div>
            </div>
          </div>

          <div class="auth-session-card">
            <div class="auth-session-icon">
              <i class="fa-solid fa-calendar-check"></i>
            </div>
            <div class="auth-session-content">
              <span>CURRENT ACADEMIC SESSION</span>
              <strong>2025 / 2026</strong>
              <small>Second Semester</small>
            </div>
            <div class="session-status">
              <span class="session-dot"></span>
              Active
            </div>
          </div>
        </section>

        <section class="authentication-form-section activation-form-section">
          <div class="authentication-card activation-card">
            <div class="authentication-card-header activation-card-header">
              <div class="login-icon">
                <i class="fa-solid fa-user-plus"></i>
              </div>
              <h2>First-Time Student Activation</h2>
              <p>
                Use the details from your admission record to complete setup.
              </p>
            </div>

            <div class="stepper" aria-label="Account activation progress">
              <div class="stepper-track">
                <span class="stepper-fill" id="stepperFill"></span>
              </div>
              <div class="stepper-labels">
                <span class="step active">1. Identity</span>
                <span class="step">2. Contact</span>
                <span class="step">3. Security</span>
              </div>
            </div>

            <form id="activationForm" class="activation-form" novalidate>
              <div class="activation-step active" data-step="1">
                <div class="form-field">
                  <label for="activation-matric">Matric Number *</label>
                  <div class="input-wrapper">
                    <i class="fa-solid fa-id-card"></i>
                    <input
                      id="activation-matric"
                      name="matric_number"
                      class="auth-input"
                      type="text"
                      placeholder="CU/CS/2026/001"
                      autocomplete="username"
                      spellcheck="false"
                      required
                    />
                  </div>
                </div>

                <div class="form-field">
                  <label for="activation-surname">Surname *</label>
                  <input
                    id="activation-surname"
                    name="surname"
                    class="auth-input"
                    type="text"
                    placeholder="Enter your surname"
                    autocomplete="family-name"
                    required
                  />
                </div>

                <div class="form-field">
                  <label for="activation-dob">Date of Birth *</label>
                  <input
                    id="activation-dob"
                    name="dob"
                    class="auth-input"
                    type="date"
                    required
                  />
                </div>
              </div>

              <div class="activation-step" data-step="2">
                <div class="form-field">
                  <label for="activation-email">Email Address *</label>
                  <div class="input-wrapper">
                    <i class="fa-solid fa-envelope"></i>
                    <input
                      id="activation-email"
                      name="email"
                      class="auth-input"
                      type="email"
                      placeholder="name@example.com"
                      autocomplete="email"
                      inputmode="email"
                      required
                    />
                  </div>
                </div>

                <div class="form-field">
                  <label for="activation-phone">Phone Number *</label>
                  <div class="phone-group">
                    <select
                      id="activation-country-code"
                      name="country_code"
                      class="country-select"
                      aria-label="Country code"
                    >
                      <option value="+234" selected>+234</option>
                      <option value="+1">+1</option>
                      <option value="+44">+44</option>
                      <option value="+233">+233</option>
                      <option value="+254">+254</option>
                    </select>
                    <input
                      id="activation-phone"
                      name="phone"
                      class="auth-input phone-input"
                      type="tel"
                      placeholder="0803 000 0000"
                      autocomplete="tel"
                      inputmode="tel"
                      required
                    />
                  </div>
                </div>

                <div class="info-box">
                  <strong>Identity check</strong>
                  <p>
                    Your record will be validated against the admission
                    database. If your details do not match, contact the Registry
                    or ICT Help Desk.
                  </p>
                </div>
              </div>

              <div class="activation-step" data-step="3">
                <div class="form-field">
                  <label for="activation-password">Create Password *</label>
                  <div class="input-wrapper">
                    <i class="fa-solid fa-lock"></i>
                    <input
                      id="activation-password"
                      name="password"
                      class="auth-input"
                      type="password"
                      placeholder="Create a secure password"
                      autocomplete="new-password"
                      minlength="8"
                      required
                    />
                    <button
                      type="button"
                      class="password-toggle"
                      data-target="activation-password"
                      aria-label="Show password"
                    >
                      <i class="fa-regular fa-eye"></i>
                    </button>
                  </div>
                </div>

                <div class="form-field">
                  <label for="activation-confirm">Confirm Password *</label>
                  <div class="input-wrapper">
                    <i class="fa-solid fa-lock"></i>
                    <input
                      id="activation-confirm"
                      name="confirm_password"
                      class="auth-input"
                      type="password"
                      placeholder="Re-enter your password"
                      autocomplete="new-password"
                      minlength="8"
                      required
                    />
                    <button
                      type="button"
                      class="password-toggle"
                      data-target="activation-confirm"
                      aria-label="Show password"
                    >
                      <i class="fa-regular fa-eye"></i>
                    </button>
                  </div>
                </div>

                <label class="terms-option">
                  <input
                    type="checkbox"
                    id="activation-terms"
                    name="terms"
                    required
                  />
                  <span
                    >I agree to the Terms of Service and Privacy Policy</span
                  >
                </label>

                <div class="password-strength" aria-live="polite">
                  <span class="strength-bar"></span>
                  <span class="strength-bar"></span>
                  <span class="strength-bar"></span>
                </div>
                <small id="activation-strength-text" class="input-hint"
                  >Use at least 8 characters with a mix of letters and
                  numbers.</small
                >
              </div>

              <div
                id="activationStatus"
                class="form-status"
                aria-live="polite"
              ></div>

              <div class="activation-actions">
                <button
                  type="button"
                  class="btn btn-secondary btn-back"
                  id="prevStep"
                >
                  Back
                </button>
                <button type="button" class="login-submit" id="nextStep">
                  <span>Continue</span>
                  <i class="fa-solid fa-arrow-right"></i>
                </button>
              </div>
            </form>

            <div class="login-help">
              <span>Already activated your portal?</span>
              <a href="login.html">Sign in</a>
            </div>
          </div>
        </section>
      </div>
    </main>

    <footer class="auth-footer">
      <div class="auth-footer-inner">
        <p>© 2026 Formstead University</p>
        <div class="auth-footer-links">
          <a href="index.html">Home</a>
          <a href="contact.html">Contact</a>
          <a href="privacy.html">Privacy Policy</a>
          <a href="terms.html">Terms of Service</a>
        </div>
      </div>
    </footer>

    <script>
      const activationSteps = Array.from(
        document.querySelectorAll(".activation-step"),
      )
      const stepLabels = Array.from(document.querySelectorAll(".step"))
      const stepperFill = document.getElementById("stepperFill")
      const nextButton = document.getElementById("nextStep")
      const prevButton = document.getElementById("prevStep")
      const statusBox = document.getElementById("activationStatus")
      const passwordInput = document.getElementById("activation-password")
      const confirmInput = document.getElementById("activation-confirm")
      const strengthBars = Array.from(
        document.querySelectorAll(".strength-bar"),
      )
      const strengthText = document.getElementById("activation-strength-text")
      const form = document.getElementById("activationForm")
      let currentStep = 0

      function renderStep() {
        activationSteps.forEach((step, index) => {
          step.classList.toggle("active", index === currentStep)
        })

        stepLabels.forEach((label, index) => {
          label.classList.toggle("active", index === currentStep)
          label.classList.toggle("done", index < currentStep)
        })

        const progress = ((currentStep + 1) / activationSteps.length) * 100
        stepperFill.style.width = `${progress}%`

        prevButton.style.visibility = currentStep === 0 ? "hidden" : "visible"

        if (currentStep === activationSteps.length - 1) {
          nextButton.innerHTML =
            '<span>Activate Account</span><i class="fa-solid fa-check"></i>'
        } else {
          nextButton.innerHTML =
            '<span>Continue</span><i class="fa-solid fa-arrow-right"></i>'
        }
      }

      function validateCurrentStep() {
        const step = activationSteps[currentStep]
        const fields = Array.from(step.querySelectorAll("input, select"))

        for (const field of fields) {
          if (field.required && !field.value.trim()) {
            field.classList.add("is-invalid")
            statusBox.textContent =
              "Please complete the required details before continuing."
            statusBox.className = "form-status error"
            field.focus()
            return false
          }

          field.classList.remove("is-invalid")
        }

        if (currentStep === 2) {
          if (passwordInput.value.length < 8) {
            passwordInput.classList.add("is-invalid")
            statusBox.textContent = "Password must be at least 8 characters."
            statusBox.className = "form-status error"
            passwordInput.focus()
            return false
          }

          if (passwordInput.value !== confirmInput.value) {
            confirmInput.classList.add("is-invalid")
            statusBox.textContent =
              "Passwords do not match. Please re-enter them."
            statusBox.className = "form-status error"
            confirmInput.focus()
            return false
          }

          const checkbox = document.getElementById("activation-terms")
          if (!checkbox.checked) {
            statusBox.textContent =
              "You must accept the Terms of Service and Privacy Policy."
            statusBox.className = "form-status error"
            checkbox.focus()
            return false
          }
        }

        statusBox.textContent = ""
        statusBox.className = "form-status"
        return true
      }

      nextButton.addEventListener("click", () => {
        if (!validateCurrentStep()) return

        if (currentStep < activationSteps.length - 1) {
          currentStep += 1
          renderStep()
          return
        }

        statusBox.textContent =
          "Activation request submitted. Your account is pending verification by the Registry or ICT team."
        statusBox.className = "form-status success"
        nextButton.disabled = true
        prevButton.disabled = true
      })

      prevButton.addEventListener("click", () => {
        if (currentStep > 0) {
          currentStep -= 1
          renderStep()
        }
      })

      function evaluateStrength(value) {
        let score = 0
        if (value.length >= 8) score += 1
        if (/[A-Z]/.test(value) && /[a-z]/.test(value)) score += 1
        if (/[0-9]/.test(value)) score += 1
        if (/[^A-Za-z0-9]/.test(value)) score += 1

        if (score <= 1) return { label: "Weak", tone: "weak" }
        if (score === 2 || score === 3)
          return { label: "Moderate", tone: "moderate" }
        return { label: "Strong", tone: "strong" }
      }

      function updateStrength() {
        const value = passwordInput.value
        const { label, tone } = evaluateStrength(value)

        strengthBars.forEach((bar, index) => {
          bar.classList.remove("active", "weak", "moderate", "strong")
          if (index < (label === "Weak" ? 1 : label === "Moderate" ? 2 : 3)) {
            bar.classList.add("active", tone)
          }
        })

        strengthText.textContent = `Password strength: ${label}`
      }

      passwordInput.addEventListener("input", updateStrength)

      document.querySelectorAll(".password-toggle").forEach((toggle) => {
        toggle.addEventListener("click", () => {
          const target = document.getElementById(toggle.dataset.target)
          const isPassword = target.type === "password"
          target.type = isPassword ? "text" : "password"
          toggle.innerHTML = isPassword
            ? '<i class="fa-regular fa-eye-slash"></i>'
            : '<i class="fa-regular fa-eye"></i>'
        })
      })

      renderStep()
    </script>
  </body>
</html>