Port signup to new layout
This commit is contained in:
		
							parent
							
								
									1fecfe57de
								
							
						
					
					
						commit
						f36f6866a7
					
				@ -8,7 +8,7 @@ body {
 | 
			
		||||
  background-attachment: fixed;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
body#admin-panel {
 | 
			
		||||
body#admin {
 | 
			
		||||
  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
 | 
			
		||||
              url('/img/bg-1.jpg');
 | 
			
		||||
  background-size: cover;
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,10 @@ class Admin::BaseController < ApplicationController
 | 
			
		||||
 | 
			
		||||
  before_action :authenticate_user!
 | 
			
		||||
  before_action :authorize_admin
 | 
			
		||||
  before_action :set_context
 | 
			
		||||
 | 
			
		||||
  layout "admin"
 | 
			
		||||
  def set_context
 | 
			
		||||
    @context = :admin
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
end
 | 
			
		||||
 | 
			
		||||
@ -2,8 +2,6 @@ class InvitationsController < ApplicationController
 | 
			
		||||
  before_action :require_user_signed_in, except: ["show"]
 | 
			
		||||
  before_action :require_user_signed_out, only: ["show"]
 | 
			
		||||
 | 
			
		||||
  layout "signup", only: ["show"]
 | 
			
		||||
 | 
			
		||||
  # GET /invitations
 | 
			
		||||
  def index
 | 
			
		||||
    @invitations_unused = current_user.invitations.unused
 | 
			
		||||
 | 
			
		||||
@ -3,8 +3,7 @@ class SignupController < ApplicationController
 | 
			
		||||
  before_action :require_invitation
 | 
			
		||||
  before_action :set_invitation
 | 
			
		||||
  before_action :set_new_user, only: ["steps", "validate"]
 | 
			
		||||
 | 
			
		||||
  layout "signup"
 | 
			
		||||
  before_action :set_context
 | 
			
		||||
 | 
			
		||||
  def index
 | 
			
		||||
    @invited_by_name = @invitation.user.address
 | 
			
		||||
@ -105,4 +104,8 @@ class SignupController < ApplicationController
 | 
			
		||||
      invitation: @invitation
 | 
			
		||||
    )
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
  def set_context
 | 
			
		||||
    @context = :signup
 | 
			
		||||
  end
 | 
			
		||||
end
 | 
			
		||||
 | 
			
		||||
@ -1,93 +0,0 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html class="h-full">
 | 
			
		||||
  <head>
 | 
			
		||||
    <title>Admin Panel | Kosmos Accounts</title>
 | 
			
		||||
    <%= csrf_meta_tags %>
 | 
			
		||||
    <%= csp_meta_tag %>
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
			
		||||
    <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
 | 
			
		||||
    <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
 | 
			
		||||
    <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
 | 
			
		||||
    <%= javascript_importmap_tags %>
 | 
			
		||||
  </head>
 | 
			
		||||
  <body id="admin-panel" class="h-full bg-red-500">
 | 
			
		||||
    <div class="min-h-full">
 | 
			
		||||
      <nav data-controller="topbar">
 | 
			
		||||
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
 | 
			
		||||
          <div class="border-b border-gray-200/10">
 | 
			
		||||
            <div class="flex items-center justify-between h-16 px-4 sm:px-0">
 | 
			
		||||
              <div class="flex items-center">
 | 
			
		||||
                <div class="ks-site-icon flex-shrink-0">
 | 
			
		||||
                  <%= render partial: "shared/icons/comet" %>
 | 
			
		||||
                </div>
 | 
			
		||||
                <% if user_signed_in? && current_user.confirmed? %>
 | 
			
		||||
                  <div class="hidden md:block">
 | 
			
		||||
                    <div class="ml-10 flex items-baseline space-x-4">
 | 
			
		||||
                      <%= render partial: 'shared/admin_nav' %>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                <% end %>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="hidden md:block">
 | 
			
		||||
                <% if user_signed_in? %>
 | 
			
		||||
                  <div class="flex items-baseline space-x-4 text-gray-200/80 text-sm font-medium">
 | 
			
		||||
                    <span>
 | 
			
		||||
                      <strong class="text-white font-normal"><%= current_user.address %></strong>
 | 
			
		||||
                    </span>
 | 
			
		||||
                    <span>
 | 
			
		||||
                      <%= link_to "Log out", destroy_user_session_path, class: 'underline hover:text-white' %>
 | 
			
		||||
                    </span>
 | 
			
		||||
                  </div>
 | 
			
		||||
                <% end %>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="-mr-2 flex md:hidden">
 | 
			
		||||
                <button type="button" id="toggle-mobile-nav"
 | 
			
		||||
                        data-action="topbar#toggleMobileNav"
 | 
			
		||||
                        class="bg-gray-900/50 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
 | 
			
		||||
                  <span class="sr-only">Open main menu</span>
 | 
			
		||||
                  <!-- Heroicon name: outline/menu -->
 | 
			
		||||
                  <svg data-topbar-target="iconMobileMenuOpen" class="block h-6 w-6"
 | 
			
		||||
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
 | 
			
		||||
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 | 
			
		||||
                  </svg>
 | 
			
		||||
                  <!-- Heroicon name: outline/x -->
 | 
			
		||||
                  <svg data-topbar-target="iconMobileMenuClose" class="hidden h-6 w-6"
 | 
			
		||||
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
 | 
			
		||||
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 | 
			
		||||
                  </svg>
 | 
			
		||||
                </button>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div data-topbar-target="mobileMenu" class="border-b border-gray-200/10 md:hidden">
 | 
			
		||||
          <% if user_signed_in? %>
 | 
			
		||||
            <div class="px-2 py-3 space-y-1 sm:px-3">
 | 
			
		||||
              <%= render partial: 'shared/admin_nav' %>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="pt-4 pb-3 border-t border-gray-200/10">
 | 
			
		||||
              <div class="px-5 text-base font-normal text-white">
 | 
			
		||||
                <%= current_user.address %></strong>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div class="mt-3 px-2 space-y-1">
 | 
			
		||||
                <%= link_to "Log out", destroy_user_session_path,
 | 
			
		||||
                      class: 'block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900/30 active:text-white active:bg-gray-900/30' %>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        <% end %>
 | 
			
		||||
      </nav>
 | 
			
		||||
 | 
			
		||||
      <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:px-6 sm:py-4 sm:items-start sm:justify-end">
 | 
			
		||||
        <div class="flex flex-col items-end justify-center">
 | 
			
		||||
          <% flash.each do |type, data| %>
 | 
			
		||||
            <%= render NotificationComponent.new(type: type, data: data) %>
 | 
			
		||||
          <% end %>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <%= yield %>
 | 
			
		||||
    </div>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
@ -10,7 +10,7 @@
 | 
			
		||||
    <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
 | 
			
		||||
    <%= javascript_importmap_tags %>
 | 
			
		||||
  </head>
 | 
			
		||||
  <body class="h-full bg-sky-900">
 | 
			
		||||
  <body <%= @context.present? ? "id=#{@context}" : "" %> class="h-full <%= @context == :admin ? "bg-red-500" : "bg-sky-900" %>">
 | 
			
		||||
    <div class="min-h-full">
 | 
			
		||||
      <nav data-controller="topbar">
 | 
			
		||||
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
 | 
			
		||||
@ -23,7 +23,11 @@
 | 
			
		||||
                <% if user_signed_in? && current_user.confirmed? %>
 | 
			
		||||
                  <div class="hidden md:block">
 | 
			
		||||
                    <div class="ml-10 flex items-baseline space-x-4">
 | 
			
		||||
                      <%= render partial: 'shared/main_nav' %>
 | 
			
		||||
                      <% if @context == :admin %>
 | 
			
		||||
                        <%= render partial: 'shared/admin_nav' %>
 | 
			
		||||
                      <% else %>
 | 
			
		||||
                        <%= render partial: 'shared/main_nav' %>
 | 
			
		||||
                      <% end %>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                <% end %>
 | 
			
		||||
@ -64,7 +68,11 @@
 | 
			
		||||
        <div data-topbar-target="mobileMenu" class="border-b border-gray-200/10 md:hidden">
 | 
			
		||||
          <% if user_signed_in? %>
 | 
			
		||||
            <div class="px-2 py-3 space-y-1 sm:px-3">
 | 
			
		||||
              <%= render partial: 'shared/main_nav' %>
 | 
			
		||||
              <% if @context == :admin %>
 | 
			
		||||
                <%= render partial: 'shared/admin_nav' %>
 | 
			
		||||
              <% else %>
 | 
			
		||||
                <%= render partial: 'shared/main_nav' %>
 | 
			
		||||
              <% end %>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="pt-4 pb-3 border-t border-gray-200/10">
 | 
			
		||||
              <div class="px-5 text-base font-normal text-white">
 | 
			
		||||
@ -78,7 +86,6 @@
 | 
			
		||||
          </div>
 | 
			
		||||
        <% end %>
 | 
			
		||||
      </nav>
 | 
			
		||||
 | 
			
		||||
      <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:px-6 sm:py-4 sm:items-start sm:justify-end">
 | 
			
		||||
        <div class="flex flex-col items-end justify-center">
 | 
			
		||||
          <% flash.each do |type, data| %>
 | 
			
		||||
 | 
			
		||||
@ -1,40 +0,0 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html>
 | 
			
		||||
  <head>
 | 
			
		||||
    <title>Sign up | Kosmos Accounts</title>
 | 
			
		||||
    <%= csrf_meta_tags %>
 | 
			
		||||
    <%= csp_meta_tag %>
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
			
		||||
    <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
 | 
			
		||||
    <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
 | 
			
		||||
    <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
 | 
			
		||||
    <%= javascript_importmap_tags %>
 | 
			
		||||
  </head>
 | 
			
		||||
  <body class="layout-signup">
 | 
			
		||||
    <div id="wrapper">
 | 
			
		||||
      <header>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <span class ="icon"><%= render partial: "shared/icons/comet" %></span>
 | 
			
		||||
          <span class ="project-name">Kosmos</span>
 | 
			
		||||
          <span class ="site-name">Sign Up</span>
 | 
			
		||||
        </h1>
 | 
			
		||||
        <% if user_signed_in? %>
 | 
			
		||||
          <p class="current-user">
 | 
			
		||||
            Signed in as <strong><%= current_user.cn %>@kosmos.org</strong>.
 | 
			
		||||
            <%= link_to "Log out", destroy_user_session_path, method: :delete %>
 | 
			
		||||
          </p>
 | 
			
		||||
        <% end %>
 | 
			
		||||
      </header>
 | 
			
		||||
 | 
			
		||||
      <% flash.each do |type, msg| %>
 | 
			
		||||
        <div class="flash-msg <%= type %>">
 | 
			
		||||
          <p><%= msg %></p>
 | 
			
		||||
        </div>
 | 
			
		||||
      <% end %>
 | 
			
		||||
 | 
			
		||||
      <main>
 | 
			
		||||
        <%= yield %>
 | 
			
		||||
      </main>
 | 
			
		||||
    </div>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
@ -1,12 +1,15 @@
 | 
			
		||||
<h2>Welcome</h2>
 | 
			
		||||
<p>
 | 
			
		||||
  Hey there! You were invited to sign up for a Kosmos account by
 | 
			
		||||
  <strong><%= @invited_by_name %></strong>.
 | 
			
		||||
</p>
 | 
			
		||||
<p>
 | 
			
		||||
  This invitation can only be used once, and sign-up is currently only possible
 | 
			
		||||
  by invitation. Seems like you have good friends!
 | 
			
		||||
</p>
 | 
			
		||||
<p class="mt-12">
 | 
			
		||||
  <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
 | 
			
		||||
</p>
 | 
			
		||||
<%= render HeaderCompactComponent.new(title: "Welcome") %>
 | 
			
		||||
 | 
			
		||||
<%= render MainCompactComponent.new do %>
 | 
			
		||||
  <p>
 | 
			
		||||
    Hey there! You were invited to sign up for a Kosmos account by
 | 
			
		||||
    <strong><%= @invited_by_name %></strong>.
 | 
			
		||||
  </p>
 | 
			
		||||
  <p>
 | 
			
		||||
    This invitation can only be used once, and sign-up is currently only possible
 | 
			
		||||
    by invitation. Seems like you have good friends!
 | 
			
		||||
  </p>
 | 
			
		||||
  <p class="mt-12">
 | 
			
		||||
    <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
 | 
			
		||||
  </p>
 | 
			
		||||
<% end %>
 | 
			
		||||
 | 
			
		||||
@ -1,54 +1,60 @@
 | 
			
		||||
<% case @step %>
 | 
			
		||||
<% when 1 %>
 | 
			
		||||
  <h2>Choose a username</h2>
 | 
			
		||||
  <%= form_for @user, :url => signup_validate_url do |f| %>
 | 
			
		||||
    <p>
 | 
			
		||||
      <%= f.label :cn, 'Username', class: 'hidden' %>
 | 
			
		||||
      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
 | 
			
		||||
            class: 'text-xl' %>
 | 
			
		||||
      <span class="text-xl ml-1">@</span>
 | 
			
		||||
      <span class="text-xl">kosmos.org</span>
 | 
			
		||||
    </p>
 | 
			
		||||
    <% if @validation_error.present? %>
 | 
			
		||||
      <p class="error-msg">Username <%= @validation_error %></p>
 | 
			
		||||
    <% end %>
 | 
			
		||||
    <p class="mt-12">
 | 
			
		||||
      <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
 | 
			
		||||
    </p>
 | 
			
		||||
  <% end %>
 | 
			
		||||
<%= render HeaderCompactComponent.new(title: "Signup") %>
 | 
			
		||||
 | 
			
		||||
<% when 2 %>
 | 
			
		||||
  <h2>What's your email?</h2>
 | 
			
		||||
  <%= form_for @user, :url => signup_validate_url do |f| %>
 | 
			
		||||
    <p>
 | 
			
		||||
      <%= f.label :email, 'Email address', class: 'hidden' %>
 | 
			
		||||
      <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'text-xl' %>
 | 
			
		||||
    </p>
 | 
			
		||||
    <% if @validation_error.present? %>
 | 
			
		||||
      <p class="error-msg">Email <%= @validation_error %></p>
 | 
			
		||||
<%= render MainCompactComponent.new do %>
 | 
			
		||||
  <% case @step %>
 | 
			
		||||
  <% when 1 %>
 | 
			
		||||
    <h2>Choose a username</h2>
 | 
			
		||||
    <%= form_for @user, :url => signup_validate_url do |f| %>
 | 
			
		||||
      <p>
 | 
			
		||||
        <%= f.label :cn, 'Username', class: 'hidden' %>
 | 
			
		||||
        <%= f.text_field :cn, autofocus: true, autocomplete: "username",
 | 
			
		||||
              class: 'text-xl w-full md:w-3/5 mb-1' %>
 | 
			
		||||
        <span class="text-base md:text-xl text-gray-500 ml-1">@</span>
 | 
			
		||||
        <span class="text-base md:text-xl text-gray-500">kosmos.org</span>
 | 
			
		||||
      </p>
 | 
			
		||||
      <% if @validation_error.present? %>
 | 
			
		||||
        <p class="error-msg">Username <%= @validation_error %></p>
 | 
			
		||||
      <% end %>
 | 
			
		||||
      <p class="mt-12">
 | 
			
		||||
        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
 | 
			
		||||
      </p>
 | 
			
		||||
    <% end %>
 | 
			
		||||
    <p class="mt-12">
 | 
			
		||||
      <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
 | 
			
		||||
    </p>
 | 
			
		||||
  <% end %>
 | 
			
		||||
 | 
			
		||||
<% when 3 %>
 | 
			
		||||
  <h2>Choose a password</h2>
 | 
			
		||||
 | 
			
		||||
  <%= form_for @user, :url => signup_validate_url do |f| %>
 | 
			
		||||
    <p>
 | 
			
		||||
      <%= f.label :password, 'Password', class: 'hidden' %>
 | 
			
		||||
      <%= f.password_field :password, autofocus: true, class: 'text-xl' %>
 | 
			
		||||
    </p>
 | 
			
		||||
    <% if @validation_error.present? %>
 | 
			
		||||
      <p class="error-msg">Password <%= @validation_error %></p>
 | 
			
		||||
  <% when 2 %>
 | 
			
		||||
    <h2>What's your email?</h2>
 | 
			
		||||
    <%= form_for @user, :url => signup_validate_url do |f| %>
 | 
			
		||||
      <p>
 | 
			
		||||
        <%= f.label :email, 'Email address', class: 'hidden' %>
 | 
			
		||||
        <%= f.email_field :email, autofocus: true, autocomplete: 'email',
 | 
			
		||||
                                  class: 'text-xl w-full' %>
 | 
			
		||||
      </p>
 | 
			
		||||
      <% if @validation_error.present? %>
 | 
			
		||||
        <p class="error-msg">Email <%= @validation_error %></p>
 | 
			
		||||
      <% end %>
 | 
			
		||||
      <p class="mt-12">
 | 
			
		||||
        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
 | 
			
		||||
      </p>
 | 
			
		||||
    <% end %>
 | 
			
		||||
 | 
			
		||||
  <% when 3 %>
 | 
			
		||||
    <h2>Choose a password</h2>
 | 
			
		||||
 | 
			
		||||
    <%= form_for @user, :url => signup_validate_url do |f| %>
 | 
			
		||||
      <p>
 | 
			
		||||
        <%= f.label :password, 'Password', class: 'hidden' %>
 | 
			
		||||
        <%= f.password_field :password, autofocus: true,
 | 
			
		||||
                                        class: 'text-xl w-full' %>
 | 
			
		||||
      </p>
 | 
			
		||||
      <% if @validation_error.present? %>
 | 
			
		||||
        <p class="error-msg">Password <%= @validation_error %></p>
 | 
			
		||||
      <% end %>
 | 
			
		||||
      <p class="mt-8 text-sm text-gray-500">
 | 
			
		||||
        By clicking the button below, you accept our future Terms of Service
 | 
			
		||||
        and Privacy Policy. Don't worry, they will be excellent!
 | 
			
		||||
      </p>
 | 
			
		||||
      <p class="mt-8">
 | 
			
		||||
        <%= f.submit "Create account", class: 'btn-md btn-blue' %>
 | 
			
		||||
      </p>
 | 
			
		||||
    <% end %>
 | 
			
		||||
    <p class="mt-8 text-sm text-gray-500">
 | 
			
		||||
      By clicking the button below, you accept our future Terms of Service
 | 
			
		||||
      and Privacy Policy. Don't worry, they will be excellent!
 | 
			
		||||
    </p>
 | 
			
		||||
    <p class="mt-8">
 | 
			
		||||
      <%= f.submit "Create account", class: 'btn-md btn-blue' %>
 | 
			
		||||
    </p>
 | 
			
		||||
  <% end %>
 | 
			
		||||
<% end %>
 | 
			
		||||
 | 
			
		||||
@ -2,6 +2,9 @@
 | 
			
		||||
 | 
			
		||||
<%= render MainCompactComponent.new do %>
 | 
			
		||||
  <p class="text-center">
 | 
			
		||||
    You can close this window or tab now.
 | 
			
		||||
    Please check your inbox!
 | 
			
		||||
  </p>
 | 
			
		||||
  <p class="text-center text-gray-500">
 | 
			
		||||
    (You can close this window or tab now.)
 | 
			
		||||
  </p>
 | 
			
		||||
<% end %>
 | 
			
		||||
 | 
			
		||||
@ -1,6 +0,0 @@
 | 
			
		||||
<p>
 | 
			
		||||
  <%=link_to "Sign up for a new account" %>
 | 
			
		||||
</p>
 | 
			
		||||
<p>
 | 
			
		||||
  <%=link_to "Manage your existing account", new_user_session_path %>
 | 
			
		||||
</p>
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user