From 7bd0733de227192bb708ca2c0cc8af8d2362fe28 Mon Sep 17 00:00:00 2001
From: Pinga <121483313+getpinga@users.noreply.github.com>
Date: Sun, 3 Sep 2023 19:49:53 +0300
Subject: [PATCH] UX update for host create

---
 cp/resources/views/admin/hosts/create.twig | 47 ++++++++++++++++------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/cp/resources/views/admin/hosts/create.twig b/cp/resources/views/admin/hosts/create.twig
index 144544b..6b243b4 100644
--- a/cp/resources/views/admin/hosts/create.twig
+++ b/cp/resources/views/admin/hosts/create.twig
@@ -24,8 +24,33 @@
         <div class="page-body">
           <div class="container-xl">
             <div class="col-12">
+              {% if hostName is defined and crdate is defined %}
+                  <div class="alert alert-important alert-success alert-dismissible" role="alert">
+                    <div class="d-flex">
+                      <div>
+                        <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="M5 12l5 5l10 -10" /></svg>
+                      </div>
+                      <div>
+                        &nbsp;{{ __('Host') }} <strong>{{ hostName }}</strong> {{ __('has been created successfully on') }} <strong>{{ crdate|date("Y-m-d H:i:s") }}!</strong>
+                      </div>
+                    </div>
+                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                  </div>
+              {% elseif error is defined %}
+                  <div class="alert alert-important alert-danger alert-dismissible" role="alert">
+                    <div class="d-flex">
+                      <div>
+                        <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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>
+                      </div>
+                      <div>
+                        &nbsp;{{ __('Host') }} <strong>{{ hostName }}</strong> {{ __('is not available') }}: <strong>{{ error }}</strong>
+                      </div>
+                    </div>
+                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                  </div>
+              {% endif %}
               <div class="card">
-                <div class="card-body border-bottom py-3">
+                <div class="card-body">
                   <form action="/host/create" method="post">
                   {{ csrf.field | raw }}
                     <div class="form-group">
@@ -55,19 +80,15 @@
                         <input type="text" class="form-control" id="ipv6" name="ipv6" placeholder="2001:0db8:85a3:0000:0000:8a2e:0370:7334">
                         <small class="form-text text-muted">{{ __('Please enter a valid IPv6 address.') }}</small>
                     </div>
-
-                    <button type="submit" class="btn btn-primary mt-3">{{ __('Create') }}</button>
-                  </form>
-                  {% if hostName is defined and crdate is defined %}
-                    <div class="alert alert-success mt-3" role="alert">
-                      {{ __('Host') }} <strong>{{ hostName }}</strong> {{ __('has been created successfully on') }} <strong>{{ crdate|date("Y-m-d H:i:s") }}!</strong>
-                    </div>
-                  {% elseif error is defined %}
-                    <div class="alert alert-danger mt-3" role="alert">
-                      {{ __('Host') }} <strong>{{ hostName }}</strong> {{ __('is not available') }}: <strong>{{ error }}</strong>
-                    </div>
-                  {% endif %}
                 </div>
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto">
+                      <button type="submit" class="btn btn-primary">Create Host</button>
+                    </div>
+                  </div>
+                </div>
+				</form>
               </div>
             </div>
           </div>