generated from caltechlibrary/template
/
credentials-form.html
130 lines (125 loc) · 5.75 KB
/
credentials-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<!--
@file credentials-form.html
@brief HTML form + JS code to ask the user for FOLIO credentials.
@created 2023-06-08
@license Please see the file named LICENSE in the project directory
@website https://github.com/caltechlibrary/boffo
-->
<head>
<base target="_top" />
<title><?= title ?></title>
<meta charset="utf-8" />
<?!= include('stylesheet.css'); ?>
<?!= include('form-utilities.js'); ?>
<script>
const gs = google.script;
// Takes result of calling saveFolioInfo(...) when no exceptions occur.
function success(haveCreds) {
const msg = ((haveCreds ? "Successfully obtained" : "Failed to obtain")
+ " a FOLIO API token");
const nextFunction = <?= callAfterSuccess ?>;
log(msg);
if (!haveCreds) {
if (nextFunction) {
log(`not calling ${nextFunction} because we failed to get creds`);
}
delayedClose();
} else if (nextFunction) {
log(`calling ${nextFunction}`);
delayedClose();
gs.run.note('Working …');
gs.run.callBoffoFunction(nextFunction);
} else {
// We have creds but no function to call, so just close.
delayedClose();
gs.run.note('FOLIO token saved.');
}
}
// Logs an error and closes the dialog. Invoked when saveFolioInfo(...)
// fails with an exception.
function failure(error, data) {
log("got an error: " + error);
delayedClose();
}
// Invoked when the user clicks either "submit" or "cancel" on the form,
// and calls saveFolioInfo(...) if the choice was "submit".
function submitForm(which) {
log(`user clicked ${which} on form`);
if (which == "Cancel") {
delayedClose(0);
return;
}
// We can't close the dialog until we're done with saveFolioInfo
// because then GAS will not execute the function, but the execution
// takes several seconds, and leaving the dialog visible without
// any indication of what's happening is confusing to the user. The
// following hides the dialog content and shows a message + spinner.
document.getElementById('dialog').style.display = 'none';
document.getElementById('message').style.display = 'inherit';
const url = document.getElementById("url").value;
const tenantId = document.getElementById("tenantId").value;
const user = document.getElementById("user").value;
const password = document.getElementById("password").value;
const nextFunction = <?= callAfterSuccess ?>;
gs.run
.withSuccessHandler(success)
.withFailureHandler(failure)
.saveFolioInfo(url, tenantId, user, password, nextFunction);
}
</script>
</head>
<body>
<div id="dialog">
<div class="explanatory-text">
<p>Boffo needs this information to communicate with FOLIO. Your FOLIO
login & password will <b>not</b> be stored; instead, they will be
used to request a token from FOLIO, and only that token will be
stored.</p>
</div>
<div class="form">
<form id="form" onsubmit="submitForm(this.submitted); return false;">
<label for="name" class="label">Institute's FOLIO API URL:</label>
<br/>
<input name="url" id="url" type="text" class="wide field"
pattern="^https://[a-zA-Z].*"
oninvalid="this.setCustomValidity('Please enter a URL')"
oninput="this.setCustomValidity('')"
onchange="this.setCustomValidity('')"
value="<?!= getProp('boffo_folio_url'); ?>"
autofocus required/>
<br/>
<label for="password" class="label">Institute's FOLIO tenant id:</label>
<br/>
<input name="tenantId" id="tenantId" type="text" class="wide field"
pattern="^[a-zA-Z][a-zA-Z0-9]+"
oninvalid="this.setCustomValidity('This does not look like a tenant ID')"
oninput="this.setCustomValidity('')"
onchange="this.setCustomValidity('')"
value="<?!= getProp('boffo_folio_tenant_id'); ?>"
required/>
<br/>
<label for="name" class="label">Your FOLIO user name:</label>
<br/>
<input name="user" id="user" type="text" class="wide field"
required/>
<br/>
<label for="password" class="label">Your user FOLIO password:</label>
<br/>
<input name="password" id="password" type="password" class="wide field"
required/>
<br/>
<input type="submit" class="button" value="Submit"
onclick="this.form.submitted=this.value"/>
<input type="submit" class="button cancel" value="Cancel"
onclick="this.form.submitted=this.value" formnovalidate/>
</form>
</div>
</div>
<div id="message" class="explanatory-text"
style="display: none; margin-top: 10em">
<p>Saving values and getting FOLIO token <svg width="24" height="24" viewBox="0 -5 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(0.36,.6,.31,1) infinite}.spinner_fVhf{animation-delay:-.5s}.spinner_piVe{animation-delay:-1s}.spinner_MSNs{animation-delay:-1.5s}@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}100%{r:0;cx:20px}}</style><circle class="spinner_nOfF" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_fVhf" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_piVe" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_MSNs" cx="4" cy="12" r="3"/></svg></p>
</div>
</body>
</html>