mirror of
https://github.com/raseels-repos/golang-saas-starter-kit.git
synced 2025-06-08 23:56:37 +02:00
348 lines
20 KiB
Plaintext
348 lines
20 KiB
Plaintext
{{define "title"}}Update Account{{end}}
|
|
{{define "style"}}
|
|
|
|
{{end}}
|
|
{{define "content"}}
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/account">Account</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Update</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
<h1 class="h3 mb-0 text-gray-800">Update Account Settings</h1>
|
|
</div>
|
|
|
|
<form class="user" method="post" novalidate>
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<div class="card shadow mb-4">
|
|
<div class="card-body">
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-6">
|
|
<label for="AccountName">Account Name</label>
|
|
<input type="text" id="AccountName"
|
|
class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}"
|
|
name="Name" value="{{ $.form.Name }}" placeholder="Company Name" required>
|
|
{{template "invalid-feedback" dict "fieldName" "Name" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-6 mb-sm-0">
|
|
<label for="AccountAddress1">Address</label>
|
|
<input type="text" id="AccountAddress1"
|
|
class="form-control {{ ValidationFieldClass $.validationErrors "Address1" }}"
|
|
name="Address1" value="{{ $.form.Address1 }}" placeholder="Address Line 1" required>
|
|
{{template "invalid-feedback" dict "fieldName" "Address1" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label for="AccountAddress2"> </label>
|
|
<input type="text" id="AccountAddress2"
|
|
class="form-control {{ ValidationFieldClass $.validationErrors "Address2" }}"
|
|
name="Address2" value="{{ $.form.Address2 }}" placeholder="Address Line 2">
|
|
{{template "invalid-feedback" dict "fieldName" "Address2" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-6">
|
|
<label for="selectAccountCountry">Country</label>
|
|
<div class="">
|
|
<select class="form-control {{ ValidationFieldClass $.validationErrors "Country" }}"
|
|
id="selectAccountCountry" name="Country" required>
|
|
{{ range $i := $.countries }}
|
|
{{ $hasGeonames := false }}
|
|
{{ range $c := $.geonameCountries }}
|
|
{{ if eq $c $i.Code }}{{ $hasGeonames = true }}{{ end }}
|
|
{{ end }}
|
|
<option value="{{ $i.Code }}" data-geonames="{{ if $hasGeonames }}1{{ else }}0{{ end }}" {{ if CmpString $.form.Country $i.Code }}selected="selected"{{ end }}>{{ $i.Name }}</option>
|
|
{{ end }}
|
|
</select>
|
|
{{template "invalid-feedback" dict "fieldName" "Country" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-4">
|
|
<div id="divAccountZipcode"></div>
|
|
{{template "invalid-feedback" dict "fieldName" "Zipcode" "validationDefaults" $.validationDefaults "validationErrors" $.validationError }}
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="divAccountRegion"></div>
|
|
{{template "invalid-feedback" dict "fieldName" "Region" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<label for="inputAccountCity">City</label>
|
|
<input type="text" id="inputAccountCity"
|
|
class="form-control {{ ValidationFieldClass $.validationErrors "Account.City" }}"
|
|
name="City" value="{{ $.form.City }}" placeholder="City" required>
|
|
{{template "invalid-feedback" dict "fieldName" "City" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-6">
|
|
<label for="selectTimezone">Timezone</label>
|
|
<select class="form-control {{ ValidationFieldClass $.validationErrors "Timezone" }}"
|
|
id="selectTimezone" name="Timezone">
|
|
<option value="">Not set</option>
|
|
{{ range $idx, $t := .timezones }}
|
|
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
|
|
{{ end }}
|
|
</select>
|
|
{{template "invalid-feedback" dict "fieldName" "Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow mb-4">
|
|
|
|
<a href="#collapseCardDateTime" class="d-block card-header py-3 collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardDateTime">
|
|
<h6 class="m-0 font-weight-bold text-primary">Date & Time Formatting</h6>
|
|
</a>
|
|
|
|
<div class="collapse" id="collapseCardDateTime" style="">
|
|
<div class="card-body">
|
|
|
|
<div class="form-group">
|
|
<label for="inputDatetimeFormat">Datetime Format</label>
|
|
<select class="form-control" style="display: none;" id="selectDatetimeFormat">
|
|
<option>2006-01-02 at 3:04PM MST</option>
|
|
<option>Mon Jan _2 15:04:05 2006</option>
|
|
<option>Mon Jan _2 15:04:05 MST 2006</option>
|
|
<option>Mon Jan 02 15:04:05 -0700 2006</option>
|
|
<option>02 Jan 06 15:04 MST</option>
|
|
<option>02 Jan 06 15:04 -0700</option>
|
|
<option>Monday, 02-Jan-06 15:04:05 MST</option>
|
|
<option>Mon, 02 Jan 2006 15:04:05 MST</option>
|
|
<option>Mon, 02 Jan 2006 15:04:05 -0700</option>
|
|
<option>Jan _2 15:04:05</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
<input type="text" class="form-control" id="inputDatetimeFormat"
|
|
placeholder="enter datetime format" name="PreferenceDatetimeFormat"
|
|
value="{{ .form.PreferenceDatetimeFormat }}">
|
|
<label class="form-check-label" for="inputDatetimeFormat">
|
|
<small>Current Datetime {{ .exampleDisplayTime.Local }}</small></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputDateFormat">Date Format</label>
|
|
<select class="form-control" style="display: none;" id="selectDateFormat">
|
|
<option>2006-01-02</option>
|
|
<option>Mon Jan _2 2006</option>
|
|
<option>Mon Jan 02 2006</option>
|
|
<option>02 Jan 06</option>
|
|
<option>02 Jan 06</option>
|
|
<option>Monday, 02-Jan-06</option>
|
|
<option>Mon, 02 Jan 2006</option>
|
|
<option>Mon, 02 Jan 2006</option>
|
|
<option>Jan _2</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
<input type="text" class="form-control" id="inputDateFormat"
|
|
placeholder="enter date format" name="PreferenceDateFormat"
|
|
value="{{ .form.PreferenceDateFormat }}">
|
|
<label class="form-check-label" for="inputDateFormat">
|
|
<small>Current Date {{ .exampleDisplayTime.LocalDate }}</small></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputTimeFormat">Time Format</label>
|
|
<select class="form-control" style="display: none;" id="selectTimeFormat">
|
|
<option>3:04PM</option>
|
|
<option>3:04PM MST</option>
|
|
<option>3:04PM -0700</option>
|
|
<option>15:04:05</option>
|
|
<option>15:04:05 MST</option>
|
|
<option>15:04:05 -0700</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
<input type="text" class="form-control" id="inputTimeFormat"
|
|
placeholder="enter time format" name="PreferenceTimeFormat"
|
|
value="{{ .form.PreferenceTimeFormat }}">
|
|
<label class="form-check-label" for="inputDatetimeFormat">
|
|
<small>Current Time {{ .exampleDisplayTime.LocalTime }}</small></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
|
|
<a href="/account" class="ml-2 btn btn-secondary" >Cancel</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{end}}
|
|
{{define "js"}}
|
|
<script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@v2.2.2/dist/latest/bootstrap-autocomplete.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
var selectInit = false;
|
|
$('#selectAccountCountry').on('change', function () {
|
|
|
|
// When a country has data-geonames, then we can perform autocomplete on zipcode and
|
|
// populate a list of valid regions.
|
|
if ($(this).find('option:selected').attr('data-geonames') == 1) {
|
|
|
|
// Replace the existing region with an empty dropdown.
|
|
$('#divAccountRegion').html('<label for="inputAccountRegion">Region</label><div class=""><select class="form-control {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" placeholder="Region" required></select></div>');
|
|
|
|
// Query the API for a list of regions for the selected
|
|
// country and populate the region dropdown.
|
|
$.ajax({
|
|
type: 'GET',
|
|
contentType: 'application/json',
|
|
url: '/geo/regions/autocomplete',
|
|
data: {country_code: $(this).val(), select: true},
|
|
dataType: 'json'
|
|
}).done(function (res) {
|
|
if (res !== undefined && res !== null) {
|
|
for (var c in res) {
|
|
var optSelected = '';
|
|
if (res[c].value == '{{ $.form.Region }}') {
|
|
optSelected = ' selected="selected"';
|
|
}
|
|
$('#inputAccountRegion').append('<option value="'+res[c].value+'"'+optSelected+'>'+res[c].text+'</option>');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Replace the existing zipcode text input with a new one that will supports autocomplete.
|
|
$('#divAccountZipcode').html('<label for="inputAccountZipcode">Zipcode</label><input class="form-control {{ ValidationFieldClass $.validationErrors "Account.Zipcode" }}" id="inputAccountZipcode" name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
|
|
$('#inputAccountZipcode').autoComplete({
|
|
minLength: 2,
|
|
events: {
|
|
search: function (qry, callback) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
contentType: 'application/json',
|
|
url: '/geo/postal_codes/autocomplete',
|
|
data: {query: qry, country_code: $('#selectAccountCountry').val()},
|
|
dataType: 'json'
|
|
}).done(function (res) {
|
|
callback(res)
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// When the value of zipcode changes, try to find an exact match for the zipcode and
|
|
// can therefore set the correct region and city.
|
|
$('#inputAccountZipcode').on('change', function() {
|
|
$.ajax({
|
|
type: 'GET',
|
|
contentType: 'application/json',
|
|
url: '/geo/geonames/postal_code/'+$(this).val(),
|
|
data: {country_code: $('#selectAccountCountry').val()},
|
|
dataType: 'json'
|
|
}).done(function (res) {
|
|
if (res !== undefined && res !== null && res.PostalCode !== undefined) {
|
|
$('#inputAccountCity').val(res.PlaceName);
|
|
$('#inputAccountRegion').val(res.StateCode);
|
|
}
|
|
});
|
|
});
|
|
|
|
} else {
|
|
|
|
// Replace the existing zipcode input with no autocomplete.
|
|
$('#divAccountZipcode').html('<label for="inputAccountZipcode">Zipcode</label><input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Zipcode" }}" id="inputAccountZipcode" name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
|
|
|
|
// Replace the existing region select with a text input.
|
|
$('#divAccountRegion').html('<label for="inputAccountRegion">Region</label><input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" value="{{ $.form.Region }}" placeholder="Region" required>');
|
|
|
|
}
|
|
|
|
// Init the form defaults based on the current settings.
|
|
if (!selectInit) {
|
|
hideDuplicateValidationFieldErrors();
|
|
selectInit = true
|
|
}
|
|
}).change();
|
|
|
|
|
|
var selectedDatetimeFormat = false;
|
|
$('#selectDatetimeFormat > option').each(function() {
|
|
var curValue = $('#inputDatetimeFormat').val();
|
|
if (this.text == curValue || this.value == curValue) {
|
|
$(this).attr('selected','selected');
|
|
selectedDatetimeFormat = true;
|
|
$('#selectDatetimeFormat').show();
|
|
$('#inputDatetimeFormat').hide();
|
|
}
|
|
});
|
|
|
|
if (!selectedDatetimeFormat) {
|
|
$('#selectDatetimeFormat').val('custom');
|
|
$('#selectDatetimeFormat').show();
|
|
$('#inputDatetimeFormat').show();
|
|
}
|
|
|
|
$('#selectDatetimeFormat').on('change', function() {
|
|
if ($(this).val() == 'custom') {
|
|
$('#inputDatetimeFormat').show();
|
|
} else {
|
|
$('#inputDatetimeFormat').hide();
|
|
$('#inputDatetimeFormat').val($(this).val());
|
|
}
|
|
})
|
|
|
|
var selectedDateFormat = false;
|
|
$('#selectDateFormat > option').each(function() {
|
|
var curValue = $('#inputDateFormat').val();
|
|
if (this.text == curValue || this.value == curValue) {
|
|
$(this).attr('selected','selected');
|
|
selectedDateFormat = true;
|
|
$('#selectDateFormat').show();
|
|
$('#inputDateFormat').hide();
|
|
}
|
|
});
|
|
if (!selectedDateFormat) {
|
|
$('#selectDateFormat').val('custom');
|
|
$('#selectDateFormat').show();
|
|
$('#inputDateFormat').show();
|
|
}
|
|
$('#selectDateFormat').on('change', function() {
|
|
if ($(this).val() == 'custom') {
|
|
$('#inputDateFormat').show();
|
|
} else {
|
|
$('#inputDateFormat').hide();
|
|
$('#inputDateFormat').val($(this).val());
|
|
}
|
|
})
|
|
|
|
var selectedTimeFormat = false;
|
|
$('#selectTimeFormat > option').each(function() {
|
|
var curValue = $('#inputTimeFormat').val();
|
|
if (this.text == curValue || this.value == curValue) {
|
|
$(this).attr('selected','selected');
|
|
selectedTimeFormat = true;
|
|
$('#selectTimeFormat').show();
|
|
$('#inputTimeFormat').hide();
|
|
}
|
|
});
|
|
if (!selectedTimeFormat) {
|
|
$('#selectTimeFormat').val('custom');
|
|
$('#selectTimeFormat').show();
|
|
$('#inputTimeFormat').show();
|
|
}
|
|
$('#selectTimeFormat').on('change', function() {
|
|
if ($(this).val() == 'custom') {
|
|
$('#inputTimeFormat').show();
|
|
} else {
|
|
$('#inputTimeFormat').hide();
|
|
$('#inputTimeFormat').val($(this).val());
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
{{end}}
|