Skip to content

Commit ddc1255

Browse files
deanblackboroughdeanblackborough
committed
Updated register
1 parent 53d861d commit ddc1255

File tree

1 file changed

+114
-70
lines changed

1 file changed

+114
-70
lines changed

‎resources/views/authentication/register.blade.php‎

Lines changed: 114 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,127 @@
11
<!doctype html>
2-
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<meta name="description" content="Register with Budget to use our free budget calculator">
7-
<meta name="author" content="Dean Blackborough">
8-
<title>Register with Budget</title>
9-
<link rel="icon" sizes="48x48" href="{{ asset('images/favicon.ico') }}">
10-
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('images/favicon.png') }}">
11-
<link href="{{ asset('css/theme.css') }}" rel="stylesheet" />
12-
<x-open-graph />
13-
<x-twitter-card />
14-
<style>
15-
.site-header {
16-
background-color: #000000;
17-
-webkit-backdrop-filter: saturate(180%) blur(20px);
18-
backdrop-filter: saturate(180%) blur(20px);
19-
}
20-
</style>
21-
</head>
22-
<body>
23-
<header class="site-header sticky-top py-1">
24-
<x-api-status />
25-
<x-navbar />
26-
</header>
27-
<div class="container-fluid pt-5">
28-
<div class="row d-flex align-items">
29-
<div class="col-12">
30-
<div class="header text-center">
31-
<h1 class="display-1">Budget</h1>
32-
<h2 class="display-6">Simplified Budgeting</h2>
33-
powered by <a href="https://api.costs-to-expect.com">
34-
<img src="{{ asset('images/logo.png') }}" width="64" height="64" alt="Costs to Expect Logo" title="Powered by the Costs to Expect API">
35-
<span class="d-none">C</span>osts to Expect API
36-
</a>
37-
</div>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="description" content="Register with Budget to use our free budget calculator">
7+
<meta name="author" content="Dean Blackborough">
8+
<title>Register to Budget</title>
9+
<link rel="icon" sizes="48x48" href="{{ asset('images/favicon.ico') }}">
10+
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('images/favicon.png') }}">
11+
<link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
12+
<x-layout.open-graph title="Register to Budget" description="Register with Budget to use our free budget calculator" />
13+
<x-layout.twitter-card title="Register to Budget" description="Register with Budget to use our free budget calculator" />
14+
</head>
15+
<body>
16+
<x-layout.navbar activeRoute="landing" />
3817

39-
<form action="{{ route('register.process') }}" method="POST" class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mx-auto p-2">
18+
<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
19+
<div class="sm:mx-auto sm:w-full sm:max-w-md">
20+
<h1 class="mt-6 text-center text-6xl font-bold tracking-tight text-pinky-700">Budget</h1>
21+
<h2 class="mt-6 text-center text-3xl font-medium tracking-tight text-gray-700">Register</h2>
22+
<p class="mt-2 text-center text-base text-gray-600">
23+
Or
24+
<x-helper.control.link.text route="https://budget-pro.costs-to-expect.com" label="tryout Budget Pro." />
25+
</p>
26+
</div>
4027

41-
@csrf
28+
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
29+
<div class="py-6 px-4 sm:px-10">
30+
<form class="space-y-4" action="{{ route('register.process') }}" method="POST">
4231

43-
<h4 class="text-center">Create an Account</h4>
32+
@csrf
4433

45-
@if ($failed !== null)
46-
<p class="alert alert-danger">We were unable to create your account, the API returned the
47-
following error "{{ $failed }}". Please check our <a href="https://status.costs-to-expect.com">status</a>
48-
page and try again later.</p>
49-
@endif
34+
@if ($failed !== null)
35+
<p class="text-sm text-red-500">
36+
We were unable to create your account, the API returned the
37+
following error "{{ $failed }}". Please check our
38+
<x-helper.control.link.text route="https://status.costs-to-expect.com" label="status" />
39+
page and try again later.
40+
</p>
41+
@endif
5042

51-
<div class="mt-3 mb-3">
52-
<label for="name" class="form-label">Name</label>
53-
<input type="text" name="name" class="form-control <x-validation-error field='name' />" id="name" aria-describedby="name-help" required value="{{ old('name') }}" />
54-
<div id="name-help" class="form-text">Please enter a name, <em>any name will do</em>.</div>
55-
<x-validation-error-message field="name" />
56-
</div>
43+
<div>
44+
<label for="name" class="block text-base font-medium text-gray-700">
45+
Name <span class="text-lg">*</span>
46+
</label>
47+
<div class="mt-1">
48+
<input id="name" name="name" type="text" required
49+
class="block w-full rounded-md border border-gray-300 px-3 py-2
50+
placeholder-gray-400 shadow-sm focus:border-pinky-500 focus:outline-none focus:ring-pinky-500 @if($errors !== null && array_key_exists('name', $errors)) border-red-500 ring-1 ring-red-500 @endif sm:text-sm"
51+
placeholder="Your name" value="{{ old('name') }}" />
52+
<p class="mt-2 text-sm text-gray-500">Please enter a name, <em>any name will do</em>.</p>
53+
@if($errors !== null && array_key_exists('name', $errors) && is_array($errors['name']))
54+
@if (count($errors['name']['errors']) === 1)
55+
<p class="mt-2 text-sm text-red-500 pl-2">{{ $errors['name']['errors'][0] }}</p>
56+
@else
57+
<ul class="mt-2 text-sm text-red-500 list-disc pl-6">
58+
@foreach ($errors['name']['errors'] as $__error)
59+
<li>{{ $__error }}</li>
60+
@endforeach
61+
</ul>
62+
@endif
63+
@endif
64+
</div>
65+
</div>
5766

58-
<div class="mt-3 mb-3">
59-
<label for="email" class="form-label">Email</label>
60-
<input type="email" name="email" class="form-control <x-validation-error field='email' />" id="email" aria-describedby="email-help" required value="{{ old('email') }}" />
61-
<div id="email-help" class="form-text">Please enter your email address, <em>we will never share
62-
your email address</em>.</div>
63-
<x-validation-error-message field="email" />
64-
</div>
67+
<div>
68+
<label for="email" class="block text-base font-medium text-gray-700">
69+
Email <span class="text-lg">*</span>
70+
</label>
71+
<div class="mt-1">
72+
<input id="email" name="email" type="email" required
73+
class="block w-full rounded-md border border-gray-300 px-3 py-2
74+
placeholder-gray-400 shadow-sm focus:border-pinky-500 focus:outline-none focus:ring-pinky-500 @if($errors !== null && array_key_exists('email', $errors)) border-red-500 ring-1 ring-red-500 @endif sm:text-sm"
75+
placeholder="email@email.com" value="{{ old('email') }}" />
76+
<p class="mt-2 text-sm text-gray-500">Please enter your email address</p>
77+
@if($errors !== null && array_key_exists('email', $errors) && is_array($errors['email']))
78+
@if (count($errors['email']['errors']) === 1)
79+
<p class="mt-2 text-sm text-red-500 pl-2">{{ $errors['email']['errors'][0] }}</p>
80+
@else
81+
<ul class="mt-2 text-sm text-red-500 list-disc pl-6">
82+
@foreach ($errors['email']['errors'] as $__error)
83+
<li>{{ $__error }}</li>
84+
@endforeach
85+
</ul>
86+
@endif
87+
@endif
88+
</div>
89+
</div>
6590

66-
<div class="mb-3">
67-
<p>By registering and using Budget you are agreeing to our <a href="{{ route('privacy-policy') }}">Privacy Policy</a>.
68-
Please read this carefully before registering although the short story is we will never share your
69-
data with anyone, and we do not track you.</p>
91+
<div class="flex justify-center space-x-4">
92+
<button type="submit" value="submit" class="rounded-md border border-transparent
93+
px-1.5 py-1 md:px-2 md:py-1.5 text-base font-medium text-white shadow-sm bg-pinky-500 hover:bg-pinky-700">
94+
Sign-in
95+
</button>
7096

71-
<p>Budget is an Open Source project, if you have any doubts about our intentions, please review
72-
or ask someone to review the code on <a class="link-primary" href="https://github.com/costs-to-expect" title="Visit Costs to Expect on GitHub">GitHub</a>.</p>
73-
</div>
97+
<a href="{{ route('landing') }}" class="rounded-md border border-transparent
98+
bg-black px-1.5 py-1 md:px-2 md:py-1.5 text-base font-medium text-white shadow-sm hover:bg-gray-700">
99+
Cancel
100+
</a>
101+
</div>
102+
</form>
103+
</div>
74104

75-
<button type="submit" class="btn btn-primary w-100" title="Register with Costs to Expect">Register</button>
76-
</form>
105+
<div class="py-6 px-4 sm:px-10">
106+
<p class="text-sm text-gray-500">
107+
By registered with Budget, you are agreeing to our
108+
<x-helper.control.link.text :route="route('privacy-policy')" label="privacy policy." />
109+
Please read our privacy policy carefully before registering. In short, we
110+
<strong>do not</strong> track you and we <strong>will not</strong> share your data.
111+
</p>
112+
113+
<p class="mt-2 text-sm text-gray-500">
114+
Budget is an Open Source project, if you have any doubts about our
115+
intentions or what we are doing with you data, please review
116+
or ask someone you trust to review our code on
117+
<x-helper.control.link.text route="https://github.com/costs-to-expect" label="GitHub." />
118+
</p>
119+
</div>
77120
</div>
78121
</div>
79-
</div>
80-
<script src="{{ asset('node_modules/@popperjs/core/dist/umd/popper.min.js') }}" defer></script>
81-
<script src="{{ asset('node_modules/bootstrap/dist/js/bootstrap.js') }}" defer></script>
82-
</body>
122+
123+
<x-layout.footer />
124+
125+
<script src="{{ asset('js/navbar.js') }}" defer></script>
126+
</body>
83127
</html>

0 commit comments

Comments
 (0)