Skip to content

Commit

Permalink
Update register.blade.php
Browse files Browse the repository at this point in the history
  • Loading branch information
mohamadarif03 committed Jan 5, 2025
1 parent 75e2ef1 commit 931b7a3
Showing 1 changed file with 115 additions and 10 deletions.
125 changes: 115 additions & 10 deletions resources/views/auth/register.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,44 @@
.border-top {
border-top: var(--bs-border-width) var(--bs-border-style) #000000 !important;
}
#toggle-password {
border: none;
/* Garis abu-abu */
border-radius: 0 35% 35% 0;
/* Border-radius hanya pada sisi kanan */
/* Untuk membuat tombol berbentuk bulat */
padding: 5px;
/* Menambahkan sedikit padding */
background-color: #F3F3F3;
/* Warna latar belakang abu-abu muda */
}
#toggle-password:hover {
border-color: #A9A9A9;
/* Ubah warna border saat hover */
background-color: #E8E8E8;
/* Ubah warna latar belakang saat hover */
}
#toggle-confirm-password {
border: none;
/* Garis abu-abu */
border-radius: 0 35% 35% 0;
/* Border-radius hanya pada sisi kanan */
/* Untuk membuat tombol berbentuk bulat */
padding: 5px;
/* Menambahkan sedikit padding */
background-color: #F3F3F3;
/* Warna latar belakang abu-abu muda */
}
#toggle-confirm-password:hover {
border-color: #A9A9A9;
/* Ubah warna border saat hover */
background-color: #E8E8E8;
/* Ubah warna latar belakang saat hover */
}
</style>
</head>

Expand Down Expand Up @@ -119,7 +157,8 @@ class="border-top w-100 position-absolute top-50 start-50 translate-middle"></sp
<input type="text" class="form-control"
style="background-color: #F3F3F3;border:0px;border-radius: 0 12px 12px 0"
name="name" id="name" value="{{ old('name', request('name')) }}"
placeholder="Nama" aria-label="" aria-describedby="basic-addon1">
placeholder="Nama" aria-label="" aria-describedby="basic-addon1"
tabindex="1">
<div class="invalid-feedback"></div>
</div>
<div class="input-group mb-3">
Expand All @@ -135,7 +174,8 @@ class="border-top w-100 position-absolute top-50 start-50 translate-middle"></sp
<input type="text" class="form-control"
style="background-color: #F3F3F3;border:0px;border-radius: 0 12px 12px 0"
name="email" id="email" value="{{ old('name', request('name')) }}"
placeholder="Email" aria-label="" aria-describedby="basic-addon1">
placeholder="Email" aria-label="" aria-describedby="basic-addon1"
tabindex="2">
<div class="invalid-feedback"></div>
</div>
<div class="input-group mb-3">
Expand All @@ -150,9 +190,21 @@ class="border-top w-100 position-absolute top-50 start-50 translate-middle"></sp
</svg>
</button>
<input type="password" class="form-control"
style="background-color: #F3F3F3;border:0px;border-radius: 0 12px 12px 0"
name="password" id="password" value="{{ old('name', request('name')) }}"
placeholder="Password" aria-label="" aria-describedby="basic-addon1">
style="background-color: #F3F3F3;border:0px;" name="password"
id="password" value="{{ old('name', request('name')) }}"
placeholder="Password" aria-label="" aria-describedby="basic-addon1"
tabindex="3">
<button type="button" class="btn" id="toggle-password">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
<path
d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
<path
d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
<path
d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
</svg>
</button>
<div class="invalid-feedback"></div>
</div>
<div class="input-group mb-3">
Expand All @@ -167,11 +219,21 @@ class="border-top w-100 position-absolute top-50 start-50 translate-middle"></sp
</svg>
</button>
<input type="password" class="form-control"
style="background-color: #F3F3F3;border:0px;border-radius: 0 12px 12px 0"
name="password_confirmation" id="password_confirmation"
value="{{ old('name', request('name')) }}"
style="background-color: #F3F3F3;border:0px;" name="password_confirmation"
id="password_confirmation" value="{{ old('name', request('name')) }}"
placeholder="Konfirmasi Password" aria-label=""
aria-describedby="basic-addon1">
aria-describedby="basic-addon1" tabindex="4">
<button type="button" class="btn" id="toggle-confirm-password">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
<path
d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
<path
d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
<path
d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
</svg>
</button>
<div class="invalid-feedback"></div>
</div>
<button type="submit" class="btn text-white btn-md mt-3 w-100"
Expand All @@ -183,7 +245,6 @@ class="border-top w-100 position-absolute top-50 start-50 translate-middle"></sp
href="{{ route('login') }}" style="color: #6A42F4;">Masuk</a></p>
</div>
</form>

</div>
</div>
</div>
Expand All @@ -194,6 +255,50 @@ class="border-top w-100 position-absolute top-50 start-50 translate-middle"></sp
</div>

<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
<script>
document.getElementById('toggle-password').addEventListener('click', function() {
const passwordInput = document.getElementById('password');
const type = passwordInput.type === 'password' ? 'text' : 'password';
passwordInput.type = type;
if (type === 'password') {
$('#toggle-password').html(
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
<path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
</svg>`
);
} else {
$('#toggle-password').html(
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
</svg>`
);
}
});
document.getElementById('toggle-confirm-password').addEventListener('click', function() {
const passwordConfirmationInput = document.getElementById('password_confirmation');
const type = passwordConfirmationInput.type === 'password' ? 'text' : 'password';
passwordConfirmationInput.type = type;
if (type === 'password') {
$('#toggle-confirm-password').html(
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
<path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
</svg>`
);
} else {
$('#toggle-confirm-password').html(
`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
</svg>`
);
}
});
</script>
<script>
$(document).ready(function() {
$('#google-login').click(function(e) {
Expand Down

0 comments on commit 931b7a3

Please sign in to comment.