Skip to content

Commit 39322d7

Browse files
chriskappchriskapp
committed
update installer style
1 parent 1a42256 commit 39322d7

File tree

1 file changed

+88
-108
lines changed

1 file changed

+88
-108
lines changed

‎public/install.php‎

Lines changed: 88 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -285,123 +285,102 @@ function alert(string $level, string $message): void
285285
}
286286

287287
?>
288-
<!DOCTYPE html>
288+
<!DOCTYPE>
289289
<html lang="en">
290290
<head>
291-
<title>Fusio Installer</title>
292-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
291+
<meta charset="utf-8">
292+
<meta name="viewport" content="width=device-width, initial-scale=1">
293+
<title>Fusio - Installer</title>
294+
<link rel="icon" href="https://www.fusio-project.org/img/fusio_32px.png" type="image/png" />
295+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
293296
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
294-
<style type="text/css">
295-
.fusio-installer {
296-
max-width:600px;
297-
margin-top:32px;
298-
margin-bottom:128px;
299-
}
300-
301-
.fusio-installer legend {
302-
border-bottom:1px solid #ccc;
303-
}
304-
305-
.fusio-installer fieldset {
306-
margin-bottom:16px;
307-
}
308-
309-
#messages {
310-
margin-top:8px;
311-
}
312-
</style>
313297
</head>
314-
<body>
315-
316-
<form method="POST" id="installer">
317-
<div class="container fusio-installer">
318-
<div class="row">
319-
<div class="col">
320-
<div class="alert alert-primary">
321-
<b>Welcome</b>, this installer helps to setup <a href="https://www.fusio-project.org">Fusio</a>.
322-
It simply executes the steps of a <a href="https://docs.fusio-project.org/docs/installation/">manual
323-
installation</a>. <b>After successful installation it is recommended to delete this installer script.</b>
324-
</div>
325-
</div>
298+
<body style="background:linear-gradient(#ffffff, #cccccc);">
299+
300+
<div class="container bg-light mb-xl-5 mt-xl-5 shadow-lg" style="max-width:640px;z-index:1024">
301+
<div class="text-center pt-4">
302+
<img src="data:image/gif;base64,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">
303+
</div>
304+
<div class="mt-5 pb-5 mb-3 border-bottom">
305+
<p class="lead"><b>Welcome</b>, this installer helps to setup <a href="https://www.fusio-project.org">Fusio</a>.
306+
It simply executes the steps of a <a href="https://docs.fusio-project.org/docs/installation/">manual
307+
installation</a>. <b>After successful installation it is recommended to delete this installer script.</b></p>
308+
<div class="progress" role="progressbar" aria-label="Installation progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
309+
<div id="progress" class="progress-bar" style="width:0%"></div>
326310
</div>
327-
<div class="row">
328-
<div class="col">
329-
<div class="progress">
330-
<div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
331-
</div>
332-
<div id="messages"></div>
311+
<div id="messages" class="mt-3 mb-3"></div>
312+
<form method="POST" id="installer">
313+
<fieldset>
314+
<legend>Database</legend>
315+
<p class="text-muted">Connection credentials to the database.</p>
316+
<div class="row mb-3">
317+
<label for="dbName" class="col-sm-2 col-form-label fw-bold">Name</label>
318+
<div class="col-sm-10">
319+
<input type="text" name="db_name" id="dbName" value="<?php echo htmlspecialchars($_POST['db_name'] ?? ''); ?>" placeholder="Database name" required class="form-control">
320+
</div>
333321
</div>
334-
</div>
335-
<div class="row">
336-
<div class="col">
337-
<fieldset>
338-
<legend>Database</legend>
339-
<p class="text-muted">Connection credentials to the database. <b>Please be aware that Fusio
340-
needs a dedicated database</b>, it will delete any table on the database which does not belong
341-
to the Fusio schema.</p>
342-
<div class="form-group">
343-
<label for="dbName">Name:</label>
344-
<input type="text" name="db_name" id="dbName" value="<?php echo htmlspecialchars($_POST['db_name'] ?? ''); ?>" placeholder="Database name" required class="form-control">
345-
</div>
346-
<div class="form-group">
347-
<label for="dbUser">User:</label>
348-
<input type="text" name="db_user" id="dbUser" value="<?php echo htmlspecialchars($_POST['db_user'] ?? ''); ?>" placeholder="Database user" required class="form-control">
349-
</div>
350-
<div class="form-group">
351-
<label for="dbPw">Password:</label>
352-
<input type="password" name="db_pw" id="dbPw" value="" placeholder="Database password" class="form-control">
353-
</div>
354-
<div class="form-group">
355-
<label for="dbHost">Host:</label>
356-
<input type="text" name="db_host" id="dbHost" value="<?php echo htmlspecialchars($_POST['db_host'] ?? ''); ?>" placeholder="Database host" required class="form-control">
357-
</div>
358-
</fieldset>
322+
<div class="row mb-3">
323+
<label for="dbUser" class="col-sm-2 col-form-label fw-bold">User</label>
324+
<div class="col-sm-10">
325+
<input type="text" name="db_user" id="dbUser" value="<?php echo htmlspecialchars($_POST['db_user'] ?? ''); ?>" placeholder="Database user" required class="form-control">
326+
</div>
359327
</div>
360-
</div>
361-
<div class="row">
362-
<div class="col">
363-
<fieldset>
364-
<legend>User</legend>
365-
<p class="text-muted">Credentials of the admin account.</p>
366-
<div class="form-group">
367-
<label for="username">Username:</label>
368-
<input type="text" name="username" id="username" value="<?php echo htmlspecialchars($_POST['username'] ?? ''); ?>" placeholder="Username" required minlength="3" class="form-control">
369-
</div>
370-
<div class="form-group">
371-
<label for="password">Password:</label>
372-
<input type="password" name="password" id="password" placeholder="Password" minlength="8" required class="form-control">
373-
</div>
374-
<div class="form-group">
375-
<label for="email">Email:</label>
376-
<input type="email" name="email" id="email" value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>" placeholder="Email" required class="form-control">
377-
</div>
378-
</fieldset>
328+
<div class="row mb-3">
329+
<label for="dbPw" class="col-sm-2 col-form-label fw-bold">Password</label>
330+
<div class="col-sm-10">
331+
<input type="password" name="db_pw" id="dbPw" value="" placeholder="Database password" class="form-control">
332+
</div>
379333
</div>
380-
</div>
381-
<div class="row">
382-
<div class="col">
383-
<fieldset>
384-
<legend>Settings</legend>
385-
<p class="text-muted">General project settings which contain already
386-
useful default values.</p>
387-
<div class="form-group">
388-
<label for="key">Project-Key:</label>
389-
<input type="text" name="key" id="key" placeholder="Project key" value="<?php echo htmlspecialchars($_POST['key'] ?? md5(uniqid())); ?>" required aria-describedby="keyHelp" class="form-control">
390-
</div>
391-
<div class="form-group">
392-
<label for="url">Url:</label>
393-
<input type="url" name="url" id="url" placeholder="Url" value="<?php echo htmlspecialchars($_POST['url'] ?? ''); ?>" required aria-describedby="urlHelp" class="form-control">
394-
</div>
395-
</fieldset>
334+
<div class="row mb-3">
335+
<label for="dbHost" class="col-sm-2 col-form-label fw-bold">Host</label>
336+
<div class="col-sm-10">
337+
<input type="text" name="db_host" id="dbHost" value="<?php echo htmlspecialchars($_POST['db_host'] ?? ''); ?>" placeholder="Database host" required class="form-control">
338+
</div>
396339
</div>
397-
</div>
398-
<div class="row">
399-
<div class="col">
400-
<hr>
401-
<input type="submit" value="Install" class="btn btn-primary">
340+
</fieldset>
341+
<fieldset>
342+
<legend>User</legend>
343+
<p class="text-muted">Credentials of the admin account.</p>
344+
<div class="row mb-3">
345+
<label for="username" class="col-sm-2 col-form-label fw-bold">Username</label>
346+
<div class="col-sm-10">
347+
<input type="text" name="username" id="username" value="<?php echo htmlspecialchars($_POST['username'] ?? ''); ?>" placeholder="Username" required minlength="3" class="form-control">
348+
</div>
402349
</div>
403-
</div>
404-
</form>
350+
<div class="row mb-3">
351+
<label for="password" class="col-sm-2 col-form-label fw-bold">Password</label>
352+
<div class="col-sm-10">
353+
<input type="password" name="password" id="password" placeholder="Password" minlength="8" required class="form-control">
354+
</div>
355+
</div>
356+
<div class="row mb-3">
357+
<label for="email" class="col-sm-2 col-form-label fw-bold">Email</label>
358+
<div class="col-sm-10">
359+
<input type="email" name="email" id="email" value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>" placeholder="Email" required class="form-control">
360+
</div>
361+
</div>
362+
</fieldset>
363+
<fieldset>
364+
<legend>Settings</legend>
365+
<p class="text-muted">General project settings.</p>
366+
<div class="row mb-3">
367+
<label for="key" class="col-sm-2 col-form-label fw-bold">Secret</label>
368+
<div class="col-sm-10">
369+
<input type="text" name="key" id="key" placeholder="Project key" value="<?php echo htmlspecialchars($_POST['key'] ?? md5(uniqid())); ?>" required aria-describedby="keyHelp" class="form-control">
370+
</div>
371+
</div>
372+
<div class="row mb-3">
373+
<label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
374+
<div class="col-sm-10">
375+
<input type="url" name="url" id="url" placeholder="Url" value="<?php echo htmlspecialchars($_POST['url'] ?? ''); ?>" required aria-describedby="urlHelp" class="form-control">
376+
</div>
377+
</div>
378+
</fieldset>
379+
<input type="submit" value="Install" class="btn btn-primary">
380+
</form>
381+
</div>
382+
<p class="text-muted text-end pb-3"><small>powered by <a href="https://www.fusio-project.org/">Fusio</a></small></p>
383+
</div>
405384

406385
<script type="text/javascript">
407386
var methods = [
@@ -469,7 +448,8 @@ function runNextAction() {
469448
};
470449
}
471450

472-
$("#messages").html('<div class="spinner-border text-primary spinner-border-sm" role="status"><span class="sr-only">Loading ...</span></div>&nbsp;' + lang[method]);
451+
$("#messages").html('<div class="spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>&nbsp;' + lang[method]);
452+
473453
$.post('install.php?method=' + method, params, function(data){
474454
$("#messages").html('');
475455
if (data.success) {

0 commit comments

Comments
 (0)