{% extends 'global.html' %}
{% load i18n %}
{% load static %}
{% block site_style %}
<link rel="stylesheet" href="{% static "css/auth/new-styles.css" %}" media="screen" />
{% endblock %}
{% block extra_head %}
{% comment 'css is unavailable' %}
<link href="{% static "vendor/intl-tel-input/build/css/intlTelInput.css" %}" rel="stylesheet" media="screen">
{% endcomment %}
<style>{% include "ums/customer/css/icons.css" %}</style>
<link href="{% static "vendor/sweetalert2/sweetalert2.css" %}" rel="stylesheet" media="screen">
<style>
.iti.iti--allow-dropdown.iti--separate-dial-code {
width: 100%;
}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-882007835"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-882007835');
</script>
{% endblock %}
{% block content %}
{% get_current_language as LANGUAGE_CODE %}
<ul class="nav nav-tabs nav-justified pt-4 reg-login-nav">
<li class="nav-item">
<a class="nav-link active" href="#">{% trans 'New Registration' %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ums-login' %}">{% trans 'Login' %}</a>
</li>
</ul>
<div class="row mt-4 mx-2">
<div class="col-lg-8 offset-lg-2">
<div class="form-group">
<label>{% trans 'Phone Number' %}</label>
<input type="tel" name="phone_number" class="form-control" required />
<div class="invalid-feedback" id="phone_error"></div>
</div>
<div class="alert alert-danger" id="sendauth_error" role="alert"></div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<button type="button" class="btn btn-primary" id="send_auth" data-lang="{{ LANGUAGE_CODE }}" data-url="{% url 'api:v2:register-send-auth-code' %}">{% trans 'Send Authentication Code' %}</button>
</div>
</div>
<div class="row mx-2">
<div class="col-lg-8 offset-lg-2">
<div class="form-group">
<label for="id_password">{% trans 'Password' %}</label>
<input type="password" class="form-control" disabled name="password" id="id_password" required />
</div>
</div>
<div class="col-lg-8 offset-lg-2">
<div class="form-group">
<label for="store_name">{% trans 'Store Name' %}</label>
<input type="text" class="form-control" disabled name="password" id="store_name" required />
</div>
</div>
</div>
<div class="row mx-2">
<div class="col-lg-8 offset-lg-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="accept_terms" required disabled>
<label class="form-check-label" for="accept_terms">
{% blocktrans %}I agree to the <a href="https://easy-order.jp/terms-of-service/" target="_blank">Terms of Use</a> and <a href="https://easy-order.jp/privacy-policy/" target="_blank">Privacy Policy</a>{% endblocktrans %}
</label>
</div>
<div class="alert alert-danger" id="confirm_error" role="alert"></div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<button type="button" class="btn btn-primary" disabled id="register_confirm" data-url="{% url 'api:v2:register-confirm' %}">{% trans 'Register' %}</button>
</div>
</div>
<div class="modal fade" role="dialog" id="otpModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
<input class="m-2 text-center form-control otp-number" type="number" id="first" maxlength="1" />
<input class="m-2 text-center form-control otp-number" type="number" id="second" maxlength="1" />
<input class="m-2 text-center form-control otp-number" type="number" id="third" maxlength="1" />
<input class="m-2 text-center form-control otp-number" type="number" id="fourth" maxlength="1" />
<input class="m-2 text-center form-control otp-number" type="number" id="fifth" maxlength="1" />
<input class="m-2 text-center form-control otp-number" type="number" id="sixth" maxlength="1" />
</div>
<div class="my-2">
{% trans 'Please enter the one-time password sent to you' %}
</div>
<!-- Error message -->
<div class="alert alert-danger" id="otp_error" role="alert"></div>
</div>
<div class="modal-footer">
<div class="d-flex flex-md-row flex-column-reverse justify-content-md-between align-items-center w-100">
<div><button type="button" id="resend_otp" class="btn btn-link" data-url="{% url 'api:v2:register-resend-auth-code' %}">{% trans 'Send Again' %}</button></div>
<div>
<button type="button" class="btn btn-plain" data-dismiss="modal">{% trans 'Cancel' %}</button>
<button type="button" id="validate_otp" class="btn btn-primary" data-url="{% url 'api:v2:register-validate' %}">{% trans 'Confirm' context 'new store' %}</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block custom_js %}
<script src="https://www.gstatic.com/firebasejs/11.4.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/11.4.0/firebase-auth-compat.js"></script>
<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<script type="module" src="{% static "js/auth/add_new_store.js" %}"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.show_password').click(function(){
if($(this).is(':checked')){
$('#id_password').removeAttr('type').attr('type', 'text');
} else {
$('#id_password').removeAttr('type').attr('type', 'password');
}
});
$(document).on('input', '#login_id', function(){
let username = $(this).val();
let check_username = "{% url 'check_username' %}";
const csrftoken = "{{ csrf_token }}";
$.post(check_username, {
username: username,
csrfmiddlewaretoken: csrftoken
}).done(function(data){
if (data.message === 'ok'){
$('.make_red_or_green').html("{% trans 'Username is available' %}").removeClass('text-danger').addClass('text-success');
} else {
$('.make_red_or_green').html(data.message).removeClass('text-success').addClass('text-danger');
}
});
});
});
</script>
{% endblock %}