dashboard-settings.html

{% extends 'dashboard-layout.html' %}
{% block head %}
    <link rel="stylesheet" href="/styles/dashboard-settings.css">
{% endblock %}
{% block body %}
    <div>
        <h1>Account Settings</h1>
        <!-- will prob display different stuff here based on employee -->
    </div>
    <div class="container">
        {% if session.get('userType') == 'customer' %}
        <div class="item">
            <h3>Personal Info:</h3>
            <p>Full Name:</p>
            <input type="text" id="fullname">
            <p>Phone Number:</p>
            <input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
            <button onclick="updateCustomerInfo()">Confirm new information</button>
        </div>
        {% endif %}
        
        <div class="item">
            <h3>Password Change:</h3>
            <label for="current">Enter current password:</label>
            <input type="password" id="current">
            <label for="new">Enter new password:</label>
            <input type="password" id="new">
            <label for="confirmnew">Confirm new password:</label>
            <input type="password" id="confirmnew">
            <button onclick="changePassword()">Confirm new password</button>
            <p class="donotmatch">Passwords do not match</p>
        </div>

        {% if session.get('employeeType') == 'manager' %}
            <div class="item">
                <h3>Create Employee Account:</h3>
                <div class="employeeselect">
                    <p>Choose Employee Account Type:</p>
                    <select onchange="selectHandler()" id="employeeselector">
                        <option value="0">Manager</option>
                        <option value="1">Chef</option>
                        <option value="2">Delivery</option>
                    </select>
                </div>
                <label for="username">Enter username:</label>
                <input type="text" id="username">
                <label for="unew">Enter password:</label>
                <input type="password" id="unew">
                <label for="unewconfirm">Confirm password:</label>
                <input type="password" id="unewconfirm">
                <p class="donotmatch">Passwords do not match</p>
                <button = onclick="createUser()">Create Employee Account</button>
            </div>
        {% endif %}
    </div>
    <script src="/scripts/dashboard-settings.js"></script>
    {% if session.get('employeeType') == 'manager' %}<script src="/scripts/dashboard-settings-createAccount.js"></script> {% endif %}
    {% if session.get('userType') == 'customer' %}<script src="/scripts/dashboard-settings-customer.js"></script> {% endif %}
{% endblock %}