DweebUI/views/register.html

139 lines
5.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>DweebUI - Register</title>
<!-- CSS files -->
<link href="/css/tabler.min.css" rel="stylesheet"/>
<link href="/css/demo.min.css" rel="stylesheet"/>
<style>
@import url('/fonts/inter.css');
:root {
--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}
body {
font-feature-settings: "cv03", "cv04", "cv11";
}
</style>
</head>
<body class="d-flex flex-column">
<script src="/js/demo-theme.js"></script>
<div class="page page-center">
<form class="container container-tight py-4" action="/register" method="POST" novalidate>
<div class="text-center">
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<img src="/images/logo.png" alt="DweebUI" title="DweebUI" height="100px">
</h1>
</div>
<div class="text-center mb-4">
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<img src="/images/dweebui.svg" alt="DweebUI" title="DweebUI" class="navbar-brand-image">
</h1>
</div>
<div class="card">
<div class="card-body text-center py-4">
<h1 class="mt-1">Welcome to DweebUI</h1>
<p class="text-muted">Account information is stored in a local sqlite database.</p>
<% if(error) { %>
<div class="alert alert-danger" role="alert">
<%= error %>
</div>
<% } %>
</div>
<div class="card-body">
<div class="row row-cards">
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-2">
<label class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username">
</div>
</div>
</div>
<div class="mb-2">
<label class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="mb-2">
<label class="form-label">Password</label>
<div class="input-group input-group-flat">
<input type="password" class="form-control" id="password" name="password" autocomplete="off">
</div>
</div>
<div class="mb-2">
<label class="form-label">Confirm Password</label>
<div class="input-group input-group-flat">
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" autocomplete="off">
</div>
</div>
<div class="mb-2">
<label class="form-label" title="Enter the value of 'SECRET' from the DweebUI docker-compose.yaml">SECRET</label>
<input type="text" class="form-control" id="secret" name="secret">
</div>
<div class="mb-2">
<label class="form-check">
<input type="checkbox" class="form-check-input" name="warning"/>
<span class="form-check-label">
I understand that<a href="https://github.com/lllllllillllllillll/DweebUI/wiki/Exposing-DweebUI-to-the-Internet"> exposing DweebUI directly to the internet</a> is a bad idea.
</span>
</label>
</div>
</div>
</div>
<div class="row align-items-center mt-2">
<div class="col">
<a href="/login">Login</a>
</div>
<div class="col">
<div class="btn-list justify-content-end">
<div class="d-none d-md-flex">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
</div>
<button type="submit" class="btn btn-primary">Install</button>
</div>
</div>
</div>
</form>
</div>
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="/js/tabler.min.js" defer></script>
<script src="/js/demo.min.js" defer></script>
</body>
</html>