| @@ -3,8 +3,12 @@ | ||
| 3 | 3 | exit; |
| 4 | 4 | endif; |
| 5 | 5 | include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/headView.php'; |
| 6 | 6 | wp_enqueue_script('__tagembed__script-account-js', TAGEMBED_PLUGIN_URL . '/assets/js/account/tagembed.account.script.js', ['jquery'], TAGEMBED_PLUGIN_VERSION, true); |
| 7 | +$__tagembed__google_error = get_transient('__tagembed__google_error_' . get_current_user_id()); | |
| 8 | +if (!empty($__tagembed__google_error)) : | |
| 9 | + delete_transient('__tagembed__google_error_' . get_current_user_id()); | |
| 10 | +endif; | |
| 7 | 11 | ?> |
| 8 | 12 | <!--Start-- Other Plugin Popup--> |
| 9 | 13 | <style> |
| 10 | 14 | .__tagembed__okaybtn:hover { |
| @@ -9,8 +13,116 @@ | ||
| 9 | 13 | <style> |
| 10 | 14 | .__tagembed__okaybtn:hover { |
| 11 | 15 | color: #fff !important; |
| 12 | 16 | } |
| 17 | + | |
| 18 | + .__tagembed__google_divider { | |
| 19 | + display: flex; | |
| 20 | + align-items: center; | |
| 21 | + margin: 18px 0 14px; | |
| 22 | + color: #8c8f94; | |
| 23 | + font-size: 13px; | |
| 24 | + } | |
| 25 | + | |
| 26 | + .__tagembed__google_divider::before, | |
| 27 | + .__tagembed__google_divider::after { | |
| 28 | + content: ""; | |
| 29 | + flex: 1 1 auto; | |
| 30 | + height: 1px; | |
| 31 | + background: #dcdcde; | |
| 32 | + } | |
| 33 | + | |
| 34 | + .__tagembed__google_divider span { | |
| 35 | + padding: 0 10px; | |
| 36 | + } | |
| 37 | + | |
| 38 | + .__tagembed__google_btn { | |
| 39 | + display: flex; | |
| 40 | + align-items: center; | |
| 41 | + justify-content: center; | |
| 42 | + width: 100%; | |
| 43 | + min-height: 40px; | |
| 44 | + padding: 8px 14px; | |
| 45 | + background: #fff; | |
| 46 | + color: #3c4043; | |
| 47 | + border: 1px solid #dadce0; | |
| 48 | + border-radius: 0; | |
| 49 | + font-size: 14px; | |
| 50 | + font-weight: 500; | |
| 51 | + line-height: 1.4; | |
| 52 | + cursor: pointer; | |
| 53 | + } | |
| 54 | + | |
| 55 | + .__tagembed__google_btn:hover { | |
| 56 | + background: #f7f8f8; | |
| 57 | + border-color: #c6c8ca; | |
| 58 | + } | |
| 59 | + | |
| 60 | + .__tagembed__google_btn svg { | |
| 61 | + width: 18px; | |
| 62 | + height: 18px; | |
| 63 | + display: block; | |
| 64 | + margin-right: 10px; | |
| 65 | + } | |
| 66 | + | |
| 67 | + .__tagembed__password_wrap { | |
| 68 | + position: relative; | |
| 69 | + } | |
| 70 | + | |
| 71 | + .__tagembed__password_wrap input { | |
| 72 | + padding-right: 38px !important; | |
| 73 | + } | |
| 74 | + | |
| 75 | + .__tagembed__password_wrap input::-ms-reveal, | |
| 76 | + .__tagembed__password_wrap input::-ms-clear { | |
| 77 | + display: none; | |
| 78 | + } | |
| 79 | + | |
| 80 | + .__tagembed__password_toggle { | |
| 81 | + position: absolute; | |
| 82 | + top: 0; | |
| 83 | + right: 0; | |
| 84 | + bottom: 0; | |
| 85 | + display: flex; | |
| 86 | + align-items: center; | |
| 87 | + justify-content: center; | |
| 88 | + width: 36px; | |
| 89 | + padding: 0; | |
| 90 | + margin: 0; | |
| 91 | + background: transparent; | |
| 92 | + border: 0; | |
| 93 | + color: #8c8f94; | |
| 94 | + cursor: pointer; | |
| 95 | + } | |
| 96 | + | |
| 97 | + .__tagembed__password_toggle:hover, | |
| 98 | + .__tagembed__password_toggle:focus { | |
| 99 | + color: #2271b1; | |
| 100 | + } | |
| 101 | + | |
| 102 | + .__tagembed__password_toggle:focus { | |
| 103 | + outline: none; | |
| 104 | + box-shadow: none; | |
| 105 | + } | |
| 106 | + | |
| 107 | + .__tagembed__password_toggle:focus-visible { | |
| 108 | + outline: 1px solid #2271b1; | |
| 109 | + } | |
| 110 | + | |
| 111 | + .__tagembed__password_toggle svg { | |
| 112 | + width: 18px; | |
| 113 | + height: 18px; | |
| 114 | + display: block; | |
| 115 | + } | |
| 116 | + | |
| 117 | + .__tagembed__password_toggle .__tagembed__eye_off, | |
| 118 | + .__tagembed__password_toggle.__tagembed__visible .__tagembed__eye { | |
| 119 | + display: none; | |
| 120 | + } | |
| 121 | + | |
| 122 | + .__tagembed__password_toggle.__tagembed__visible .__tagembed__eye_off { | |
| 123 | + display: block; | |
| 124 | + } | |
| 13 | 125 | </style> |
| 14 | 126 | <div id="__tagembed__other_plugin_popup" class="__tagembed__other_plugin_popup"></div> |
| 15 | 127 | <!--End-- Other Plugin Popup--> |
| 16 | 128 | |
| @@ -16,9 +128,9 @@ | ||
| 16 | 128 | |
| 17 | 129 | <div class="__tagembed__row"> |
| 18 | 130 | <div class="__tagembed__col __tagembed__col_12 __tagembed__login_account"> |
| 19 | 131 | <!--Error--> |
| 20 | - <div id="__tagembed__account_error" class="__tagembed__acount_error __tagembed__danger"> Unknown email. Check again or try your email address.<br></div> | |
| 132 | + <div id="__tagembed__account_error" class="__tagembed__acount_error __tagembed__danger"<?php echo !empty($__tagembed__google_error) ? ' style="display:block;"' : ''; ?>> <?php echo !empty($__tagembed__google_error) ? esc_html($__tagembed__google_error) : 'Unknown email. Check again or try your email address.'; ?><br></div> | |
| 21 | 133 | <!--Tabbing--> |
| 22 | 134 | <div id="__tagembed__account_tab_view" class="__tagembed__tabarea"> |
| 23 | 135 | <ul> |
| 24 | 136 | <li><a id="__tagembed__account_login" onclick="__tagembed__manage_account_view('login')" href="javascript:void(0);" class="active">Login</a></li> |
| @@ -36,9 +148,23 @@ | ||
| 36 | 148 | <input type="email" name="emailId" value="" placeholder="Email" required autofocus> |
| 37 | 149 | <span id="__tagembed__login_email_id_error"></span> |
| 38 | 150 | </div> |
| 39 | 151 | <div class="__tagembed__form_row"> |
| 40 | - <input type="password" name="password" value="" placeholder="Password" required> | |
| 152 | + <div class="__tagembed__password_wrap"> | |
| 153 | + <input type="password" name="password" value="" placeholder="Password" required> | |
| 154 | + <button type="button" class="__tagembed__password_toggle" aria-label="Show password" aria-pressed="false" title="Show password"> | |
| 155 | + <svg class="__tagembed__eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> | |
| 156 | + <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /> | |
| 157 | + <circle cx="12" cy="12" r="3" /> | |
| 158 | + </svg> | |
| 159 | + <svg class="__tagembed__eye_off" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> | |
| 160 | + <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" /> | |
| 161 | + <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" /> | |
| 162 | + <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" /> | |
| 163 | + <line x1="1" y1="1" x2="23" y2="23" /> | |
| 164 | + </svg> | |
| 165 | + </button> | |
| 166 | + </div> | |
| 41 | 167 | <span id="__tagembed__login_password_error"></span> |
| 42 | 168 | </div> |
| 43 | 169 | <div class="__tagembed__submit_sec"> |
| 44 | 170 | <a href="https://app.tagembed.com/accounts/forgotpassword/" target="_blank">Forgot Password</a> |
| @@ -45,8 +171,18 @@ | ||
| 45 | 171 | <a href="javascript:void(0);" onclick="__tagembed__manage_account_view('forgotPassword')"></a> |
| 46 | 172 | <button type="submit" class="__tagembed__btn">Sign In</button> |
| 47 | 173 | </div> |
| 48 | 174 | </form> |
| 175 | + <div class="__tagembed__google_divider"><span>or</span></div> | |
| 176 | + <button type="button" class="__tagembed__google_btn"> | |
| 177 | + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false"> | |
| 178 | + <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z" /> | |
| 179 | + <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" /> | |
| 180 | + <path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z" /> | |
| 181 | + <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z" /> | |
| 182 | + </svg> | |
| 183 | + Continue with Google | |
| 184 | + </button> | |
| 49 | 185 | </div> |
| 50 | 186 | <!--End-- Login View--> |
| 51 | 187 | <!--Start-- Register View--> |
| 52 | 188 | <div id="__tagembed__account_register_view" class="__tagembed__register_inn"> |
| @@ -63,9 +199,11 @@ | ||
| 63 | 199 | <input type="email" name="emailId" value="" placeholder="Email" required> |
| 64 | 200 | <span id="__tagembed__register_email_id_error"></span> |
| 65 | 201 | </div> |
| 66 | 202 | <div class="__tagembed__form_row"> |
| 67 | - <select id="__tagembed__callingCode" name="calling_code" style="padding: 0 8px;line-height: 2; min-height: 30px;width: 100%;border-radius: 0; border: 1px solid #999;background-color: #fff;color: #2c3338;"></select> | |
| 203 | + <select id="__tagembed__callingCode" name="calling_code" style="padding: 0 8px;line-height: 2; min-height: 30px;width: 100%;border-radius: 0; border: 1px solid #999;background-color: #fff;color: #2c3338;"> | |
| 204 | + <option value="" selected>Select Country Code</option> | |
| 205 | + </select> | |
| 68 | 206 | <span id="__tagembed__register_calling_code_error"></span> |
| 69 | 207 | </div> |
| 70 | 208 | <div class="__tagembed__form_row"> |
| 71 | 209 | <input type="number" name="contact_no" value="" placeholder="Contact Number"> |
| @@ -71,9 +209,23 @@ | ||
| 71 | 209 | <input type="number" name="contact_no" value="" placeholder="Contact Number"> |
| 72 | 210 | <span id="__tagembed__register_contact_no_error"></span> |
| 73 | 211 | </div> |
| 74 | 212 | <div class="__tagembed__form_row"> |
| 75 | - <input type="password" name="password" value="" placeholder="Password" required> | |
| 213 | + <div class="__tagembed__password_wrap"> | |
| 214 | + <input type="password" name="password" value="" placeholder="Password" required> | |
| 215 | + <button type="button" class="__tagembed__password_toggle" aria-label="Show password" aria-pressed="false" title="Show password"> | |
| 216 | + <svg class="__tagembed__eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> | |
| 217 | + <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /> | |
| 218 | + <circle cx="12" cy="12" r="3" /> | |
| 219 | + </svg> | |
| 220 | + <svg class="__tagembed__eye_off" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> | |
| 221 | + <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" /> | |
| 222 | + <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" /> | |
| 223 | + <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" /> | |
| 224 | + <line x1="1" y1="1" x2="23" y2="23" /> | |
| 225 | + </svg> | |
| 226 | + </button> | |
| 227 | + </div> | |
| 76 | 228 | <span id="__tagembed__register_password_error"></span> |
| 77 | 229 | <p style="font-size: 12px;color: #b5b5c3;font-weight: 400;max-width: 300px;margin-top: 10px;line-height: normal;">By clicking Create Account, you agree to our <a href="https://tagembed.com/terms-of-service/" target="_blank" style="cursor: pointer;">Terms of Service</a> and <a href="https://tagembed.com/privacy-policy/" target="_blank" style="cursor: pointer;">Privacy Policy</a></p> |
| 78 | 230 | </div> |
| 79 | 231 | <div class="__tagembed__submit_sec __tagembed__flexend"> |
| @@ -79,8 +231,18 @@ | ||
| 79 | 231 | <div class="__tagembed__submit_sec __tagembed__flexend"> |
| 80 | 232 | <button type="submit" class="__tagembed__btn">Create Account</button> |
| 81 | 233 | </div> |
| 82 | 234 | </form> |
| 235 | + <div class="__tagembed__google_divider"><span>or</span></div> | |
| 236 | + <button type="button" class="__tagembed__google_btn"> | |
| 237 | + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false"> | |
| 238 | + <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z" /> | |
| 239 | + <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" /> | |
| 240 | + <path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z" /> | |
| 241 | + <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z" /> | |
| 242 | + </svg> | |
| 243 | + Continue with Google | |
| 244 | + </button> | |
| 83 | 245 | </div> |
| 84 | 246 | </div> |
| 85 | 247 | </div> |
| 86 | 248 | <?php include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/footerView.php'; ?> |