src/Bundles/AdminBundle/Resources/views/index/index.html.twig line 1

Open in your IDE?
  1. {% extends '@Admin/base.html.twig' %}
  3. {% block title %}Index | Project Radar{% endblock %}
  5. {% block javascripts %}
  7.     <script src="https://accounts.google.com/gsi/client" async defer></script>
  8.     <script src="https://js.stripe.com/v3/"></script>
  10.     {{ parent() }}
  11. {% endblock %}
  13. {% block body %}
  15.     <div class="container-fluid">
  16.         <div class="row mb-5">
  17.             <div class="d-flex align-items-center justify-content-center mt-5">
  18.                 <img src="{{ asset('build/images/logo.svg') }}" alt="Logo" style="height: 5vw;" class="pr-2">
  19.                 <h1 style="font-size: 5vw">Project Radar</h1>
  20.             </div>
  21.         </div>
  22.     </div>
  24.     <div class="container">
  25.         <div class="row">
  26.             <div class="d-flex justify-content-center">
  27.                 <a href="{{ path('admin.login')}}" class="btn btn-primary mr-2">Admin Panel</a>
  28.                 <a href="{{ path('api-docs.elements')}}" class="btn btn-success mr-2">Elements API Docs</a>
  29.                 <a href="{{ path('api-docs.swagger')}}" class="btn btn-success"><strike>Swagger API Docs</strike></a>
  30.             </div>
  31.         </div>
  32.     </div>
  34.     <div class="container">
  36.         <div class="row">
  37.             <div class="d-flex justify-content-center" style="margin: 50px 0;">
  38.                 <!-- Display a payment form for create subscription -->
  39.                 <form id="payment-form-subscribe" style="width: 450px;">
  40.                     <div id="card-element-subscribe">
  41.                         <!-- Elements will create input elements here -->
  42.                     </div>
  43.                     <!-- We'll put the error messages in this element -->
  44.                     <div id="card-element-subscribe-errors" role="alert"></div>
  45.                     <!-- Actions -->
  46.                     <div style="margin: 10px 0">
  47.                         <button id="submit-subscribe-btn" type="submit">Subscribe</button>
  48.                     </div>
  49.                     <div style="margin: 10px 0">
  50.                         <button id="submit-create-payment-method-btn" type="submit">Create PaymentMethod</button>
  51.                     </div>
  52.                     <div style="margin: 10px 0">
  53.                         <button id="submit-update-subscription-btn" type="submit">Update subscription</button>
  54.                     </div>
  55.                 </form>
  56.             </div>
  57.         </div>
  59.         <script>
  60.             const clientSecret = 'pi_3LmGC7BC7Ka4fg6F0jlydDoc_secret_mqcLCOh2euFek3tsISRd4fC4r';
  61.             const paymentMethod = 'pm_1LmGBpBC7Ka4fg6FGd26tjEx';
  62.             let stripe = Stripe('pk_test_51Lb16XBC7Ka4fg6FezLjw95YlgU2dkHpefXRyzW2MZ1X4QS6rdtngAxDk8EaLM1OLnyq0DbB2Au8rC3Ee3ObtN8Y008vR1rhij');
  63.             let elements = stripe.elements();
  65.             const style = {
  66.                 base: {
  67.                     color: "#32325d",
  68.                     fontFamily: 'Arial, sans-serif',
  69.                     fontSmoothing: "antialiased",
  70.                     fontSize: "16px",
  71.                     "::placeholder": {
  72.                         color: "#32325d"
  73.                     }
  74.                 },
  75.                 invalid: {
  76.                     fontFamily: 'Arial, sans-serif',
  77.                     color: "#fa755a",
  78.                     iconColor: "#fa755a"
  79.                 }
  80.             };
  82.             let cardElement = elements.create('card', { style: style });
  83.             cardElement.mount('#card-element-subscribe');
  85.             const btnSubscribe = document.querySelector('#submit-subscribe-btn');
  86.             btnSubscribe.addEventListener('click', async (e) => {
  87.                 e.preventDefault();
  88.                 // Create payment method and confirm payment intent.
  89.                 stripe.confirmCardPayment(clientSecret, {
  90.                     payment_method: {
  91.                         card: cardElement,
  92.                         billing_details: {
  93.                             name: 'Test Test',
  94.                         },
  95.                     }
  96.                 }).then((result) => {
  97.                     if(result.error) {
  98.                         console.log('error Payment', result);
  99.                         alert(result.error.message);
  100.                     } else {
  101.                         console.log('confirmCardPayment', result);
  102.                     }
  103.                 });
  104.             });
  106.             const btnCreatePayment = document.querySelector('#submit-create-payment-method-btn');
  107.             btnCreatePayment.addEventListener('click', async (e) => {
  108.                 e.preventDefault();
  109.                 // TODO: For upgrade subscription
  110.                 stripe.createPaymentMethod({
  111.                     type: 'card',
  112.                     card: cardElement,
  113.                     billing_details: {
  114.                         name: 'Jenny Rosen',
  115.                     },
  116.                 }).then(function(result) {
  117.                     // Handle result.error or result.paymentMethod
  118.                     if (result.error) {
  119.                         console.log('ERROR', result.error.message);
  120.                     } else {
  121.                         console.log('paymentMethod', result.paymentMethod);
  122.                     }
  123.                 });
  124.             });
  126.             const btnUpdateSubscription = document.querySelector('#submit-update-subscription-btn');
  127.             btnUpdateSubscription.addEventListener('click', async (e) => {
  128.                 e.preventDefault();
  129.                 // for pay invoice
  130.                 stripe.confirmCardPayment(clientSecret, {
  131.                     payment_method: paymentMethod,
  132.                 }).then((result) => {
  133.                     if(result.error) {
  134.                         console.log('error Payment', result);
  135.                         alert(result.error.message);
  136.                     } else {
  137.                         console.log('confirmCardPayment', result);
  138.                     }
  139.                 });
  140.             });
  142.         </script>
  144.         <div class="row">
  145.             <div class="d-flex justify-content-center">
  147.                 <script>
  148.                     // OpenID Flow
  149.                     function handleCredentialResponse(response) {
  150.                         console.info('Google ID Token:', response.credential);
  151.                         fetch('/api/v1/openid/login', {
  152.                             'method': 'POST',
  153.                             'body':   JSON.stringify({
  154.                                 provider: 'google',
  155.                                 token:    response.credential,
  156.                             }),
  157.                         }).then(async function(result) {
  158.                             console.info('Radar Response:', await result.json());
  159.                         });
  160.                     }
  161.                     window.onload = function () {
  162.                         google.accounts.id.initialize({
  163.                             state_cookie_domain: 'localhost',
  164.                             client_id: "{{ google_app_id }}",
  165.                             callback: handleCredentialResponse,
  166.                         });
  167.                         google.accounts.id.renderButton(
  168.                             document.getElementById("buttonDiv"),
  169.                             { theme: "outline", size: "large" }  // customization attributes
  170.                         );
  171.                         google.accounts.id.prompt(); // also display the One Tap dialog
  172.                     }
  174.                     // oAuth2 Redirect Flow
  175.                     function googleLogin(){
  176.                         let popup = window.open('/api/v1/social/google', "socialPopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
  177.                         let messageCallback = function(message){
  178.                             if(message.source === popup){
  179.                                 console.info('Radar Post Message:', message.data);
  180.                                 popup.close();
  181.                             }
  182.                         };
  183.                         window.addEventListener("message", messageCallback, false);
  184.                     }
  186.                     // LinkedIn oAuth2 with Redirect Flow
  187.                     function linkedinLogin() {
  188.                         const popupLinkedIn = window.open('/api/v1/social/linkedin', "socialPopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
  189.                         let messageCallback = function(message){
  190.                             if(message.source === popupLinkedIn){
  191.                                 console.info('Radar Post Message LinkedIn Login:', message.data);
  192.                                 popupLinkedIn.close();
  193.                             }
  194.                         };
  195.                         window.addEventListener("message", messageCallback, false);
  196.                     }
  198.                 </script>
  201.                 <div id="buttonDiv"></div>
  203.                 <br>
  204.                 <button onclick="googleLogin()">Login With Google (Redirect Flow)</button>
  206.                 <button onclick="linkedinLogin()">Login With LinkedIn (Redirect Flow)</button>
  209.             </div>
  210.         </div>
  212.     </div>
  215. {% endblock %}