Skip to content

Commit 00028a3

Browse files
mjl-mjl-
committed
tweaks to signup page so people are more likely to use the signup-by-email
1 parent 9e2efb8 commit 00028a3

File tree

3 files changed

+52
-47
lines changed

3 files changed

+52
-47
lines changed

‎index.html

+4
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@
3030
ul { margin-left: 1em; }
3131
.page > * { max-width: 50em; }
3232
.page > table { max-width: inherit; }
33+
@media (min-width:1025px) {
34+
.signupoptions { display: flex; gap: 4em; max-width: none; }
35+
.signupoptions > * { max-width: 50em; }
36+
}
3337
</style>
3438
</head>
3539
<body>

‎index.js

+8-14
Original file line numberDiff line numberDiff line change
@@ -1113,34 +1113,28 @@ const overview = async () => {
11131113
dom._kids(document.body, page);
11141114
};
11151115
const signedup = (email) => {
1116-
dom._kids(document.body, dom.div(dom._class('page'), dom.h1('Account created'), dom.p(dom.span("If all is well", attr.title('If you already have an account with essentially the same email address (wildcards removed, etc), you can not create another account via the website, only by sending us a signup email.')), ", we've sent an email to ", dom.b(email), " with a confirmation link."), dom.p("If the email is not coming in, don't forget to check your spam mailbox. Also, some mail servers employ 'grey listing', holding off first-time deliveries for up to half an hour."), dom.p("Go back ", dom.a(attr.href('#'), 'home', function click() { route(); }), '.')));
1116+
dom._kids(document.body, dom.div(dom._class('page'), dom.h1('Account created'), dom.p(dom.span("If all is well", attr.title('If you already have an account with essentially the same email address (wildcards removed, etc), you can not create another account via the website and we actually did not send you an email. You can only sign up with those similar addresses through a signup email.')), ", we've sent an email to ", dom.b(email), " with a confirmation link."), dom.p("If the email is not coming in, don't forget to check your spam mailbox. Also, some mail servers employ 'grey listing', holding off first-time deliveries for up to half an hour."), dom.p("Go back ", dom.a(attr.href('#'), 'home', function click() { route(); }), '.')));
11171117
};
11181118
const signup = (home) => {
11191119
let fieldset;
11201120
let email;
11211121
dom._kids(document.body, dom.div(dom._class('page'), dom.p('← ', dom.a(attr.href('#'), 'Home', function click() { route(); })), dom.h1('Create account'), home.SignupNote ? [
11221122
dom.pre(dom._class('mono'), style({ whiteSpace: 'pre-wrap', padding: '1em', backgroundColor: '#eee', borderRadius: '.25em' }), home.SignupNote),
11231123
dom.br(),
1124-
] : [], home.SignupEmailDisabled && home.SignupWebsiteDisabled ? dom.p('Signups are disabled at the moment, sorry.') : [],
1125-
// Only show header if there is a choice.
1126-
home.SignupEmailDisabled ? [] : [
1127-
home.SignupWebsiteDisabled ? [] : dom.h2('Option 1: Signup through email (preferred option)'),
1128-
dom.p('Send us an email with "signup for ', home.ServiceName, '" as the subject:'),
1129-
dom.p(style({ marginLeft: '3em' }), dom.a(attr.href('mailto:' + encodeURIComponent(home.SignupAddress) + '?subject=' + encodeURIComponent('signup for ' + home.ServiceName) + '&body=' + encodeURIComponent('sign me up for gopherwatch!')), home.SignupAddress)),
1130-
dom.p(`Any message body will do, it's ignored. You'll get a reply with a link to confirm and set a password, after which we'll automatically log you in. Easy.`),
1131-
home.SignupWebsiteDisabled ? [] : dom.p("Sending us the first email ", dom.span("helps your junk filter realize we're good people.", attr.title(`Because our email address will be a known correspondent in your account. It may also prevent delays in delivery. Hopefully your junk filter will seize the opportunity! On top of that, it will also prevent us from being misused into sending messages to unsuspecting people, because we only reply to messages from legitimate senders (spf/dkim/dmarc-verified). For similar reasons, you can only sign up with wildcard email addresses (like user+$anything@domain) via email and not via the website.`))),
1132-
dom.br(),
1124+
] : [], home.SignupEmailDisabled && home.SignupWebsiteDisabled ? dom.p('Signups are disabled at the moment, sorry.') : [], dom.div(dom._class('signupoptions'), home.SignupEmailDisabled ? [] : [
1125+
dom.div(
1126+
// Only show header if there is a choice.
1127+
home.SignupWebsiteDisabled ? [] : dom.h2('Option 1: Signup through email (recommended option)'), dom.p('Send us an email with "signup for ', home.ServiceName, '" as the subject:'), dom.p(style({ marginLeft: '3em' }), dom.a(attr.href('mailto:' + encodeURIComponent(home.SignupAddress) + '?subject=' + encodeURIComponent('signup for ' + home.ServiceName) + '&body=' + encodeURIComponent('sign me up for gopherwatch!')), home.SignupAddress)), dom.p(`Any message body will do, it's ignored. You'll get a reply with a link to confirm and set a password, after which we'll automatically log you in. Easy.`), home.SignupWebsiteDisabled ? [] : dom.p("Sending us the first email ", dom.span("helps your junk filter realize we're good people.", attr.title(`Because our email address will be a known correspondent in your account. It may also prevent delays in delivery. Hopefully your junk filter will seize the opportunity! On top of that, it will also prevent us from being misused into sending messages to unsuspecting people, because we only reply to messages from legitimate senders (spf/dkim/dmarc-verified). For similar reasons, you can only sign up with wildcard email addresses (like user+$anything@domain) via email and not via the website.`))), dom.br()),
11331128
], home.SignupWebsiteDisabled ? [] : [
1134-
home.SignupEmailDisabled ? [] : dom.h2('Option 2: Signup through website'),
1135-
dom.form(async function submit(e) {
1129+
dom.div(home.SignupEmailDisabled ? [] : dom.h2('Option 2: Signup through website (fallback option)'), dom.p('Please have a look at signing up with option 1 first.'), dom.form(async function submit(e) {
11361130
e.stopPropagation();
11371131
e.preventDefault();
11381132
await check(fieldset, async () => {
11391133
await client.Signup(email.value.trim());
11401134
signedup(email.value.trim());
11411135
});
1142-
}, fieldset = dom.fieldset(dom.label(style({ display: 'inline' }), 'Email address', ' ', email = dom.input(attr.type('email'), attr.required(''))), ' ', dom.submitbutton('Create account')), dom.p("We'll send you an email with a confirmation link."))
1143-
]));
1136+
}, fieldset = dom.fieldset(dom.label(style({ display: 'inline' }), 'Email address', ' ', email = dom.input(attr.type('email'), attr.required(''))), ' ', dom.submitbutton('Create account')), dom.p("We'll send you an email with a confirmation link."))),
1137+
])));
11441138
if (email && home.SignupEmailDisabled) {
11451139
email.focus();
11461140
}

‎index.ts

+40-33
Original file line numberDiff line numberDiff line change
@@ -568,40 +568,47 @@ const signup = (home: api.Home) => {
568568

569569
home.SignupEmailDisabled && home.SignupWebsiteDisabled ? dom.p('Signups are disabled at the moment, sorry.') : [],
570570

571-
// Only show header if there is a choice.
572-
home.SignupEmailDisabled ? [] : [
573-
home.SignupWebsiteDisabled ? [] : dom.h2('Option 1: Signup through email (preferred option)'),
574-
dom.p('Send us an email with "signup for ', home.ServiceName, '" as the subject:'),
575-
dom.p(style({marginLeft: '3em'}), dom.a(attr.href('mailto:'+encodeURIComponent(home.SignupAddress)+'?subject='+encodeURIComponent('signup for '+home.ServiceName) + '&body='+encodeURIComponent('sign me up for gopherwatch!')), home.SignupAddress)),
576-
dom.p(`Any message body will do, it's ignored. You'll get a reply with a link to confirm and set a password, after which we'll automatically log you in. Easy.`),
577-
home.SignupWebsiteDisabled ? [] : dom.p("Sending us the first email ", dom.span("helps your junk filter realize we're good people.", attr.title(`Because our email address will be a known correspondent in your account. It may also prevent delays in delivery. Hopefully your junk filter will seize the opportunity! On top of that, it will also prevent us from being misused into sending messages to unsuspecting people, because we only reply to messages from legitimate senders (spf/dkim/dmarc-verified). For similar reasons, you can only sign up with wildcard email addresses (like user+$anything@domain) via email and not via the website.`))),
578-
dom.br(),
579-
],
580-
581-
home.SignupWebsiteDisabled ? [] : [
582-
home.SignupEmailDisabled ? [] : dom.h2('Option 2: Signup through website'),
583-
dom.form(
584-
async function submit(e: SubmitEvent) {
585-
e.stopPropagation()
586-
e.preventDefault()
587-
588-
await check(fieldset, async () => {
589-
await client.Signup(email!.value.trim())
590-
signedup(email!.value.trim())
591-
})
592-
},
593-
fieldset=dom.fieldset(
594-
dom.label(
595-
style({display: 'inline'}),
596-
'Email address', ' ',
597-
email=dom.input(attr.type('email'), attr.required('')),
598-
),
599-
' ',
600-
dom.submitbutton('Create account'),
571+
dom.div(dom._class('signupoptions'),
572+
home.SignupEmailDisabled ? [] : [
573+
dom.div(
574+
// Only show header if there is a choice.
575+
home.SignupWebsiteDisabled ? [] : dom.h2('Option 1: Signup through email (recommended option)'),
576+
dom.p('Send us an email with "signup for ', home.ServiceName, '" as the subject:'),
577+
dom.p(style({marginLeft: '3em'}), dom.a(attr.href('mailto:'+encodeURIComponent(home.SignupAddress)+'?subject='+encodeURIComponent('signup for '+home.ServiceName) + '&body='+encodeURIComponent('sign me up for gopherwatch!')), home.SignupAddress)),
578+
dom.p(`Any message body will do, it's ignored. You'll get a reply with a link to confirm and set a password, after which we'll automatically log you in. Easy.`),
579+
home.SignupWebsiteDisabled ? [] : dom.p("Sending us the first email ", dom.span("helps your junk filter realize we're good people.", attr.title(`Because our email address will be a known correspondent in your account. It may also prevent delays in delivery. Hopefully your junk filter will seize the opportunity! On top of that, it will also prevent us from being misused into sending messages to unsuspecting people, because we only reply to messages from legitimate senders (spf/dkim/dmarc-verified). For similar reasons, you can only sign up with wildcard email addresses (like user+$anything@domain) via email and not via the website.`))),
580+
dom.br(),
601581
),
602-
dom.p("We'll send you an email with a confirmation link."),
603-
)
604-
],
582+
],
583+
584+
home.SignupWebsiteDisabled ? [] : [
585+
dom.div(
586+
home.SignupEmailDisabled ? [] : dom.h2('Option 2: Signup through website (fallback option)'),
587+
dom.p('Please have a look at signing up with option 1 first.'),
588+
dom.form(
589+
async function submit(e: SubmitEvent) {
590+
e.stopPropagation()
591+
e.preventDefault()
592+
593+
await check(fieldset, async () => {
594+
await client.Signup(email!.value.trim())
595+
signedup(email!.value.trim())
596+
})
597+
},
598+
fieldset=dom.fieldset(
599+
dom.label(
600+
style({display: 'inline'}),
601+
'Email address', ' ',
602+
email=dom.input(attr.type('email'), attr.required('')),
603+
),
604+
' ',
605+
dom.submitbutton('Create account'),
606+
),
607+
dom.p("We'll send you an email with a confirmation link."),
608+
)
609+
),
610+
],
611+
),
605612
)
606613
)
607614
if (email && home.SignupEmailDisabled) {

0 commit comments

Comments
 (0)