InigoValentin/frontend/src/app/components/message/message.component.html

<div id='message_cover' onClick='closeMessage();'></div>
<section id='message'>
  <h3>
    <span>{{'MESSAGE.TITLE' | translate}}</span>
    <div id='message_close'>
      <a onClick='closeMessage();'>
        <img src='./img/control/close.svg'/>
      </a>
    </div>
  </h3>
  <div id='message_form'>
    <p>{{'MESSAGE.INFO' | translate}}</p>
    <form #messageForm='ngForm' (ngSubmit)='onSubmit(messageForm)'>
      <div>
        <label for='name'>{{'MESSAGE.LABEL.NAME' | translate}}</label>
        <input type='text' name='name' ngModel required/>
      </div>
      <div>
        <span id='error_name' class='error'>{{'MESSAGE.ERROR.NAME' | translate}}</span>
      </div>
      <div>
        <label for='email'>{{'MESSAGE.LABEL.EMAIL' | translate}}</label>
        <input type='text' name='email' ngModel required/>
      </div>
      <div>
        <span id='error_email' class='error'>{{'MESSAGE.ERROR.EMAIL' | translate}}</span>
      </div>
      <div>
        <label for='email'>{{'MESSAGE.LABEL.SUBJECT' | translate}}</label>
        <input type='text' name='subject' ngModel required/>
      </div>
      <div>
        <span id='error_subject' class='error'>{{'MESSAGE.ERROR.SUBJECT' | translate}}</span>
      </div>
      <div>
        <label for='message'>{{'MESSAGE.LABEL.MESSAGE' | translate}}</label>
        <span id='error_message' class='error'>{{'MESSAGE.ERROR.MESSAGE' | translate}}</span>
        <textarea placeholder='Your message' name='text' ngModel required></textarea>
      </div>
      <div>
        <input type='checkbox' name='consent' ngModel required/>
        <label for='consent' class='long'>{{'MESSAGE.LABEL.CONSENT' | translate}}</label>
      </div>
      <div>
        <span id='error_consent' class='error'>{{'MESSAGE.ERROR.CONSENT' | translate}}.</span>
      </div>
      <div><input type='submit' value="{{'MESSAGE.SEND' | translate}}"/></div>
    </form>
  </div>
  <div id='message_confirmation'>
    <h4>{{'MESSAGE.SENT' | translate}}</h4>
    <p>{{'MESSAGE.SUCCESS' | translate}}</p>
    <input type='button' onclick='closeMessage();' value="{{'CLOSE' | translate}}"/>
  </div>
</section>