2023-01-05 14:15:05 +01:00
<!DOCTYPE html>
< html >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Bootstrap CSS -->
2023-01-10 14:21:15 +01:00
< link rel = "stylesheet" href = "/node_modules/bootstrap/dist/css/bootstrap.min.css" crossorigin = "anonymous" >
2023-01-05 14:15:05 +01:00
<!-- Font awesome -->
2023-01-10 14:21:15 +01:00
< link rel = "stylesheet" href = "/node_modules/@fortawesome/fontawesome-free/css/all.css" crossorigin = "anonymous" >
2023-01-05 14:15:05 +01:00
< link href = 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel = 'stylesheet' type = 'text/css' >
2023-01-10 14:21:15 +01:00
< link rel = "shortcut icon" href = "/favicon.ico" >
2023-01-05 14:15:05 +01:00
<!-- CodeMirror -->
2023-01-10 14:21:15 +01:00
< link rel = "stylesheet" href = "/node_modules/codemirror/lib/codemirror.css" >
< script src = "/node_modules/codemirror/lib/codemirror.js" > < / script >
< script src = "/node_modules/codemirror/mode/yaml/yaml.js" > < / script >
< link rel = "stylesheet" href = "/node_modules/codemirror/theme/material.css" >
2023-01-05 14:15:05 +01:00
<!-- Add the yaml - js library -->
2023-01-10 14:21:15 +01:00
< script type = "text/javascript" src = "/node_modules/yamljs/dist/yaml.min.js" > < / script >
2023-01-05 14:15:05 +01:00
<!-- Alpine.js -->
2023-01-10 14:21:15 +01:00
< script defer src = "/node_modules/alpinejs/dist/cdn.min.js" > < / script >
2023-01-05 14:15:05 +01:00
< style >
.navbar {
background-color: #ee5007;
}
* {
font-family: 'Open Sans', sans-serif;
}
< / style >
< title > WebUI System Installer< / title >
< / head >
< body class = "bg-gray-200 font-sans" x-data = "{page: location.hash}" >
<!-- Top bar with logo -->
< nav class = "navbar navbar-expand-lg navbar-light" >
< a class = "navbar-brand pl-4" href = "#" >
< svg height = "35" viewBox = "0 0 347 125" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.86601 0.500028 -3.18907e-05 1 64.6367 12.8008)" fill = "#aeaeae" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.86601 -0.500028 3.18907e-05 1 43.1436 25.2109)" fill = "#d6d6d6" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.866041 0.499972 0.866041 0.499972 43.1436 0.394531)" fill = "#fff" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(3.19859e-05 1 0.86601 0.500028 21.6487 37.6211)" fill = "#d6d6d6" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.866041 0.499973 0.866041 0.499972 21.6487 62.4336)" fill = "#fff" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-3.17834e-05 1 0.866009 -0.500028 0.157593 50.0312)" fill = "#aeaeae" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.86601 0.500028 -3.19781e-05 1 64.6389 87.2539)" fill = "#aeaeae" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.866009 -0.500028 3.18033e-05 1 43.1458 99.6641)" fill = "#d6d6d6" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.866041 0.499972 0.866041 0.499973 43.1458 74.8477)" fill = "#fff" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(0.86601 -0.500028 3.18907e-05 -1 64.6334 112.082)" fill = "#aeaeae" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(0.86601 0.500028 -3.18907e-05 -1 86.1266 99.6719)" fill = "#d6d6d6" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(0.866041 -0.499972 -0.866041 -0.499972 86.1266 124.488)" fill = "#fff" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.86601 0.500028 -3.19781e-05 1 129.114 50.0273)" fill = "#aeaeae" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.866009 -0.500028 3.18033e-05 1 107.62 62.4375)" fill = "#d6d6d6" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(-0.866041 0.499972 0.866041 0.499973 107.62 37.6211)" fill = "#fff" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(0.86601 -0.500028 3.18907e-05 -1 64.635 37.6289)" fill = "#aeaeae" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(0.86601 0.500028 -3.18907e-05 -1 86.1282 25.2188)" fill = "#d6d6d6" > < / rect > < rect width = "24.8171" height = "24.8171" transform = "matrix(0.866041 -0.499972 -0.866041 -0.499972 86.1282 50.0352)" fill = "#fff" > < / rect > < path d = "M189.374 82 . 9414 174 . 851 65 . 159V82 . 9414h-8 . 005V43 . 031h8 . 005V60 . 9278L189 . 374 43 . 031H199 . 037L182 . 57 62 . 8147l16 . 925 20 . 1267H189 . 374zm13 . 328-15 . 9527C202 . 702 63 . 7867 203 . 331 60 . 9468 204 . 589 58 . 4691 205 . 885 55 . 9914 207 . 619 54 . 0855 209 . 792 52 . 7513 212 . 003 51 . 4171 214 . 461 50 . 7501 217 . 168 50 . 7501 219 . 531 50 . 7501 221 . 59 51 . 2265 223 . 343 52 . 1795 225 . 135 53 . 1325 226 . 564 54 . 3332 227 . 631 55 . 7817v-4 . 517H235 . 694V82 . 9414H227 . 631V78 . 31C226 . 602 79 . 7966 225 . 173 81 . 0355 223 . 343 82 . 0266c-1 . 792 . 9529-3 . 869 1 . 4294-6 . 232 1 . 4294C214 . 442 83 . 456 212 . 003 82 . 7699 209 . 792 81 . 3976 207 . 619 80 . 0253 205 . 885 78 . 1003 204 . 589 75 . 6226 203 . 331 73 . 1068 202 . 702 70 . 2288 202 . 702 66 . 9887zm24 . 929 . 1143C227 . 631 65 . 159 227 . 25 63 . 5008 226 . 488 62 . 1285 225 . 725 60 . 7181 224 . 696 59 . 6508 223 . 4 58 . 9265 222 . 104 58 . 1642 220 . 713 57 . 783 219 . 226 57 . 783 217 . 74 57 . 783 216 . 367 58 . 1451 215 . 109 58 . 8694 213 . 851 59 . 5936 212 . 822 60 . 661 212 . 022 62 . 0714 211 . 259 63 . 4436 210 . 878 65 . 0827 210 . 878 66 . 9887c0 1 . 9059 . 381 3 . 5831 1 . 14400000000001 5 . 0317C212 . 822 73 . 4308 213 . 851 74 . 5171 215 . 109 75 . 2795 216 . 405 76 . 0419 217 . 778 76 . 4231 219 . 226 76 . 4231 220 . 713 76 . 4231 222 . 104 76 . 061 223 . 4 75 . 3367 224 . 696 74 . 5743 225 . 725 73 . 507 226 . 488 72 . 1347 227 . 25 70 . 7243 227 . 631 69 . 0471 227 . 631 67 . 103zm19 . 94-19 . 6121C246 . 161 47 . 4909 244 . 979 47 . 0525 244 . 026 46 . 1758 243 . 112 45 . 261 242 . 654 44 . 1364 242 . 654 42 . 8023 242 . 654 41 . 4681 243 . 112 40 . 3627 244 . 026 39 . 4859 244 . 979 38 . 5711 246 . 161 38 . 1137 247 . 571 38 . 1137c1 . 411 . 0 2 . 57300000000001 . 4574 3 . 488 1 . 3722C252 . 012 40 . 3627 252 . 489 41 . 4681 252 . 489 42 . 8023 252 . 489 44 . 1364 252 . 012 45 . 261 251 . 059 46 . 1758 250 . 144 47 . 0525 248 . 982 47 . 4909 247 . 571 47 . 4909zM251 . 517 51 . 2647V82 . 9414h-8 . 00
< span class = "text-white pl-4 font-bold" > Web Installer< / span >
< / a >
< / nav >
< div class = "container mt-5" >
< h1 > Welcome to the Installer!< / h1 >
2023-01-28 21:44:24 +01:00
< p > Enter your < a href = "/local/docs/reference/configuration/" target = "_blank" > cloud-config config configuration file< / a > and select the device to install on:< / p >
2023-04-18 18:09:48 +02:00
< div id = "cloud-config-help" class = "alert alert-info" role = "alert" >
2023-01-28 21:44:24 +01:00
Need help with your cloud config? Check out our < a href = "/local/docs/examples/" class = "alert-link" > documentation on where to find examples< / a > .
2023-01-05 14:15:05 +01:00
< / div >
< form action = "/install" method = "POST" >
< div class = "form-group"
x-data="{
valid: false,
show: false,
error: '',
content: '#cloud-config',
getText() {
if (this.valid) {
return 'Valid YAML syntax'
} else {
return 'Failed validating syntax: ' + this.error
}
},
validateYAML() {
this.show = true
try {
// Parse the YAML
const yaml = YAML.parse(this.content);
2023-02-22 08:54:45 +01:00
const formData = new FormData()
formData.append('cloud-config', this.content)
const settings = {
method: 'POST',
body: formData,
};
fetch(`/validate`, settings)
.then((response) => response.text())
.then((text) => {
if (text === '') {
this.valid = true
} else {
this.error = text
this.valid = false
}
})
2023-01-05 14:15:05 +01:00
} catch(error) {
this.error = error
this.valid = false
}
}
}"
x-init="
codeMirrorEditor = CodeMirror.fromTextArea($refs.input, {
mode: 'yaml',
theme: 'material',
lineWrapping: true
});
codeMirrorEditor.setValue(content);
setTimeout(function() {
codeMirrorEditor.refresh();
}, 1);
codeMirrorEditor.on('change', () => content = codeMirrorEditor.getValue())
"
2023-04-18 18:09:48 +02:00
x-on:keydown.debounce="validateYAML"
2023-01-05 14:15:05 +01:00
>
< label for = "cloud-config" > Cloud Config< / label >
2023-04-18 18:09:48 +02:00
< div id = "validator-alert" class = "alert" x-text = "getText" :class = "{ 'alert-info': valid, 'alert-danger': !valid }" x-show = "show" > < / div >
2023-01-05 14:15:05 +01:00
< textarea x-model . debounce . 750ms = "content" x-ref = "input" class = "form-control" id = "cloud-config" name = "cloud-config" rows = "5" > < / textarea >
< / div >
< div class = "form-group" >
< label for = "installation-device" > Device< / label >
< input type = "text" class = "form-control" id = "installation-device" name = "installation-device" value = "auto" >
< / div >
2023-04-18 18:09:48 +02:00
< div id = "reboot-checkbox" class = "form-group form-check" >
2023-01-05 14:15:05 +01:00
< input type = "checkbox" class = "form-check-input" name = "reboot" >
< label class = "form-check-label" for = "reboot" > Reboot after installation< / label >
< / div >
2023-04-18 18:09:48 +02:00
< div id = "poweroff-checkbox" class = "form-group form-check" >
2023-01-05 14:15:05 +01:00
< input type = "checkbox" class = "form-check-input" name = "power-off" >
< label class = "form-check-label" for = "poweroff" > Power off after installation< / label >
< / div >
< button type = "submit" class = "btn btn-primary" > Install< / button >
< / form >
< / div >
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
2023-01-10 14:21:15 +01:00
< script src = "/node_modules/jquery/dist/jquery.slim.min.js" crossorigin = "anonymous" > < / script >
2023-01-26 13:38:27 +01:00
< script src = "/node_modules/@popperjs/core/dist/umd/popper.min.js" crossorigin = "anonymous" > < / script >
2023-01-10 14:21:15 +01:00
< script src = "/node_modules/bootstrap/dist/js/bootstrap.min.js" crossorigin = "anonymous" > < / script >
2023-01-05 14:15:05 +01:00
< footer class = "bg-light py-3 mt-5 d-flex justify-content-center" >
< div class = "container mx-auto" >
< div class = "row" >
< div class = "col-12 text-center" >
< a href = "https://github.com/kairos-io/kairos" target = "_blank" class = "text-secondary" > < i class = "fab fa-github fa-2x" > < / i > < / a >
< a href = "https://kairos.io/docs" target = "_blank" class = "text-secondary" > < i class = "fas fa-book fa-2x" > < / i > < / a >
< / div >
< / div >
< hr >
< p class = "text-center text-secondary py-2" > Copyright © Kairos authors 2022-2023< / p >
< / div >
< / footer >
< / body >
< / html >
