coffeeproject20230512/coffeeproject/app/templates/registration.html

<!-- 宣告我們要套用模板 -->
{% extends "sign_in_base.html" %}
{% block script %}
    <script src="../static/js/registration.js"></script>
{% endblock %}

{% block style %}
    <style>
      .form-signin {
         max-width: 330px;
         padding: 15px;
      }

      .form-signin .form-floating:focus-within {
         z-index: 2;
      }

      .form-signin input[type="email"] {
         margin-bottom: -1px;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
      }

      .form-signin input[type="password"] {
         margin-bottom: 10px;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
      }
    </style>   
{% endblock %}

{% block main %}      
  <form  method="post" action="/register">
    <img class="mb-4" src="../static/img/ALMIGHTY_RAY.jpg" alt="" >
    <img class="mb-4" src="../static/img/SKYAI.jpg" alt="" >
    <h1 class="h3 mb-3 fw-normal">Sign up</h1>
    <h1 class="h5 mb-5 fw-normal">create a new account</h1>   
    <div class="form-floating">
      <input type="text" class="form-control"  name="firstname" placeholder="名/Firstname" required>
      <label for="firstname">名/Firstname</label>
    </div>
  
    <div class="form-floating">
      <input type="text" class="form-control"  name="lastname" placeholder="姓/Lastname" required> 
      <label for="lastname">姓/Lastname</label>
    </div>

    <div class="form-floating">
      <input type="email" class="form-control" id="email" name="email" placeholder="信箱/Email" oninput="setCustomValidity('');" onchange="$.get('/check_email',   'email='+document.getElementById('email').value,function(resText){
                    if(resText.errMsg){
                        setCustomValidity('信箱重複');
                    }
                },'json');" required>
      <label for="email">信箱/Email</label>
    </div>

    <div class="form-floating">
      <input type="tel" class="form-control"  name="phone" placeholder="手機/Phone 09xx-xxx-xxx"  minlength="10"
       maxlength="14" pattern="[0-9]{4}[0-9]{3}[0-9]{3}"
       required>
      <label for="phone">手機/Phone 09xx-xxx-xxx</label>
    </div>

    <div class="form-floating">
      <input type="text" class="form-control" id="username" name="username" placeholder="使用者名稱/Username" oninput="setCustomValidity('');" onchange="$.get('/check_username',   'username='+document.getElementById('username').value,function(resText){
                    if(resText.errMsg){
                        setCustomValidity('使用者名稱重複');
                    }
                },'json');" required>
      <label for="username">使用者名稱/Username</label>     
    </div>
  
    <div class="form-floating">
      <input type="text" class="form-control" id="password" name="password" placeholder="密碼/Password" minlength="6"
       maxlength="12" required>
      <label for="password">密碼/Password</label> 
    </div> 

    <div class="form-floating">
      <input type="password" class="form-control"  id="confirmpwd" name="confirmpwd" placeholder="確認密碼/Confirm Password" minlength="6"
       maxlength="12" oninput="setCustomValidity('');" onchange="if(document.getElementById('password').value != document.getElementById('confirmpwd').value){setCustomValidity('密碼不吻合');}" required>
      <label for="confirmpwd">確認密碼/Confirm Password</label> 
    </div>    
       
    <button class="w-40 btn btn-lg btn-secondary" type="submit">Sign up</button>
    <button class="w-40 btn btn-lg btn-secondary" type="button" onclick="Login();">Cancel</button>
  </form>
{% endblock %}