ghost-theme/subscribe.hbs at main · TriTAG/ghost-theme · 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
{{!< default }}

<div class="gh-canvas">
<div class="p-inner gh-content">

{{#unless @member}}

<form data-members-form="subscribe" class="tritag-signup-form">
    <header><h1 >{{@site.title}}</h1></header>
    <section>
        <div class="signin-pointer">
          <p>Already have an account? <a href="/#/portal/signin">Sign in with your email</a></p>
        </div>

        <div>
            <section class="field-container">
                <div class="field-label-container"><label for="input-name" class="input-label"> Name </label></div>
                <input data-members-name id="input-name" type="text" name="name" placeholder="Jamie Larson" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="" aria-label="Name" value="" required>
            </section>
            <section class="field-container">
                <div class="field-label-container"><label for="input-email" class="input-label"> Email </label></div>
                <input data-members-email id="input-email" type="email" name="email" placeholder="jamie@example.com" tabindex="2" autocomplete="off" autocorrect="off" autocapitalize="none" aria-label="Email" value="" required>
            </section>

            <fieldset class="location field-container">
              <legend>Select your city or township:</legend>

              <div>
                <input class="radio" type="radio" id="kitchener" name="city" value="Kitchener" required/>
                <label for="kitchener">City of Kichener</label>
              </div>

              <div>
                <input class="radio" type="radio" id="waterloo" name="city" value="Waterloo" required/>
                <label for="waterloo">City of Waterloo</label>
              </div>

              <div>
                <input class="radio" type="radio" id="cambridge" name="city" value="Cambridge" required/>
                <label for="cambridge">City of Cambridge</label>
              </div>

              <div>
                <input class="radio" type="radio" id="north-dumfries" name="city" value="North Dumfries" required/>
                <label for="north-dumfries">North Dumfries</label>
              </div>

              <div>
                <input class="radio" type="radio" id="wellesley" name="city" value="Wellesley" required/>
                <label for="wellesley">Wellesley</label>
              </div>

              <div>
                <input class="radio" type="radio" id="wilmot" name="city" value="Wilmot" required/>
                <label for="Wilmot">Wilmot</label>
              </div>

              <div>
                <input class="radio" type="radio" id="woolwich" name="city" value="Woolwich" required/>
                <label for="woolwich">Woolwich</label>
              </div>

              <div>
                <input class="radio" type="radio" id="external" name="city" value="Non-WR Resident" required/>
                <label for="external"><span style="color: var(--ghost-accent-color)">I don't live in Waterloo Region</span></label>
              </div>
            </fieldset>

            <fieldset class="newsletters field-container">
              <legend>Which newsletters would you like to subscribe to?</legend>
              {{#get "newsletters"}}
                  {{#foreach newsletters}}
                    <div>

                    <label>
                      <input class="radio" type="checkbox" value="{{name}}" onChange="this.toggleAttribute('data-members-newsletter')"/>
                      <span>{{name}}</span>
                      <p class="description">{{description}}</p>
                    </label>

                    </div>
                  {{/foreach}}
              {{/get}}
            </fieldset>
            <button class="signup-btn" style="color: white; background-color: var(--ghost-accent-color); width: 100%;" type="submit" tabindex="3">Subscribe</button>
        </div>

        <div class="status">
            <p class="loading">Processing, please wait.</p>
            <p class="error">Something's gone wrong.</p>
            <p class="success">Success! Check your inbox for an email.</p>
        </div>
        <p data-members-error></p>
        <div class="signin-pointer">
          <p>Already have an account? <a href="/#/portal/signin">Sign in with your email</a></p>
        </div>

    </section>
</form>

<script>
const locationInputs = document.querySelectorAll("fieldset.location input");
locationInputs.forEach((e) => {
  e.addEventListener("input", (e) => {
    // Remove existing label data attributes.
    locationInputs.forEach((inp) => inp.removeAttribute("data-members-label"))
    // Add the right label.
    e.srcElement.setAttribute("data-members-label", "");
  });
});
// HACK: auto-select all lists
const newsletterInputs = document.querySelectorAll("fieldset.newsletters input");
newsletterInputs.forEach((e) => e.click());
</script>

{{else}}
    <p>You're already signed in, you can <a href="#/portal/account" data-portal="account"> manage your subscription</a>.</p>
{{/unless}}

</div>
</div>