templates/registration/register.html.twig line 16

  1. {% extends 'base.html.twig' %}
  2. {% import "macros/form-input.html.twig" as inputMacro %}
  3. {% import 'macros/doc-upload.html.twig' as docUpload %}
  5. {% block title %}Register{% endblock %}
  7. {% block body %}
  8.     <div class="w-full max-w-screen-2xl py-16 mx-auto px-6">
  9.       <h1 class="md:text-4xl text-3xl font-bold text-gray-800 text-center">
  10.         Membership Application Form
  11.       </h1>
  12.       <p class="text-lg text-gray-800 text-center my-5">
  13.         Please fill up the form below to apply for membership.
  14.       </p>
  15.       <div class="w-full max-w-lg mx-auto my-5 py-5">
  16.         {{ form_start(registrationForm, { 'attr': {'autocomplete': 'off','id':'js-registration_form'}}) }}
  17.           <div class="w-full flex flex-col gap-4">
  18.             <h3 class="text-base text-gray-800 font-semibold mb-2">
  19.               Gender
  20.             </h3>
  21.             <div class="grid lg:grid-cols-3 gap-3">
  22.               <div class="lg:col-span-2">
  23.                 <div class="w-full flex md:flex-row flex-col md:items-center mb-4 gap-3">
  24.                   <div class="inline-flex items-center gap-x-2">
  25.                     <input
  26.                       id="male"
  27.                       name="{{ field_name(registrationForm.gender) }}"
  28.                       value="M"
  29.                       type="radio"
  30.                       class="
  31.                         inline-block
  32.                         w-4
  33.                         h-4
  34.                         rounded
  35.                         accent-brand
  36.                         border-brand
  37.                         focus:ring-0
  38.                         active:ring-0
  39.                       "
  40.                       required
  41.                     >
  42.                     <label
  43.                       for="male"
  44.                       class="grow ml-2 font-normal text-gray-700 cursor-pointer text-base"
  45.                     >
  46.                       Male
  47.                     </label>
  48.                   </div>
  49.                   <div class="inline-flex items-center gap-x-2">
  50.                     <input
  51.                       id="female"
  52.                       name="{{ field_name(registrationForm.gender) }}"
  53.                       value="F"
  54.                       type="radio"
  55.                       class="
  56.                         inline-block
  57.                         w-4
  58.                         h-4
  59.                         rounded
  60.                         accent-brand
  61.                         border-brand
  62.                         focus:ring-0
  63.                         active:ring-0
  64.                       "
  65.                       required
  66.                     >
  67.                     <label
  68.                       for="female"
  69.                       class="grow ml-2 font-normal text-gray-700 cursor-pointer text-base"
  70.                     >
  71.                       Female
  72.                     </label>
  73.                   </div>
  74.                   <div class="inline-flex items-center gap-x-2">
  75.                     <input
  76.                       id="other"
  77.                       name="{{ field_name(registrationForm.gender) }}"
  78.                       value="O"
  79.                       type="radio"
  80.                       class="
  81.                         inline-block
  82.                         w-4
  83.                         h-4
  84.                         rounded
  85.                         accent-brand
  86.                         border-brand
  87.                         focus:ring-0
  88.                         active:ring-0
  89.                       "
  90.                       required
  91.                     >
  92.                     <label
  93.                       for="other"
  94.                       class="grow ml-2 font-normal text-gray-700 cursor-pointer text-base"
  95.                     >
  96.                       Other
  97.                     </label>
  98.                   </div>
  99.                 </div>
  100.                 {{ inputMacro.input
  101.                     (
  102.                       field_name(registrationForm.email),
  103.                       field_value(registrationForm.email),
  104.                       field_label(registrationForm.email),
  105.                       'email',
  106.                       true,
  107.                       true,
  108.                       false,
  109.                       'email'
  110.                     )
  111.                 }}
  112.                 {{ inputMacro.input
  113.                   (
  114.                     field_name(registrationForm.phoneNo),
  115.                     field_value(registrationForm.phoneNo),
  116.                     'Phone No.',
  117.                     'tel',
  118.                     true,
  119.                     false,
  120.                     false,
  121.                     'phone'
  122.                   )
  123.                 }}
  124.               </div>
  125.               <div class="lg:col-span-1 flex lg:justify-end">
  126.                 {{ form_start(uploadForm,
  127.                   {'attr': {
  128.                     'id': 'profile-image'
  129.                     }
  130.                   })
  131.                 }}
  132.                   <div class="w-36 h-36 rounded-lg bg-gray-100 relative overflow-hidden">
  133.                     <div class="profile-img-result absolute w-full h-full bg-gray-100 inline-flex items-center justify-center">
  134.                       <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 fill-gray-400" viewBox="0 0 24 24">
  135.                         <path d="M19,4h-.508L16.308,1.168A3.023,3.023,0,0,0,13.932,0H10.068A3.023,3.023,0,0,0,7.692,1.168L5.508,4H5A5.006,5.006,0,0,0,0,9V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V9A5.006,5.006,0,0,0,19,4ZM9.276,2.39A1.006,1.006,0,0,1,10.068,2h3.864a1.008,1.008,0,0,1,.792.39L15.966,4H8.034ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V9A3,3,0,0,1,5,6H19a3,3,0,0,1,3,3Z"/>
  136.                         <path d="M12,8a6,6,0,1,0,6,6A6.006,6.006,0,0,0,12,8Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,12,18Z"/>
  137.                       </svg>
  138.                     </div>
  139.                     <div class="relative opacity-0 w-full h-full">
  140.                       <input type="file" id="profile-image-input" name="{{ field_name(uploadForm.media) }}" accept=".png,.jpg,.jpeg" class="block opacity-0 w-full h-full cursor-pointer py-2" />
  141.                     </div>
  142.                     <div class="absolute w-full py-1.5 text-xs text-center bottom-0 bg-black text-white">
  143.                       Upload
  144.                     </div>
  145.                   </div>
  146.                 {{ form_end(uploadForm) }}
  147.               </div>
  148.             </div>
  149.             <div class="grid lg:grid-cols-2 gap-3">
  150.               <div class="lg:col-span-1">
  151.                 {{ inputMacro.input
  152.                     (
  153.                       field_name(registrationForm.firstName),
  154.                       field_value(registrationForm.firstName),
  155.                       field_label(registrationForm.firstName),
  156.                       'text',
  157.                       true,
  158.                       false,
  159.                       false,
  160.                       'fname'
  161.                     )
  162.                 }}
  163.               </div>
  164.               <div class="lg:col-span-1">
  165.                 {{ inputMacro.input
  166.                     (
  167.                       field_name(registrationForm.lastName),
  168.                       field_value(registrationForm.lastName),
  169.                       field_label(registrationForm.lastName),
  170.                       'text',
  171.                       true,
  172.                       false,
  173.                       false,
  174.                       'lname'
  175.                     )
  176.                 }}
  177.               </div>
  178.             </div>
  180.             <div class="grid lg:grid-cols-3 gap-3">
  181.               <div class="lg:col-span-1">
  182.             {{ inputMacro.input
  183.               (
  184.                 field_name(registrationForm.houseNumber),
  185.                 field_value(registrationForm.houseNumber),
  186.                 'House Number',
  187.                 'text',
  188.                 true,
  189.                 false,
  190.                 false,
  191.                 'houseNumber'
  192.               )
  193.             }}
  194.             </div>
  195.             <div class="lg:col-span-1">
  196.             {{ inputMacro.input
  197.               (
  198.                 field_name(registrationForm.street),
  199.                 field_value(registrationForm.street),
  200.                 'Street',
  201.                 'text',
  202.                 true,
  203.                 false,
  204.                 false,
  205.                 'street'
  206.               )
  207.             }}
  208.             </div>
  209.             <div class="lg:col-span-1">
  210.             {{ inputMacro.input
  211.               (
  212.                 field_name(registrationForm.postCode),
  213.                 field_value(registrationForm.postCode),
  214.                 'postCode',
  215.                 'text',
  216.                 true,
  217.                 false,
  218.                 false,
  219.                 'postCode'
  220.               )
  221.             }}
  222.             </div>
  223.             </div>
  225.             {{ inputMacro.input
  226.                 (
  227.                   field_name(registrationForm.plainPassword),
  228.                   field_value(registrationForm.plainPassword),
  229.                   'Password',
  230.                   'password',
  231.                   true,
  232.                   false,
  233.                   false,
  234.                   'password'
  235.                 )
  236.             }}
  240.             <div class="w-full flex items-center mt-4 mb-8">
  241.               <input
  242.                       id="agree"
  243.                       name="{{ field_name(registrationForm.agreeTerms) }}"
  244.                       value="{{ field_value(registrationForm.agreeTerms) }}"
  245.                       type="checkbox"
  246.                       class="
  247.                 inline-block
  248.                 w-4
  249.                 h-4
  250.                 rounded
  251.                 accent-brand
  252.                 border-brand
  253.                 focus:ring-0
  254.                 active:ring-0
  255.               "
  256.                       required
  257.               >
  258.               <label
  259.                       for="agree"
  260.                       class="grow ml-2 font-normal text-gray-700 cursor-pointer text-base"
  261.               >
  262.                 Agree
  263.               </label>
  264.             </div>
  265.             <input type="hidden" name="imageType" value="LG">
  266.             <input type="hidden" name="imageMetadata" class="metadata-profile">
  267.             <div class="w-full text-center mt-4">
  268.               <button
  269.                 type="submit"
  270.                 class="
  271.                   next
  272.                   rounded-full
  273.                   bg-transparent
  274.                   border
  275.                   border-brand
  276.                   px-12
  277.                   py-3
  278.                   inline-flex
  279.                   items-center
  280.                   justify-center
  281.                   text-base
  282.                   group
  283.                   font-semibold
  284.                   transition-all
  285.                   duration-500
  286.                   relative
  287.                   overflow-hidden
  288.                   after:content=['']
  289.                   after:w-0
  290.                   after:h-full
  291.                   after:absolute
  292.                   after:block
  293.                   after:inset-0
  294.                   hover:after:w-full
  295.                   after:transition-all
  296.                   after:duration-500
  297.                   after:bg-brand
  298.                   after:text-white
  299.                 "
  300.               >
  301.                 <span class="z-10 group-hover:text-white text-brand transition-all duration-700">
  302.                   Submit
  303.                 </span>
  304.               </button>
  305.             </div>
  306.           </div>
  307.         {{ form_end(registrationForm) }}
  308.       </div>
  309.     </div>
  311.     <script>
  312.       function registerUser(){
  313.         const registrationForm =  document.querySelector('#js-registration_form');
  314.         const registrationFormData = new FormData(registrationForm);
  315.         $.ajax({
  316.           url: '{{ path('app_register') }}',
  317.           method: 'POST',
  318.           data: registrationFormData,
  319.           processData: false,
  320.           contentType: false,
  321.           success: function(r) {
  322.             const response = JSON.parse(r)
  323.             if (response.status =='success'){
  324.               console.log(response)
  325.             } else {
  326.               return displayToast(response.message, 'error', 3000)
  327.             }
  328.           },
  329.           error: function (e) {
  330.             const error = JSON.parse(e)
  331.             return displayToast(error.message, 'error', 3000)
  332.           }
  333.         });
  334.       }
  336.       document.getElementById("profile-image-input").onchange = function(){
  337.         const uploadedImage = URL.createObjectURL(this.files[0])
  338.         
  339.         const formData = new FormData()
  340.         formData.append('mediaType', 'LG')
  341.         formData.append('upload_form[media]', this.files[0], this.files[0].name)
  342.         formData.append('upload_form[_token]', $('#upload_form__token').val())
  344.         $('.profile-img-result').html(`
  345.           <img src="${uploadedImage}" class="w-full h-full object-cover object-center">
  346.         `)
  348.         $.ajax({
  349.             url: '{{ path('image_upload_post') }}',
  350.             method: 'POST',
  351.             data: formData,
  352.             processData: false,
  353.             contentType: false,
  354.             success: function(r) {
  355.               const response = JSON.parse(r)
  356.               $('.metadata-profile').val(response.imageMetadataUid)
  357.             },
  358.             error: function (e) {
  359.               const error = JSON.parse(e)
  360.               return displayToast(error.message, 'error', 3000)
  361.             }
  362.           })
  363.       }
  364.     </script>
  365. {% endblock %}