Members templates

This commit is contained in:
John O'Nolan 2019-12-06 16:25:42 +07:00
parent 799280d03a
commit 6eb9a1218f
5 changed files with 215 additions and 15 deletions

37
members/account.hbs Normal file
View file

@ -0,0 +1,37 @@
{{!< ../default}}
<div class="gh-page">
<div class="gh-container">
{{#if @member.paid}}
{{!-- Logged in, paying member: Show account info --}}
<div class="account-box">
<h2 class="account-box-title">Nice, you're a subscriber!</h2>
<p>Hey! <strong>{{@member.email}}</strong> has an active {{@site.title}} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.</p>
</div>
{{else if @member}}
{{!-- Logged in, not paying: Link to checkout --}}
<div class="account-box">
<h1 class="account-box-title">Currently, you're not a subscriber</h1>
<p>Hey there! <strong>{{@member.email}}</strong> is subscribed to free updates from {{@site.title}}, but doesn't have a paid subscription to unlock full access.</p>
<div class="authbox-signup">
<a class="button primary" href="/signup/">
<span class="button-content">Subscribe now</span>
</a>
</div>
</div>
{{else}}
{{!-- Not logged in: Redirect to signin --}}
<script>window.location = '{{@site.url}}/signin/';</script>
{{/if}}
</div>
</div>
<style>.pico-cta{display:none;}</style>

34
members/signin.hbs Normal file
View file

@ -0,0 +1,34 @@
{{!< ../default}}
<div class="gh-page">
<div class="gh-container">
{{#if @member}}
{{!-- Logged in: Redirect home --}}
<script>window.location = '{{@site.url}}';</script>
{{else}}
{{!-- Not logged in: Signin form --}}
<form class="gh-auth-form" data-members-form="signin">
<h1 class="gh-auth-title">Welcome back!</h1>
<p>Sign into your account again for full access</p>
<div class="gh-auth-box">
<input class="gh-input" data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" />
<button class="gh-button gh-button-primary" type="submit">
<span class="gh-button-content">Sign in</span>
<span class="gh-button-loader">{{> "icons/loader"}}</span>
</button>
</div>
<p><small>Don't have an account yet? <a href="/signup/">Sign up</a></small></p>
<div class="message-success"><strong>Great!</strong> Check your inbox and click the link to complete signin</div>
<div class="message-error">Please enter a valid email address!</div>
</form>
{{/if}}
</div>
</div>
<style>.pico-cta{display:none;}</style>

75
members/signup.hbs Normal file
View file

@ -0,0 +1,75 @@
{{!< ../default}}
<div class="gh-page">
<div class="gh-container">
{{#if @member.paid}}
{{!-- Logged in, paying member: Redirect home --}}
<script>window.location = '{{@site.url}}';</script>
{{else if @member}}
{{!-- Logged in, not paying: Check out --}}
<div class="gh-checkout-form">
<h1 class="gh-checkout-title">Choose your subscription</h1>
<p>Unlock full access to {{@site.title}} and see the entire library of members-only content & updates</p>
<div class="gh-checkout-box">
<div class="gh-checkout-plan">
<header class="gh-checkout-plan-header">
<h3>Monthly</h3>
<span>$</span><strong>{{@price.monthly}}</strong> / month
</header>
<div class="gh-checkout-plan-content">
<ul>
<li>Full access to all private posts</li>
<li>Regular updates with new content</li>
<li>Support independent publishing</li>
<li>Simple, secure card payment</li>
</ul>
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Monthly">Choose this plan</a>
</div>
</div>
<div class="gh-checkout-plan">
<header class="gh-checkout-plan-header">
<h3>Yearly</h3>
<span>$</span><strong>{{@price.yearly}}</strong> / year
</header>
<div class="gh-checkout-plan-content">
<ul>
<li>Full access to all private posts</li>
<li>Regular updates with new content</li>
<li>Support independent publishing</li>
<li>Simple, secure card payment</li>
<li>One easy payment instead of 12!</li>
</ul>
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Yearly">Choose this plan</a>
</div>
</div>
</div>
</div>
{{else}}
{{!-- Not logged in: Sign up --}}
<form class="gh-auth-form" data-members-form="signup">
<h1 class="gh-auth-title">Signup to {{@site.title}}</h1>
<p>{{@site.description}}</p>
<div class="gh-auth-box">
<input class="gh-input" data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
<button class="gh-button gh-button-primary" type="submit">
<span class="gh-button-content">Continue</span>
<span class="gh-button-loader">{{> "icons/loader"}}</span>
</button>
</div>
<p><small>Already have an account? <a href="/signin/">Sign in</a></small></p>
<div class="message-success"><strong>Great!</strong> Check your inbox and click the link to confirm your subscription</div>
<div class="message-error">Please enter a valid email address!</div>
</form>
{{/if}}
</div>
</div>
<style>.pico-cta{display:none;}</style>