v / examples / veb_fullstack / index.html
71 lines · 71 sloc · 2.9 KB · b474aa0faf8d055aaced80ed0687ac354d0864a0
Raw 


1<!DOCTYPE html>


2<head>


3   <!--Let browser know website is optimized for mobile-->


4   <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">


5   <!-- Compiled and minified CSS -->


6   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


7   <!-- Compiled and minified JavaScript -->


8   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


9   <!-- Material UI icons -->


10   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


11   <title>${title}</title>


12</head>


13<body>


14   <div>@include 'templates/header_component.html'</div>


15   <div  class="card-panel center-align" style="max-width: 240px; padding: 10px; margin: 10px; border-radius: 5px;">


16      <form id="index_form" method='post' action=''>


17         <div style="display:flex; flex-direction: column;">


18            <input type='text' name='username' placeholder='Username' required autofocus>


19            <input type='password' name='password' placeholder='Password' required>


20         </div>


21         <div style="margin-top: 10px;">


22            <input class="waves-effect waves-light btn-small" type='submit' onclick="login()" formaction="javascript:void(0);" value='Login'>


23            <input class="waves-effect waves-light btn-small" type='submit' onclick="addUser()" formaction="javascript:void(0);" value='Register'>


24         </div>


25      </form>


26      <script type="text/javascript">


27         async function addUser() {


28         const form = document.querySelector('#index_form');


29         const formData = new FormData(form);


30            await fetch('/controller/user/create', {


31                 method: 'POST',


32                 body: formData


33             })


34             .then( async (response) => {


35                 if (response.status != 201) {


36                     throw await response.text()


37                 }


38                 return await response.text()


39             })


40             .then((data) => {


41                 alert("User created successfully")


42             })


43             .catch((error) => {


44                 alert(error);


45             });


46         }


47         async function login() {


48            const form = document.querySelector('#index_form');


49            const formData = new FormData(form);


50             await fetch('/controller/auth', {


51                 method: 'POST',


52                 body: formData


53             })


54             .then( async (response) => {


55                 if (response.status != 200) {


56                     throw await response.text()


57                 }


58                 return response.json()


59             })


60             .then((data) => {


61                document.cookie = 'token='+data+';';


62                window.location.href = '/products'


63             })


64             .catch((error) => {


65                 alert(error);


66             });


67         }


68      </script>


69   </div>


70</body>


71</html>


72