Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@ukutaht
ukutaht committed Nov 27, 2020
1 parent a92bca2 commit 28990c6
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 71 deletions.
39 changes: 39 additions & 0 deletions lib/plausible_web/templates/auth/_onboarding_steps.html.eex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<div class="pt-6 px-4 sm:px-6 lg:px-8">
<nav class="flex justify-center">
<ol class="space-y-6">
<%= for {step, index} <- Enum.with_index(["Register account", "Activate account", "Add site", "Install snippet"]) do %>
<%= if index < @current_step do %>
<!-- Complete Step -->
<li class="flex items-start">
<span class="flex-shrink-0 relative h-5 w-5 flex items-center justify-center">
<svg class="h-full w-full text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</span>
<span class="ml-3 text-sm font-medium text-gray-500"><%= step %></span>
</li>
<% end %>
<%= if index == @current_step do %>
<!-- Current Step -->
<li class="flex items-start">
<span class="flex-shrink-0 h-5 w-5 relative flex items-center justify-center">
<span class="absolute h-4 w-4 rounded-full bg-indigo-200"></span>
<span class="relative block w-2 h-2 bg-indigo-600 rounded-full"></span>
</span>
<span class="ml-3 text-sm font-medium text-indigo-600"><%= step %></span>
</li>
<% end %>
<%= if index > @current_step do %>
<!-- Upcoming Step -->
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 relative flex items-center justify-center">
<div class="h-2 w-2 bg-gray-300 rounded-full"></div>
</div>
<p class="ml-3 text-sm font-medium text-gray-500"><%= step %></p>
</li>
<% end %>
<% end %>

</ol>
</nav>
</div>
2 changes: 1 addition & 1 deletion lib/plausible_web/templates/auth/login_form.html.eex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<%= submit "Login →", class: "button mt-4 w-full" %>
<%= if !Keyword.fetch!(Application.get_env(:plausible, :selfhost),:disable_registration) do %>
<p class="text-center text-gray-500 text-xs mt-4">
Don't have an account? <%= link("Register", to: "/register") %> instead.
Don't have an account? <%= link("Register", to: "/register", class: "underline text-gray-800") %> instead.
</p>
<% end %>
<% end %>
91 changes: 32 additions & 59 deletions lib/plausible_web/templates/auth/register_form.html.eex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,42 @@
<div class="text-xl font-medium">Set up privacy-friendly analytics with just a few clicks</div>
</div>

<div>
<div class="w-full max-w-3xl mt-4 mx-auto flex">
<%= form_for @changeset, "/register", [class: "w-full max-w-md mx-auto bg-white shadow-md rounded px-8 py-6 mb-4 mt-8", id: "register-form"], fn f -> %>
<h2 class="text-xl font-black">Enter your details</h2>
<div class="my-4">
<%= label f, :name, "Full name", class: "block text-gray-700 text-sm font-bold mb-2" %>
<%= text_input f, :name, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "Jane Doe" %>
<%= error_tag f, :name %>
<div class="w-full max-w-3xl mt-4 mx-auto flex">
<%= form_for @changeset, "/register", [class: "w-full max-w-md mx-auto bg-white shadow-md rounded px-8 py-6 mb-4 mt-8", id: "register-form"], fn f -> %>
<h2 class="text-xl font-black">Enter your details</h2>
<div class="my-4">
<%= label f, :name, "Full name", class: "block text-sm font-medium text-gray-700" %>
<div class="mt-1">
<%= text_input f, :name, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "Jane Doe" %>
</div>
<div class="my-4">
<%= label f, :email, class: "block text-gray-700 text-sm font-bold mb-2" %>
<p class="text-gray-600 text-xs mt-1 mb-2">No spam, guaranteed.</p>
<%= email_input f, :email, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "[email protected]" %>
<%= error_tag f, :email %>
<%= error_tag f, :name %>
</div>
<div class="my-4">
<%= label f, :email, class: "block text-sm font-medium text-gray-700" %>
<p class="text-xs text-gray-500 mt-1">No spam, guaranteed.</p>
<div class="mt-1">
<%= email_input f, :email, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "[email protected]" %>
</div>
<%= error_tag f, :email %>
</div>

<%= if PlausibleWeb.Captcha.enabled?() do %>
<div class="mt-4">
<div class="h-captcha" data-sitekey="<%= PlausibleWeb.Captcha.sitekey() %>"></div>
<%= if assigns[:captcha_error] do %>
<div class="text-red-500 text-xs italic mt-3"><%= @captcha_error %></div>
<% end %>
<script src="https://hcaptcha.com/1/api.js" async defer></script>
</div>
<% end %>
<%= if PlausibleWeb.Captcha.enabled?() do %>
<div class="mt-4">
<div class="h-captcha" data-sitekey="<%= PlausibleWeb.Captcha.sitekey() %>"></div>
<%= if assigns[:captcha_error] do %>
<div class="text-red-500 text-xs italic mt-3"><%= @captcha_error %></div>
<% end %>
<script src="https://hcaptcha.com/1/api.js" async defer></script>
</div>
<% end %>

<%= submit "Start my free trial →", class: "button mt-4 w-full" %>
<%= submit "Start my free trial →", class: "button mt-4 w-full" %>

<p class="text-center text-gray-600 text-xs mt-4">
Already have an account? <%= link("Log in", to: "/login", class: "underline text-gray-800") %> instead.
</p>
<% end %>
<div class="pt-12 pl-8 hidden md:block">
<ul class="mt-2 leading-loose">
<li>
<svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
Quick and easy to set up
</li>
<li>
<svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
No credit card required
</li>
<li>
<svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
Unlimited use during the trial
</li>
<li>
<svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
From just $6/mo after the trial
</li>
</ul>
</div>
<p class="text-center text-gray-600 text-xs mt-4">
Already have an account? <%= link("Log in", to: "/login", class: "underline text-gray-800") %> instead.
</p>
<% end %>
<div class="pt-12 pl-8 hidden md:block">
<%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 0) %>
</div>
</div>
42 changes: 32 additions & 10 deletions lib/plausible_web/templates/auth/register_success.html.eex
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,34 @@
<div class="bg-white max-w-md w-full mx-auto shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8">
<h2 class="text-xl font-black">Success!</h2>
<div class="my-4 leading-tight">
We've sent an activation link to <b><%= @email %></b>. Please click on the link to activate your account.
</div>
<div class="mt-8 text-sm">
Didn't receive an email?
</div>
<div class="mt-2 text-sm text-gray-600 leading-tight">
Please check your spam folder and contact <a href="mailto:[email protected]">[email protected]</a> if the problem persists
<div class="mx-auto mt-6 text-center">
<h1 class="text-3xl font-black">Register your 30-day unlimited-use free trial</h1>
<div class="text-xl font-medium">Set up privacy-friendly analytics with just a few clicks</div>
</div>


<div class="w-full max-w-4xl mt-4 mx-auto flex">
<%= form_for @conn, "/claim-activation", [class: "w-full max-w-lg mx-auto bg-white shadow-md rounded px-8 py-6 mb-4 mt-8", id: "register-form"], fn f -> %>
<h2 class="text-xl font-black">Activate your account</h2>

<div class="mt-2 text-sm text-gray-500 leading-tight">
Please enter the 4-digit code we sent to <b><%= @email %></b>
</div>

<div class="mt-12 flex items-stretch flex-grow">
<div>
<%= text_input f, :code, class: "tracking-widest font-medium shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-36 px-8 border-gray-300 rounded-l-md", oninput: "this.value=this.value.replace(/[^0-9]/g, ''); if (this.value.length >= 4) document.getElementById('submit').focus()", onclick: "this.select();", maxlength: "4", placeholder: "••••", style: "letter-spacing: 10px;" %>
<%= error_tag f, :name %>
</div>
<button id="submit" class="button rounded-l-none">Activate &rarr;</button>
</div>

<div class="mt-16 text-sm">
Didn't receive an email?
</div>
<div class="mt-2 text-sm text-gray-500 leading-tight">
Please check your spam folder and contact <a class="underline text-gray-800" href="mailto:[email protected]">[email protected]</a> if the problem persists
</div>
<% end %>

<div class="pt-12 pl-8 hidden md:block">
<%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 1) %>
</div>
</div>
2 changes: 1 addition & 1 deletion lib/plausible_web/views/error_helpers.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ defmodule PlausibleWeb.ErrorHelpers do

def error_tag(form, field) do
Enum.map(Keyword.get_values(form.errors, field), fn error ->
content_tag(:div, elem(error, 0), class: "text-red-500 text-xs italic mt-3")
content_tag(:div, elem(error, 0), class: "mt-2 text-sm text-red-600")
end)
end
end

0 comments on commit 28990c6

Please sign in to comment.