Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task 13 - User signup page #13

Merged
merged 6 commits into from
Oct 16, 2024
Merged

Task 13 - User signup page #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b68ebe6
added signup template
YamiHeike Oct 14, 2024
23a382b
SignupViewController
YamiHeike Oct 14, 2024
f9dcb85
added hyperlink to signup page in index.html
YamiHeike Oct 14, 2024
cc9d274
added logo. Edited SignupViewController for naming consistency
YamiHeike Oct 15, 2024
15a7047
changed signup page design
YamiHeike Oct 15, 2024
126d60a
changed the design
YamiHeike Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/main/java/pl/ateam/disasteralerts/web/SignupViewController.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
package pl.ateam.disasteralerts.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/signup")
public class SignupViewController {
@GetMapping
public String signupView() {
return "signup";
}
}
Binary file added src/main/resources/static/disaster_alerts_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 12 additions & 4 deletions src/main/resources/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,24 @@
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>DisasterAlerts</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark text-sm-center fixed-top" aria-label="First navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="d-inline-block me-3" style="max-height: 3.5em;" src="../static/disaster_alerts_logo.png" alt="" />
<p class="d-inline-block display-6 align-middle">Disaster alerts</p>
</a>
</div>
</nav>
<div class="d-flex vh-100 align-items-center justify-content-center bg-body-tertiary">
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">DisasterAlert</h1>
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">DisasterAlerts</h1>
<p class="col-lg-10 fs-4">Lorem ipsum dolor sit viverra</p>
</div>
<div class="col-md-10 mx-auto col-lg-5">
Expand All @@ -29,8 +37,8 @@ <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">DisasterAlert</h1>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary my-2" type="submit">Sign up</button>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<a href="/signup" class="w-100 btn btn-lg btn-success my-2" type="submit">Sign up</a>
<button class="w-100 btn btn-lg btn-success" type="submit">Sign in</button>
<hr class="my-4">
<small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
</form>
Expand Down
119 changes: 119 additions & 0 deletions src/main/resources/templates/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>DisasterAlerts - SignUp</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</head>
<body class="bg-body-tertiary">

<nav class="navbar navbar-dark bg-dark text-sm-center" aria-label="First navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="d-inline-block me-3" style="max-height: 3.5em;" src="../static/disaster_alerts_logo.png" alt="" />
<p class="d-inline-block display-6 align-middle">Disaster alerts</p>
</a>
</div>
</nav>
<div class="container">
<main class="mt-5">
<div class="row g-5 justify-content-center">
<div class="col-md-8 col-lg-8">
<h4 class="mb-3">Rejestracja</h4>
<form>
<div class="row g-3">
<div class="col-12">
<label for="username" class="form-label">Nazwa użytkownika</label>
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback">
Nazwa użytkownika jest wymagana
</div>
</div>
</div>

<div class="col-12">
<label for="email" class="form-label">Adres e-mail</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
<div class="invalid-feedback">
Niewłaściwy format adresu e-mail
</div>
</div>

<div class="col-12">
<label for="address2" class="form-label">Numer Telefonu <span class="text-body-secondary">(Opcjonalnie)</span></label>
<input type="text" class="form-control" id="address2" placeholder="xxx-xxx-xxx">
</div>

<div class="col-md-7">
<label for="country" class="form-label">Województwo</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>Województwo 1</option>
</select>
<div class="invalid-feedback">
Nie wybrano województwa
</div>
</div>

<div class="col-md-5">
<label for="state" class="form-label">Miasto</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>Miasto 1</option>
</select>
<div class="invalid-feedback">
Nie wybrano miasta
</div>
</div>

</div>

<hr class="my-4">

<h4 class="mb-3">Preferencje</h4>

<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="checkbox" class="form-check-input" checked>
<label class="form-check-label" for="credit">Alerty mailowe</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="checkbox" class="form-check-input">
<label class="form-check-label" for="debit">Alerty SMS</label>
</div>
</div>



<div class="col-md-7 col-lg-8 my-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
Zweryfikowany użytkownik
</h4>
<div class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Kod organizacji">
<button class="btn btn-secondary">Zweryfikuj</button>
</div>
</div>
</div>

<button class="w-100 btn btn-success btn-lg my-md-4" type="submit">Stwórz konto</button>
</form>
</div>
</div>
</main>

<footer class="my-5 pt-5 text-body-secondary text-center text-small">
<p class="mb-1">&copy; 2017–2024 Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Kontakt</a></li>
<li class="list-inline-item"><a href="#">Regulamin serwisu</a></li>
<li class="list-inline-item"><a href="#">Pomoc</a></li>
</ul>
</footer>
</div>
</body>
Loading