| 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": "<%= login_url %>", |
| 11 | "name": "<%= t("login") %>" |
| 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("login") %></h1> |
| 21 | <%= render "shared/flash_message" %> |
| 22 | </div> |
| 23 | <div class="row mb-3 text-center web3-login"> |
| 24 | <p><%= t("login_web3_explanation") %></p> |
| 25 | <%= |
| 26 | link_to( |
| 27 | image_pack_tag( |
| 28 | "phantom-icon-purple.svg", |
| 29 | size: "300x100", |
| 30 | alt: "Connect with Phantom" |
| 31 | ), |
| 32 | 'javascript:;', |
| 33 | class: 'connect-phantom', |
| 34 | title: 'Connect with Phantom wallet' |
| 35 | ) |
| 36 | %> |
| 37 | </div> |
| 38 | <%= form_for(:session, url: login_path, :html => { :class => "form-horizontal" }) do |f| %> |
| 39 | <div class="row mb-3 text-center"> |
| 40 | <p><%= t("login_omniauth_explanation") %></p> |
| 41 | <% ab_test(:only_spotify_youtube, 'old', 'only_spotify_youtube') do |exp| %> |
| 42 | <%= link_to( |
| 43 | '<i class="bi bi-spotify" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 44 | user_spotify_omniauth_authorize_path, |
| 45 | method: :post, |
| 46 | class: exp == 'old' ? "col-2 offset-3" : "col-2 offset-4", |
| 47 | style: "padding: 0px", |
| 48 | title: 'Connect with Spofity' |
| 49 | ) %> |
| 50 | <%= link_to( |
| 51 | '<i class="bi bi-google" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 52 | user_google_oauth2_omniauth_authorize_path, |
| 53 | method: :post, |
| 54 | class: 'col-2', |
| 55 | title: 'Connect with YouTube Music' |
| 56 | ) %> |
| 57 | <% if exp == 'old' %> |
| 58 | <%= link_to( |
| 59 | '<i class="bi bi-facebook" style="font-size: 3rem; color: blue;"></i>'.html_safe, |
| 60 | user_facebook_omniauth_authorize_path, |
| 61 | method: :post, |
| 62 | class: 'col-2', |
| 63 | title: 'Connect with Facebook' |
| 64 | ) %> |
| 65 | <% end %> |
| 66 | <% end %> |
| 67 | </div> |
| 68 | <% ab_test(:only_spotify_youtube, 'old', 'only_spotify_youtube') do |exp| %> |
| 69 | <% if exp == 'old' %> |
| 70 | <div class="row mb-3"> |
| 71 | <%= f.label t("email"), class: "col-4 col-form-label" %> |
| 72 | <div class="col-8"> |
| 73 | <%= f.email_field :email, class: 'form-control' %> |
| 74 | </div> |
| 75 | </div> |
| 76 | <div class="row mb-3"> |
| 77 | <%= f.label t("password"), class: "col-4 col-form-label" %> |
| 78 | <div class="col-8"> |
| 79 | <%= f.password_field :password, class: 'form-control' %> |
| 80 | </div> |
| 81 | <%= link_to t("forgot_password"), new_password_path('user'), class: 'col-8 offset-4' %> |
| 82 | </div> |
| 83 | <div class="row mb-3"> |
| 84 | <div class="offset-4 col-8 mt-2"> |
| 85 | <div class="row"> |
| 86 | <%= f.check_box :remember_me, class: "custom-control-input col-2", style: 'margin-top:auto;margin-bottom:auto;' %> |
| 87 | <label class="custom-control-label col-10" for="customControlInline"><%= t("still_login") %></label> |
| 88 | </div> |
| 89 | </div> |
| 90 | </div> |
| 91 | <div class="row mb-3"> |
| 92 | <div class="offset-4 col-8 mt-2"> |
| 93 | <%= f.submit t("login"), class: "btn btn-primary" %> |
| 94 | </div> |
| 95 | </div> |
| 96 | <% end %> |
| 97 | <% end %> |
| 98 | <div class="row mb-3"> |
| 99 | <div class="offset-4 col-8 mt-3"> |
| 100 | <p><%= t("new_user") %> <%= link_to t("signup_now"), signup_path(request.query_parameters) %></p> |
| 101 | </div> |
| 102 | </div> |
| 103 | <% end %> |
| 104 | </div> |
| 105 | <div class="col-md-6 offset-1 text-center p-5"> |
| 106 | <%= image_tag("https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg", class: "img-thumbnail d-none d-md-block") %> |
| 107 | </div> |
| 108 | </div> |
| 109 | <%= render 'shared/partial_breadcrumbs' do %> |
| 110 | <li class="breadcrumb-item"><%= link_to t("nav_login"), login_path(request.query_parameters) %></li> |
| 111 | <% end %> |
| 112 | </main> |
| 113 | <script> |
| 114 | const getProvider = () => { |
| 115 | if ('phantom' in window) { |
| 116 | const provider = window.phantom?.solana; |
| 117 | |
| 118 | if (provider?.isPhantom) { |
| 119 | return provider; |
| 120 | } |
| 121 | } |
| 122 | }; |
| 123 | |
| 124 | function post(url, params, successCompletion) { |
| 125 | $.ajax({ |
| 126 | type: 'POST', |
| 127 | beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}, |
| 128 | url: url, |
| 129 | data: params, |
| 130 | success: function(res) { |
| 131 | successCompletion(res) |
| 132 | } |
| 133 | }) |
| 134 | } |
| 135 | |
| 136 | const signMessage = async () => { |
| 137 | |
| 138 | let provider = getProvider(); |
| 139 | const message = `Welcome to Musik88! |
| 140 | |
| 141 | Click to sign in and accept the Musik88.com Terms of Service (https://musik88.com/term-of-use/). |
| 142 | |
| 143 | This request will not trigger a blockchain transaction or cost any gas fees.`; |
| 144 | |
| 145 | const encodedMessage = new TextEncoder().encode(message); |
| 146 | try { |
| 147 | const signedMessage = await provider.signMessage(encodedMessage, "utf8"); |
| 148 | console.log(signedMessage); |
| 149 | const pubkey = signedMessage.publicKey.toString(); |
| 150 | |
| 151 | let params = { |
| 152 | postAction: 'createAccount', |
| 153 | pubkey: pubkey |
| 154 | } |
| 155 | post('<%= login_pubkey_path %>', params, async function(res) { |
| 156 | // Hanlde callback |
| 157 | console.log(res); |
| 158 | }) |
| 159 | } |
| 160 | catch { |
| 161 | |
| 162 | } |
| 163 | } |
| 164 | |
| 165 | const ready = async () => { |
| 166 | |
| 167 | const isPhantomAvailable = () => { |
| 168 | if (window.phantom) { |
| 169 | return true; |
| 170 | } |
| 171 | return false; |
| 172 | } |
| 173 | |
| 174 | $('.web3-login').hide(); |
| 175 | |
| 176 | if (isPhantomAvailable()) { |
| 177 | $('.web3-login').show(); |
| 178 | } |
| 179 | |
| 180 | $('.connect-phantom').click(async function(e) { |
| 181 | e.stopImmediatePropagation(); |
| 182 | let provider = getProvider(); |
| 183 | |
| 184 | if (!provider) { |
| 185 | window.open('https://phantom.app/', '_blank'); |
| 186 | return |
| 187 | } |
| 188 | |
| 189 | try { |
| 190 | const resp = await provider.connect(); |
| 191 | // console.log(resp.publicKey.toString()); |
| 192 | const pubkey = resp.publicKey.toString(); |
| 193 | |
| 194 | let params = { |
| 195 | postAction: 'checkPubkey', |
| 196 | pubkey: pubkey |
| 197 | } |
| 198 | |
| 199 | console.log('Public key: ', pubkey); |
| 200 | post('<%= login_pubkey_path %>', params, async function(res) { |
| 201 | // Check if we need to promp messqge sign |
| 202 | console.log('Result: ', res); |
| 203 | if (res.shouldPromptMessageSign) { |
| 204 | signMessage() |
| 205 | } else { |
| 206 | // Redirect to onboarding or user page |
| 207 | |
| 208 | } |
| 209 | }) |
| 210 | } catch (err) { |
| 211 | // console.log(err); |
| 212 | // Add warning to sign the message |
| 213 | } |
| 214 | |
| 215 | }) |
| 216 | } |
| 217 | |
| 218 | $(document).ready(ready); |
| 219 | $(document).on('turbolinks:load', ready); |
| 220 | </script> |