| 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 welcome"> |
| 18 | <div class="col-md-12 text-center"> |
| 19 | <h1 class="text-center"><%= t('welcome_user', user_name: @user.name) %></h1> |
| 20 | <p><%= t('onboarding_explanation') %></p> |
| 21 | <button type="button" class="btn btn-primary mt-3 welcome"><%= t('onboarding_sounds_good') %></button> |
| 22 | </div> |
| 23 | </div> |
| 24 | <div class="row username" style="display: none;"> |
| 25 | <div class="col-md-6 offset-md-3 text-center"> |
| 26 | <h2 class="mt-3"><%= t('onboarding_username_heading') %></h2> |
| 27 | <div class="username-content"> |
| 28 | <%= t('onboarding_username_explanation') %> |
| 29 | <div class="row"> |
| 30 | <div class="col-md-6 offset-md-3"> |
| 31 | <%= form_for(@user, url: username_path, remote: true, method: :post, :html => { :class => "form-horizontal" }) do |f| %> |
| 32 | <div class="row mb-3"> |
| 33 | <div class="col-10 mt-2"> |
| 34 | <%= f.text_field :username, class: 'form-control username', autocomplete: 'off' %> |
| 35 | </div> |
| 36 | <div class="col-2 mt-2 status"></div> |
| 37 | </div> |
| 38 | <div class="message"></div> |
| 39 | <%= f.submit t("save"), class: "btn btn-primary", disabled: true %> |
| 40 | <% end %> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
| 45 | </div> |
| 46 | <div class="row spotify" style="display: none;"> |
| 47 | <div class="col-md-6 offset-md-3 text-center"> |
| 48 | <h2 class="mt-3"><%= t('onboarding_spotify_heading') %></h2> |
| 49 | <div class="spotify-content"> |
| 50 | <%= t('onboarding_spotify_explanation') %> |
| 51 | <div class="row"> |
| 52 | <div class="col-md-6 offset-md-3"> |
| 53 | <%= link_to( |
| 54 | '<i class="bi bi-spotify" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 55 | user_spotify_omniauth_authorize_path(show_dialog: true), |
| 56 | method: :post, |
| 57 | class: 'col-2 spotify-connect', |
| 58 | style: 'padding: 0px', |
| 59 | title: 'Connect with Spofity' |
| 60 | ) %> |
| 61 | </div> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
| 65 | </div> |
| 66 | <div class="row google" style="display: none;"> |
| 67 | <div class="col-md-6 offset-md-3 text-center"> |
| 68 | <h2 class="mt-3"><%= t('onboarding_google_heading') %></h2> |
| 69 | <div class="google-content"> |
| 70 | <%= t('onboarding_google_explanation') %> |
| 71 | <div class="row"> |
| 72 | <div class="col-md-6 offset-md-3"> |
| 73 | <%= link_to( |
| 74 | '<i class="bi bi-youtube" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 75 | user_google_oauth2_omniauth_authorize_path(show_dialog: true), |
| 76 | method: :post, |
| 77 | class: 'col-2 google-connect', |
| 78 | style: 'padding: 0px', |
| 79 | title: 'Connect with Youtube' |
| 80 | ) %> |
| 81 | </div> |
| 82 | </div> |
| 83 | </div> |
| 84 | </div> |
| 85 | </div> |
| 86 | <div class="row done" style="display: none;"> |
| 87 | <div class="col-md-12 text-center"> |
| 88 | <h1 class="text-center"><%= t('onboarding_done', user_name: @user.name) %></h1> |
| 89 | <p><%= t('onboarding_explanation_done') %></p> |
| 90 | <%= link_to(t('onboarding_done_button'), root_path, class: 'btn btn-primary') %> |
| 91 | </div> |
| 92 | </div> |
| 93 | <%= render 'shared/partial_breadcrumbs' do %> |
| 94 | <li class="breadcrumb-item"><%= link_to t("nav_onboarding"), onboarding_path %></li> |
| 95 | <% end %> |
| 96 | </main> |
| 97 | <script> |
| 98 | $(document).on('turbolinks:load', function() { |
| 99 | |
| 100 | let currentStepElement = $('.welcome'); |
| 101 | |
| 102 | function post(url, params, successCompletion) { |
| 103 | $.ajax({ |
| 104 | type: 'POST', |
| 105 | beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}, |
| 106 | url: url, |
| 107 | data: params, |
| 108 | success: function(res) { |
| 109 | successCompletion(res) |
| 110 | } |
| 111 | }) |
| 112 | } |
| 113 | |
| 114 | function fadeInNextStep(nextStep) { |
| 115 | $('.' + nextStep).fadeIn('slow'); |
| 116 | currentStepElement = $('.' + nextStep); |
| 117 | } |
| 118 | |
| 119 | function updateProgress() { |
| 120 | let currentValue = parseFloat($('.progress-bar').attr('aria-valuenow')); |
| 121 | //console.log(currentValue) |
| 122 | if (currentValue < 95) { |
| 123 | let nextValue = currentValue + 5; |
| 124 | //console.log(nextValue) |
| 125 | $('.progress-bar') |
| 126 | .css({'width': nextValue + '%'}) |
| 127 | .attr('aria-valuenow', nextValue);; |
| 128 | } |
| 129 | } |
| 130 | |
| 131 | $('button.welcome').click(function() { |
| 132 | let params = { onboarding_action: 'next' } |
| 133 | post('<%= onboarding_action_path %>', params, function(res) { |
| 134 | currentStepElement.fadeOut('slow', fadeInNextStep(res.next_step)); |
| 135 | }) |
| 136 | }); |
| 137 | |
| 138 | $('input.username').on('input', function(e) { |
| 139 | $('div.status').html('<%= t('onboarding_username_checking') %>') |
| 140 | const url = "<%= username_check_path %>?u=" + $(this).val() |
| 141 | $.ajax({ |
| 142 | type: "GET", |
| 143 | url: url, |
| 144 | success: function(res) { |
| 145 | if (res.valid) { |
| 146 | $('div.status').html('<i class="bi bi-check2-square" style="color: green;"></i>') |
| 147 | $('div.message').removeClass('alert alert-danger') |
| 148 | $('div.message').addClass('alert alert-success') |
| 149 | } else { |
| 150 | $('div.status').html('<i class="bi bi-x-square-fill" style="color: red;"></i>') |
| 151 | $('div.message').removeClass('alert alert-success') |
| 152 | $('div.message').addClass('alert alert-danger') |
| 153 | } |
| 154 | $('input.btn-primary').prop('disabled', !res.valid) |
| 155 | $('div.message').text(res.message) |
| 156 | } |
| 157 | }) |
| 158 | }) |
| 159 | |
| 160 | $('.username').on('click', 'button.username', function() { |
| 161 | let params = { onboarding_action: 'report_complete', type: 'username' } |
| 162 | post('<%= onboarding_action_path %>', params, function(res) { |
| 163 | $('.username').fadeOut('slow', fadeInNextStep(res.next_step)); |
| 164 | }) |
| 165 | }); |
| 166 | |
| 167 | // Remember that we need to query Spotify data |
| 168 | $('.spotify-connect').click(function() { |
| 169 | sessionStorage.setItem('should_request_spotify_data', true); |
| 170 | return true; |
| 171 | }) |
| 172 | |
| 173 | function spotifyExportDataDone() { |
| 174 | $(this).replaceWith('<%= j render 'partial_onboarding_spotify_done' %>'); |
| 175 | $('.spotify-content').fadeIn('slow'); |
| 176 | } |
| 177 | |
| 178 | $('.spotify').on('click', 'button.spotify', function() { |
| 179 | let params = { onboarding_action: 'report_complete', type: 'spotify' } |
| 180 | post('<%= onboarding_action_path %>', params, function(res) { |
| 181 | $('.spotify').fadeOut('slow', fadeInNextStep(res.next_step)); |
| 182 | }) |
| 183 | }); |
| 184 | |
| 185 | function spotifyExportData() { |
| 186 | $('.spotify').fadeIn('slow'); |
| 187 | $('.spotify-content').fadeOut("slow", function() { |
| 188 | $(this).replaceWith('<%= j render 'partial_onboarding_spotify_progress_bar' %>').hide(); |
| 189 | |
| 190 | $('.spotify-export-progress').hide(); |
| 191 | |
| 192 | $('.spotify-content').fadeIn('slow', function() { |
| 193 | $('.spotify-export-progress').show(); |
| 194 | |
| 195 | let refreshIntervalId = setInterval(updateProgress, 1000); |
| 196 | |
| 197 | post('<%= onboarding_export_spotify_path %>', {}, function(res) { |
| 198 | clearInterval(refreshIntervalId); |
| 199 | $('.progress-bar').css('width', '100%'); |
| 200 | $('.spotify-content').fadeOut("slow", spotifyExportDataDone) |
| 201 | }) |
| 202 | }); |
| 203 | }); |
| 204 | } |
| 205 | |
| 206 | if (sessionStorage.getItem('should_request_spotify_data')) { |
| 207 | sessionStorage.removeItem('should_request_spotify_data') |
| 208 | $('.welcome').fadeOut('slow', spotifyExportData); |
| 209 | } |
| 210 | |
| 211 | // Youtube stuff |
| 212 | // Remember that we need to query YouTube data |
| 213 | $('.google-connect').click(function() { |
| 214 | sessionStorage.setItem('should_request_youtube_data', true); |
| 215 | return true; |
| 216 | }) |
| 217 | |
| 218 | $('.google').on('click', 'button.google', function() { |
| 219 | let params = { onboarding_action: 'report_complete', type: 'google' } |
| 220 | post('<%= onboarding_action_path %>', params, function(res) { |
| 221 | $('.google').fadeOut('slow', fadeInNextStep(res.next_step)); |
| 222 | }) |
| 223 | }); |
| 224 | |
| 225 | function youtubeExportDataDone() { |
| 226 | $(this).replaceWith('<%= j render 'partial_onboarding_google_done' %>'); |
| 227 | $('.google-content').fadeIn('slow'); |
| 228 | } |
| 229 | |
| 230 | function youtubeExportData() { |
| 231 | $('.google').fadeIn('slow'); |
| 232 | $('.google-content').fadeOut('slow', function() { |
| 233 | $(this).replaceWith('<%= j render 'partial_onboarding_google_progress_bar' %>').hide(); |
| 234 | $('.google-export-progress').hide(); |
| 235 | $(this).fadeIn('slow', function() { |
| 236 | $('.google-export-progress').show(); |
| 237 | |
| 238 | let refreshIntervalId = setInterval(updateProgress, 1000); |
| 239 | |
| 240 | post('<%= onboarding_export_youtube_path %>', {}, function(res) { |
| 241 | clearInterval(refreshIntervalId); |
| 242 | $('.progress-bar').css('width', '100%'); |
| 243 | $('.google-content').fadeOut("slow", youtubeExportDataDone); |
| 244 | }) |
| 245 | }); |
| 246 | }); |
| 247 | } |
| 248 | |
| 249 | if (sessionStorage.getItem('should_request_youtube_data')) { |
| 250 | sessionStorage.removeItem('should_request_youtube_data') |
| 251 | $('.welcome').fadeOut('slow', youtubeExportData); |
| 252 | } |
| 253 | }) |
| 254 | </script> |