templates/register.htm

  <h1>Sign up for 
    <?php echo $SERVICE_ACRONYM;?>
</h1>

<form class="row g-3 needs-validation" novalidate data-toggle="validator" action="" method="POST">
    <!-- Username input -->
    <div class="col-md-4">
        <label class="form-label font-weight-bold" for="form3Example3">Username</label>
        <input pattern="[^\s]{<?php echo $VAL_USER->min_username.','.$VAL_USER->max_username;?>}" required
            title="At least 5 not whitespace characters" name="username" type="text" id="form3Example0"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['username'])){echo 'border-danger';}?>"
            placeholder="johndoe"
            value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" />
        <div class="invalid-feedback">
            Please choose a username with at least 5 not whitespace characters.
        </div>
    </div>
    <!-- 2 column grid layout with text inputs for the first and last names -->
        <div class="col-md-4">
            <div class="form-outline">
                <label class="form-label font-weight-bold" for="form3Example1">First name</label>
                <input pattern="[^\s]{<?php echo $VAL_USER->min_first_name.','.$VAL_USER->max_first_name;?>}" required
                    title="At least 2 not whitespace characters" name="first_name" type="text" id="form3Example1"
                    class="form-control <?php if(isset($error) && $error && !isset($_POST['first_name'])){echo 'border-danger';}?>"
                    placeholder="John"
                    value="<?php echo isset($_POST['first_name']) ? htmlspecialchars($_POST['first_name']) : '' ?>" />
                <div class="invalid-feedback">
                        Please provide a first name with at least 2 characters.
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-outline">
                <label class="form-label font-weight-bold" for="form3Example2">Last name</label>
                <input pattern="[^\s]{<?php echo $VAL_USER->min_last_name.','.$VAL_USER->max_last_name;?>}" required
                    title="At least 2 not whitespace characters" name="last_name" type="text" id="form3Example2"
                    class="form-control <?php if(isset($error) && $error && !isset($_POST['last_name'])){echo 'border-danger';}?>"
                    placeholder="Doe"
                    value="<?php echo isset($_POST['last_name']) ? htmlspecialchars($_POST['last_name']) : '' ?>" />
                <div class="invalid-feedback">
                   Please provide a last name with at least 2 characters.
                </div>
            </div>
        </div>

    <div class="form-outline md-6">
        <label class="form-label font-weight-bold" for="organization">Institution / Organization</label>
        <input required name="organization" type="text" id="organization"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['organization'])){echo 'border-danger';}?>"
            placeholder="Example University"
            pattern=".{3,64}"
            type="text"
            value="<?php echo isset($_POST['organization']) ? htmlspecialchars($_POST['organization']) : '' ?>" />
            <div class="invalid-feedback">
                Please indicate the institution or organization you are affiliated with.
            </div>
    </div>

    <!--
    <div class="form-outline col-md-6">
        <label for="address-line-1" class="form-label form-label font-weight-bold">Address line 1</label>
        <input name="address-line-1" type="text" class="form-control" id="address-line-1"/>
    </div>
    Address line 1-->

    <!-- Street -->
    <div class="form-outline col-md-12">
        <label for="street" class="form-label form-label font-weight-bold">Street</label>
        <input name="street" type="text" class="form-control" id="street"
        placeholder="1234 Main St"
        value="<?php echo isset($_POST['street']) ? htmlspecialchars($_POST['street']) : '' ?>"
        required/>
        <div class="invalid-feedback">
            Please provide a valid street.
        </div>
    </div>

    <!-- Zip code -->
    <div class="form-outline col-md-3">
        <label for="zip-code" class="form-label form-label font-weight-bold">Zip</label>
        <input name="zip" type="text" class="form-control" id="zip-code"
        value="<?php echo isset($_POST['zip']) ? htmlspecialchars($_POST['zip']) : '' ?>"
        required/>
        <div class="invalid-feedback">
            Please provide a valid zip or postal code.
        </div>
    </div>

    <!-- City -->
    <div class="form-outline col-md-5">
        <label for="city" class="form-label form-label font-weight-bold">City</label>
        <input name="city" type="text" class="form-control" id="city"
        value="<?php echo isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '' ?>"
        required/>
        <div class="invalid-feedback">
            Please provide a valid city.
        </div>
    </div>

    <!-- Country -->
    <div class="form-outline col-md-6">
        <label for="country" class="form-label form-label font-weight-bold">Country</label>
        <input class="form-control" list="countries" name="country" id="country" 
        value="<?php echo isset($_POST['country']) ? htmlspecialchars($_POST['country']) : '' ?>"
        required placeholder="Type to search your country...">
        <datalist id="countries">
            <option value="Afghanistan">
            <option value="Åland Islands">
            <option value="Albania">
            <option value="Algeria">
            <option value="American Samoa">
            <option value="Andorra">
            <option value="Angola">
            <option value="Anguilla">
            <option value="Antarctica">
            <option value="Antigua and Barbuda">
            <option value="Argentina">
            <option value="Armenia">
            <option value="Aruba">
            <option value="Australia">
            <option value="Austria">
            <option value="Azerbaijan">
            <option value="Bahamas">
            <option value="Bahrain">
            <option value="Bangladesh">
            <option value="Barbados">
            <option value="Belarus">
            <option value="Belgium">
            <option value="Belize">
            <option value="Benin">
            <option value="Bermuda">
            <option value="Bhutan">
            <option value="Bolivia, Plurinational State of">
            <option value="Bonaire, Sint Eustatius and Saba">
            <option value="Bosnia and Herzegovina">
            <option value="Botswana">
            <option value="Bouvet Island">
            <option value="Brazil">
            <option value="British Indian Ocean Territory">
            <option value="Brunei Darussalam">
            <option value="Bulgaria">
            <option value="Burkina Faso">
            <option value="Burundi">
            <option value="Cambodia">
            <option value="Cameroon">
            <option value="Canada">
            <option value="Cape Verde">
            <option value="Cayman Islands">
            <option value="Central African Republic">
            <option value="Chad">
            <option value="Chile">
            <option value="China">
            <option value="Christmas Island">
            <option value="Cocos (Keeling) Islands">
            <option value="Colombia">
            <option value="Comoros">
            <option value="Congo">
            <option value="Congo, the Democratic Republic of the">
            <option value="Cook Islands">
            <option value="Costa Rica">
            <option value="Côte d'Ivoire">
            <option value="Croatia">
            <option value="Cuba">
            <option value="Curaçao">
            <option value="Cyprus">
            <option value="Czech Republic">
            <option value="Denmark">
            <option value="Djibouti">
            <option value="Dominica">
            <option value="Dominican Republic">
            <option value="Ecuador">
            <option value="Egypt">
            <option value="El Salvador">
            <option value="Equatorial Guinea">
            <option value="Eritrea">
            <option value="Estonia">
            <option value="Ethiopia">
            <option value="Falkland Islands (Malvinas)">
            <option value="Faroe Islands">
            <option value="Fiji">
            <option value="Finland">
            <option value="France">
            <option value="French Guiana">
            <option value="French Polynesia">
            <option value="French Southern Territories">
            <option value="Gabon">
            <option value="Gambia">
            <option value="Georgia">
            <option value="Germany">
            <option value="Ghana">
            <option value="Gibraltar">
            <option value="Greece">
            <option value="Greenland">
            <option value="Grenada">
            <option value="Guadeloupe">
            <option value="Guam">
            <option value="Guatemala">
            <option value="Guernsey">
            <option value="Guinea">
            <option value="Guinea-Bissau">
            <option value="Guyana">
            <option value="Haiti">
            <option value="Heard Island and McDonald Islands">
            <option value="Holy See (Vatican City State)">
            <option value="Honduras">
            <option value="Hong Kong">
            <option value="Hungary">
            <option value="Iceland">
            <option value="India">
            <option value="Indonesia">
            <option value="Iran, Islamic Republic of">
            <option value="Iraq">
            <option value="Ireland">
            <option value="Isle of Man">
            <option value="Israel">
            <option value="Italy">
            <option value="Jamaica">
            <option value="Japan">
            <option value="Jersey">
            <option value="Jordan">
            <option value="Kazakhstan">
            <option value="Kenya">
            <option value="Kiribati">
            <option value="Korea, Democratic People's Republic of">
            <option value="Korea, Republic of">
            <option value="Kuwait">
            <option value="Kyrgyzstan">
            <option value="Lao People's Democratic Republic">
            <option value="Latvia">
            <option value="Lebanon">
            <option value="Lesotho">
            <option value="Liberia">
            <option value="Libya">
            <option value="Liechtenstein">
            <option value="Lithuania">
            <option value="Luxembourg">
            <option value="Macao">
            <option value="Macedonia, the former Yugoslav Republic of">
            <option value="Madagascar">
            <option value="Malawi">
            <option value="Malaysia">
            <option value="Maldives">
            <option value="Mali">
            <option value="Malta">
            <option value="Marshall Islands">
            <option value="Martinique">
            <option value="Mauritania">
            <option value="Mauritius">
            <option value="Mayotte">
            <option value="Mexico">
            <option value="Micronesia, Federated States of">
            <option value="Moldova, Republic of">
            <option value="Monaco">
            <option value="Mongolia">
            <option value="Montenegro">
            <option value="Montserrat">
            <option value="Morocco">
            <option value="Mozambique">
            <option value="Myanmar">
            <option value="Namibia">
            <option value="Nauru">
            <option value="Nepal">
            <option value="Netherlands">
            <option value="New Caledonia">
            <option value="New Zealand">
            <option value="Nicaragua">
            <option value="Niger">
            <option value="Nigeria">
            <option value="Niue">
            <option value="Norfolk Island">
            <option value="Northern Mariana Islands">
            <option value="Norway">
            <option value="Oman">
            <option value="Pakistan">
            <option value="Palau">
            <option value="Palestinian Territory, Occupied">
            <option value="Panama">
            <option value="Papua New Guinea">
            <option value="Paraguay">
            <option value="Peru">
            <option value="Philippines">
            <option value="Pitcairn">
            <option value="Poland">
            <option value="Portugal">
            <option value="Puerto Rico">
            <option value="Qatar">
            <option value="Réunion">
            <option value="Romania">
            <option value="Russian Federation">
            <option value="Rwanda">
            <option value="Saint Barthélemy">
            <option value="Saint Helena, Ascension and Tristan da Cunha">
            <option value="Saint Kitts and Nevis">
            <option value="Saint Lucia">
            <option value="Saint Martin (French part)">
            <option value="Saint Pierre and Miquelon">
            <option value="Saint Vincent and the Grenadines">
            <option value="Samoa">
            <option value="San Marino">
            <option value="Sao Tome and Principe">
            <option value="Saudi Arabia">
            <option value="Senegal">
            <option value="Serbia">
            <option value="Seychelles">
            <option value="Sierra Leone">
            <option value="Singapore">
            <option value="Sint Maarten (Dutch part)">
            <option value="Slovakia">
            <option value="Slovenia">
            <option value="Solomon Islands">
            <option value="Somalia">
            <option value="South Africa">
            <option value="South Georgia and the South Sandwich Islands">
            <option value="South Sudan">
            <option value="Spain">
            <option value="Sri Lanka">
            <option value="Sudan">
            <option value="Suriname">
            <option value="Svalbard and Jan Mayen">
            <option value="Swaziland">
            <option value="Sweden">
            <option value="Switzerland">
            <option value="Syrian Arab Republic">
            <option value="Taiwan, Province of China">
            <option value="Tajikistan">
            <option value="Tanzania, United Republic of">
            <option value="Thailand">
            <option value="Timor-Leste">
            <option value="Togo">
            <option value="Tokelau">
            <option value="Tonga">
            <option value="Trinidad and Tobago">
            <option value="Tunisia">
            <option value="Turkey">
            <option value="Turkmenistan">
            <option value="Turks and Caicos Islands">
            <option value="Tuvalu">
            <option value="Uganda">
            <option value="Ukraine">
            <option value="United Arab Emirates">
            <option value="United Kingdom">
            <option value="United States">
            <option value="United States Minor Outlying Islands">
            <option value="Uruguay">
            <option value="Uzbekistan">
            <option value="Vanuatu">
            <option value="Venezuela, Bolivarian Republic of">
            <option value="Viet Nam">
            <option value="Virgin Islands, British">
            <option value="Virgin Islands, U.S.">
            <option value="Wallis and Futuna">
            <option value="Western Sahara">
            <option value="Yemen">
            <option value="Zambia">
            <option value="Zimbabwe">
        </datalist>
        <div class="invalid-feedback">
            Please provide a valid country.
        </div>
    </div>

    <!-- Email input -->
    <div class="form-outline md-6">
        <label class="form-label font-weight-bold" for="email">Email address</label>
        <input required name="email" type="email" id="email"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['email'])){echo 'border-danger';}?>"
            type="email"
            pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
            placeholder="myemail@example.org"
            value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" />
            <div class="invalid-feedback">
                Please provide a valid email address.
            </div>
    </div>

    <!-- Phone number -->
    <div class="form-outline md-6">
        <label class="form-label font-weight-bold" for="phone">Phone number</label>
        <input required name="phone" type="tel" id="phone"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['phone'])){echo 'border-danger';}?>"
            pattern="\+\d[\s\d-]+$"
            placeholder="+1 234 567 890"
            value="<?php echo isset($_POST['phone']) ? htmlspecialchars($_POST['phone']) : '' ?>" 
            required/>
            <i class='bx bxs-phone'></i>
            <div class="invalid-feedback">
                Please provide a valid phone number.
            </div>
    </div>

    <!-- Password input -->
    <div id="password-div" class="col-md-8">
        <label class="form-label font-weight-bold" for="pw1">Password</label>
        <input required
            title="Combination of upper and lowercase letters, numbers, punctuation, and special symbols" name="password" type="password" id="pw1"
            class="form-control"
            placeholder="********"  oninput="check_password_match()"
            value="<?php echo isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '' ?>" />
    </div>
    <div class="col-md-4">
        <label class="form-label" for="pwqinfo">Rating</label>
        <input class="form-control" type="text" id="pwqinfo" readonly />
    </div>

    <div class="col-md-12">
        <div class="progress mt-2">
            <div class="progress-bar bg-danger" role="progressbar" id="pwqbar" aria-valuenow="0" aria-valuemin="0"
                aria-valuemax="100"></div>
        </div>

    </div>
    <!--
    <div class="form-group">
        <label for="pwqinfo">Password rating</label>
        <input class="form-control" type="text" name="pwqinfo" id="pwqinfo" readonly>
        <div class="progress mt-2">
            <div class="progress-bar bg-danger" role="progressbar" id="pwqbar2" aria-valuenow="0" aria-valuemin="0"
                aria-valuemax="100"></div>
        </div>
    </div>
    -->
    <!-- Password confirmation input -->
    <div id="pwconfirm" class="form-outline col-md-8">
        <label class="form-label font-weight-bold" for="pw2">Confirm your Password</label>
        <input  required
            name="password_confirm" type="password" id="pw2"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['password_confirm'])){echo 'border-danger';}?>"
            placeholder="********" oninput="check_password_match()" 
            value="<?php echo isset($_POST['password_confirm']) ? htmlspecialchars($_POST['password_confirm']) : '' ?>" />
            <div class="invalid-feedback">
                Passwords do not match.
            </div>
    </div> 
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="eula">End User License Agreement</label>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="eula_signed" id="eula" required
                title="You need to agree to the EULA in order to proceed"
                <?php echo isset($_POST['eula_signed']) ? 'checked' : '' ?>
                value="eula">
            <label class="form-check-label" for="eula">I have read and agree to to the
                <?php echo $SERVICE_NAME; ?> <a
                    href="https://www2.ids-mannheim.de/cosmas2/projekt/register/license_agreement.html">End User License
                    Agreement</a> and will use
                <?php echo $SERVICE_NAME; ?> only for academic and non-commercial purposes.
            </label>
            <div class="invalid-feedback">
                You need to agree to the EULA in order to proceed.
            </div>
        </div>
    </div>
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="privacy_policy">Privacy Policy</label>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="privacy_policy_signed" id="privacy_policy" required
                title="You need to agree to the privacy policy in order to proceed"
                <?php echo isset($_POST['privacy_policy_signed']) ? 'checked' : '' ?>
                value="privacy_policy">
            <label class="form-check-label" for="privacy_policy">I have read and agree
                to to the
                <?php echo $SERVICE_NAME; ?> <a
                    href="https://www2.ids-mannheim.de/cosmas2/web-app/datenschutz.html">Privacy Policy</a>.
            </label>
            <div class="invalid-feedback">
                You need to agree to the privacy policy in order to proceed.
            </div>
        </div>
    </div>

    <?php if($CAPTCHA_LENGTH > 0): ?>
    <!--captcha here-->
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="form3Example4">Captcha</label>
        <div class="container mb-2 offset-md-2">
            <img id="captcha" src="<?php echo $BASE_URL.'/captcha.php?token='.$_SESSION['captcha_token']; ?>" />
            <div id="reload_captcha">
                <button id="reload" class="btn btn-outline-info" type="button"> <span class="glyphicon glyphicon-refresh"
                        aria-hidden="true"></span></button>
            </div>
        </div>
        <input pattern="[^\s]{<?php echo $CAPTCHA_LENGTH; ?>,}" required
            title="Please fill the captcha. It has <?php echo $CAPTCHA_LENGTH; ?> characters" name="captcha" type="text" id="form3Example6"
            class="form-control" placeholder="Type what you see on the image above" />
            <div class="invalid-feedback">
                Type what you see on the image above.
            </div>
    </div>
    <?php endif; ?>

    <!-- Submit button -->
    <button name="type" value="register" type="submit" class="btn btn-primary float-right btn-md">Sign up</button>

</form>
</div>