VS/activate.html at main · nags-git/VS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Activate — Veteran Strong</title>
    <meta name="description" content="Identity verification + feature activation for credit monitoring." />
    <link rel="stylesheet" href="assets/css/styles.css" />
    <link rel="stylesheet" href="assets/css/pages.css" />
  </head>
  <body class="portal-body--credit">
    <a href="#main" class="vs-skip">Skip to content</a>

    <div class="vs-page">
      <header data-portal-nav data-current="credit"></header>
      <nav data-portal-subnav data-current="dashboard"></nav>

      <main id="main" class="vs-main vs-container">
        <section class="vs-section vs-text-center" aria-labelledby="activate-title">
          <p class="vs-eyebrow">Enroll &amp; verify</p>
          <h1 id="activate-title" class="vs-h1 vs-mt-3">Activate credit monitoring.</h1>
          <p class="vs-lead vs-mt-3 vs-measure-narrow vs-mx-auto">Members must pass identity verification before consumer credit data is displayed in the portal.</p>
        </section>

        <section class="vs-section dash-row" aria-label="Member status and feature activation">
          <article class="vs-card vs-card--lg">
            <h2 class="vs-h3">Member status</h2>
            <p class="vs-card__sub vs-mt-3">A simple, non-technical view of where the member is in the activation process.</p>

            <ol class="vs-steps vs-mt-6">
              <li>
                <span class="vs-steps__num">1</span>
                <div class="vs-steps__body">
                  <strong>Identity verified</strong>
                  <span>Government and consumer ID checks completed and profile fields set.</span>
                </div>
                <span class="vs-chip vs-chip--done">Done</span>
              </li>
              <li>
                <span class="vs-steps__num">2</span>
                <div class="vs-steps__body">
                  <strong>Consumer enrolled</strong>
                  <span>CES enrollment linked to Veteran Strong member ID.</span>
                </div>
                <span class="vs-chip vs-chip--done">Done</span>
              </li>
              <li>
                <span class="vs-steps__num">3</span>
                <div class="vs-steps__body">
                  <strong>Features assigned</strong>
                  <span>Credit report, score, monitoring, flashback, optimal path, and ID protection are active.</span>
                </div>
                <span class="vs-chip vs-chip--done">Done</span>
              </li>
              <li>
                <span class="vs-steps__num">4</span>
                <div class="vs-steps__body">
                  <strong>Fulfillment ready</strong>
                  <span>Report and alert delivery channels are configured.</span>
                </div>
                <span class="vs-chip vs-chip--done">Done</span>
              </li>
            </ol>

            <div class="vs-mt-8">
              <a class="vs-btn" href="dashboard.html">Continue to dashboard</a>
            </div>
          </article>

          <article class="vs-card vs-card--lg">
            <h2 class="vs-h3">Feature activation</h2>
            <p class="vs-card__sub vs-mt-3">Internal feature codes are visible here only for implementation alignment.</p>

            <div class="vs-mt-6" id="features"></div>
          </article>
        </section>

        <section class="vs-section" aria-label="Compliance footer">
          <div class="vs-grid vs-grid--3">
            <article class="vs-card">
              <p class="vs-eyebrow">Rule</p>
              <h3 class="vs-h4 vs-mt-3">Verified gate</h3>
              <p class="vs-card__sub vs-mt-3">Score, report and alert data remain hidden until verification and enrollment succeed.</p>
            </article>
            <article class="vs-card">
              <p class="vs-eyebrow">PII protection</p>
              <h3 class="vs-h4 vs-mt-3">Masked display</h3>
              <p class="vs-card__sub vs-mt-3">SSN, account numbers, and identifiers are masked by default.</p>
            </article>
            <article class="vs-card">
              <p class="vs-eyebrow">Audit</p>
              <h3 class="vs-h4 vs-mt-3">Consent record</h3>
              <p class="vs-card__sub vs-mt-3">Capture consent version, timestamp, member ID, source screen, and channel.</p>
            </article>
          </div>
        </section>
      </main>

      <footer data-portal-footer></footer>
    </div>

    <script src="assets/js/portal-chrome.js"></script>

    <script type="module">
      import { loadData } from "./assets/js/data.js";
      import { markActiveNav } from "./assets/js/nav.js";

      markActiveNav(""); // not in primary nav
      const data = await loadData();
      const features = document.getElementById("features");
      features.innerHTML = data.features.map((f) => `
        <div class="activate-flag">
          <div>
            <p class="activate-flag__code">${f.code}</p>
            <p class="activate-flag__label">${f.label}</p>
          </div>
          <span class="vs-chip vs-chip--${f.active ? "active" : "optional"}">${f.active ? "Active" : "Inactive"}</span>
        </div>
      `).join("");
    </script>
  </body>
</html>