Frontend update & cleanup
This commit is contained in:
Minik Gaarde Lambrecht
@@ -3,70 +3,126 @@
|
||||
|
||||
<head>
|
||||
<!-- Default page settings -->
|
||||
<title>Setup</title>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<title>Opsætning</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="../Images/UFO.png" />
|
||||
<link rel="shortcut icon" href="../Images/SetupFav.png" />
|
||||
<!-- Default page settings end -->
|
||||
|
||||
<!-- CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="../Styles/Index.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="../Styles/FirstTimeSetup.css" />
|
||||
<link rel="stylesheet" href="../Styles/minibar.min.css" />
|
||||
<link rel="stylesheet" href="../Styles/Index.css" />
|
||||
<!-- CSS end -->
|
||||
|
||||
<!-- Header scripts -->
|
||||
<script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
|
||||
<!-- Header scripts end -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<form id="SetupForm" method="POST">
|
||||
<input type="text" name="dbType" id="dbType">
|
||||
<input type="text" name="dbServername" id="dbServername">
|
||||
<input type="text" name="dbUsername" id="dbUsername">
|
||||
<input type="text" name="dbPassword" id="dbPassword">
|
||||
<input type="text" name="dbName" id="dbName">
|
||||
<input type="text" name="AdminUsername" id="AdminUsername">
|
||||
<input type="text" name="AdminPassword" id="AdminPassword">
|
||||
<input type="submit" name="dbSetup" id="dbSetup" value="Submit">
|
||||
</form>
|
||||
<div class="HeaderPanel">
|
||||
<h6 class="HeaderTitle">
|
||||
Første Gangs Opsætning
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('#SetupForm').submit(function(e) {
|
||||
let URL = "../../Backend/setup.php";
|
||||
<form id="regForm" method="POST">
|
||||
<input type="hidden" name="dbType" id="DBType" />
|
||||
<div class="tab">
|
||||
<h1>
|
||||
Type database:
|
||||
</h1>
|
||||
<p>
|
||||
<select id="dbSelect" class="form-select" aria-label="Default select example">
|
||||
<option value="mysql">MySQL</option>
|
||||
<option value="sqlite">SQLite</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
let form = $('#SetupForm')[0];
|
||||
let formData = new FormData(form);
|
||||
<div class="tab">
|
||||
<h1>
|
||||
Database ip:
|
||||
</h1>
|
||||
<p>
|
||||
<input name="dbServername" class="form-control" placeholder="F.eks. 127.0.0.1">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
let id = $('#dbSetup').attr('name');
|
||||
let value = $('#dbSetup').val();
|
||||
<div class="tab">
|
||||
<h1>
|
||||
Database:
|
||||
</h1>
|
||||
<p>
|
||||
<input name="dbName" class="form-control">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
formData.append(id, value);
|
||||
<div class="tab">
|
||||
<h1>
|
||||
Database bruger:
|
||||
</h1>
|
||||
<p>
|
||||
<input name="dbUsername" class="form-control" placeholder="Brugernavn">
|
||||
</p>
|
||||
<p>
|
||||
<input id="Password" type="password" class="form-control" placeholder="Password">
|
||||
</p>
|
||||
<p>
|
||||
<input id="ConfirmPassword" type="password" name="dbPassword" class="form-control" placeholder="Gentag password">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
axios.post(URL, formData, {
|
||||
header: 'multipart/form-data'
|
||||
}).then(res => {
|
||||
if (res.status === 201)
|
||||
{
|
||||
console.log('Logged in');
|
||||
}
|
||||
<div class="tab">
|
||||
<h1>
|
||||
Opret admin bruger:
|
||||
</h1>
|
||||
<p>
|
||||
<input name="dbUsername" class="form-control" placeholder="Brugernavn">
|
||||
</p>
|
||||
<p>
|
||||
<input id="adminPassword" type="password" class="form-control" placeholder="Password">
|
||||
</p>
|
||||
<p>
|
||||
<input id="adminConfirmPassword" type="password" name="dbPassword" class="form-control" placeholder="Gentag password">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
console.log("not code 201");
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
<div style="overflow:auto;">
|
||||
<div>
|
||||
<a type="button" style="float:left;" id="prevBtn" onclick="nextPrev(-1)">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
|
||||
e.preventDefault();
|
||||
})
|
||||
</script>
|
||||
<a type="button" style="float:right;" id="nextBtn" onclick="nextPrev(1)">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
<input id="submitBtn" type="submit" style="float:right;" name="regGroup" value="Opret Siden" onclick="nextPrev(1)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Circles which indicates the steps of the form: -->
|
||||
<div style="text-align:center;margin-top:40px;">
|
||||
<i class="fas fa-circle step"></i>
|
||||
<i class="fas fa-circle step"></i>
|
||||
<i class="fas fa-circle step"></i>
|
||||
<i class="fas fa-circle step"></i>
|
||||
<i class="fas fa-circle step"></i>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Body scripts -->
|
||||
<script src="../Javascript/SetupForm.js"></script>
|
||||
<script src="../Javascript/minibar.min.js"></script>
|
||||
<!-- Body scripts end -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user