| 1 | <% content_for :meta_head do %> |
| 2 | <%= render('shared/partial_meta_tag', title: @meta_title, description: @meta_description) %> |
| 3 | <% end %> |
| 4 | <% content_for :breadcrumb do %> |
| 5 | <%= render 'shared/partial_breadcrumbs_schema' do %> |
| 6 | { |
| 7 | "@type": "ListItem", |
| 8 | "position": 2, |
| 9 | "item": { |
| 10 | "@id": "<%= signup_url %>", |
| 11 | "name": "<%= t("signup") %>" |
| 12 | } |
| 13 | } |
| 14 | <% end %> |
| 15 | <% end %> |
| 16 | <main> |
| 17 | <div class="row"> |
| 18 | <div class="col-md-5"> |
| 19 | <div class="row mb-3"> |
| 20 | <h1><%= t("signup") %></h1> |
| 21 | <% if @provider %> |
| 22 | <p><%= t("signup_omniauth_explanation_provider", provider_name: @provider_name) %></p> |
| 23 | <% else %> |
| 24 | <p><%= t("signup_omniauth_explanation") %></p> |
| 25 | <% end %> |
| 26 | </div> |
| 27 | <%= form_for(@user, url: signup_path(request.query_parameters), :html => { :class => "form-horizontal" }) do |f| %> |
| 28 | <%= render "shared/flash_message" %> |
| 29 | <%= render "shared/error_messages" %> |
| 30 | <% if !@prefilled %> |
| 31 | <div class="row mb-3 text-center"> |
| 32 | <% ab_test(:only_spotify_youtube, 'old', 'only_spotify_youtube') do |exp| %> |
| 33 | <%= link_to( |
| 34 | '<i class="bi bi-spotify" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 35 | user_spotify_omniauth_authorize_path, |
| 36 | method: :post, |
| 37 | class: exp == 'old' ? "col-2 offset-3" : "col-2 offset-4", |
| 38 | style: "padding: 0px", |
| 39 | title: 'Connect with Spofity' |
| 40 | ) %> |
| 41 | <%= link_to( |
| 42 | '<i class="bi bi-google" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 43 | user_google_oauth2_omniauth_authorize_path, |
| 44 | method: :post, |
| 45 | class: 'col-2', |
| 46 | title: 'Connect with YouTube Music' |
| 47 | ) %> |
| 48 | <% if exp == 'old' %> |
| 49 | <%= link_to( |
| 50 | '<i class="bi bi-facebook" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 51 | user_facebook_omniauth_authorize_path, |
| 52 | method: :post, |
| 53 | class: 'col-2', |
| 54 | title: 'Connect with Facebook' |
| 55 | ) %> |
| 56 | <% end %> |
| 57 | <% end %> |
| 58 | </div> |
| 59 | <div class="row mb-3"> |
| 60 | <hr class="col-5"> |
| 61 | <div class="col-2 text-center"> |
| 62 | <span><%= t("or") %></span> |
| 63 | </div> |
| 64 | <hr class="col-5"> |
| 65 | </div> |
| 66 | <% end %> |
| 67 | <% ab_test(:only_spotify_youtube, 'old', 'only_spotify_youtube') do |exp| %> |
| 68 | <% if exp == 'old' %> |
| 69 | <div class="row mb-3"> |
| 70 | <%= f.label t("name"), class: "col-4 col-form-label" %> |
| 71 | <div class="col-8"> |
| 72 | <%= f.text_field :name, class: 'form-control', placeholder: 'Optional' %> |
| 73 | </div> |
| 74 | </div> |
| 75 | <div class="row mb-3"> |
| 76 | <%= f.label t("email"), class: "col-4 col-form-label" %> |
| 77 | <div class="col-8"> |
| 78 | <%= f.email_field :email, class: 'form-control', readonly: @prefilled %> |
| 79 | </div> |
| 80 | </div> |
| 81 | <div class="row mb-3"> |
| 82 | <%= f.label t("password"), class: "col-4 col-form-label" %> |
| 83 | <div class="col-8"> |
| 84 | <%= f.password_field :password, class: 'form-control' %> |
| 85 | </div> |
| 86 | </div> |
| 87 | <div class="row mb-3"> |
| 88 | <%= f.label t("password_confirmation"), class: "col-4 col-form-label" %> |
| 89 | <div class="col-8"> |
| 90 | <%= f.password_field :password_confirmation, class: 'form-control' %> |
| 91 | </div> |
| 92 | </div> |
| 93 | <div class="row mb-3"> |
| 94 | <div class="offset-4 col-4 mt-2"> |
| 95 | <%= f.submit t("create_account"), class: "btn btn-primary" %> |
| 96 | </div> |
| 97 | </div> |
| 98 | <% end %> |
| 99 | <% end %> |
| 100 | <div class="row mb-3"> |
| 101 | <div class="offset-4 col-8 mt-3"> |
| 102 | <p><%= t("have_account") %> <%= link_to t("login"), login_path(request.query_parameters) %></p> |
| 103 | </div> |
| 104 | </div> |
| 105 | <% end %> |
| 106 | </div> |
| 107 | </div> |
| 108 | <%= render 'shared/partial_breadcrumbs' do %> |
| 109 | <li class="breadcrumb-item"><%= link_to t("signup"), signup_path(request.query_parameters) %></li> |
| 110 | <% end %> |
| 111 | </main> |