149 lines
5.2 KiB
PHP
149 lines
5.2 KiB
PHP
@extends('layouts.app')
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('css/register.css') }}">
|
|
@endpush
|
|
|
|
@section('content')
|
|
<section class="login-section">
|
|
<div class="login-card">
|
|
|
|
{{-- Header --}}
|
|
<div class="login-header">
|
|
<div class="login-logo-wrap">
|
|
<div class="login-logo-box">
|
|
<img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="login-logo">
|
|
</div>
|
|
<span class="login-brand">SEHATI</span>
|
|
</div>
|
|
<p class="login-subtitle">Buat akun baru Anda</p>
|
|
</div>
|
|
|
|
{{-- Error / success --}}
|
|
@if (session('error'))
|
|
<div class="alert alert-danger">{{ session('error') }}</div>
|
|
@endif
|
|
|
|
{{-- Form --}}
|
|
<form action="{{ route('register.store') }}" method="POST">
|
|
@csrf
|
|
|
|
{{-- Email --}}
|
|
<div>
|
|
<label class="login-label" for="email">Email</label>
|
|
<div class="login-input-wrap">
|
|
<i class="fa-solid fa-envelope login-input-icon"></i>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
class="login-input"
|
|
placeholder="email@example.com"
|
|
value="{{ old('email') }}"
|
|
autocomplete="email"
|
|
required
|
|
>
|
|
</div>
|
|
@error('email')
|
|
<small class="text-danger">{{ $message }}</small>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Password --}}
|
|
<div>
|
|
<label class="login-label" for="password">Password</label>
|
|
<div class="login-input-wrap">
|
|
<i class="fa-solid fa-lock login-input-icon"></i>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="login-input"
|
|
placeholder="Minimal 8 karakter"
|
|
autocomplete="new-password"
|
|
required
|
|
>
|
|
</div>
|
|
@error('password')
|
|
<small class="text-danger">{{ $message }}</small>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Konfirmasi Password --}}
|
|
<div>
|
|
<label class="login-label" for="password_confirmation">Konfirmasi Password</label>
|
|
<div class="login-input-wrap">
|
|
<i class="fa-solid fa-lock login-input-icon"></i>
|
|
<input
|
|
type="password"
|
|
id="password_confirmation"
|
|
name="password_confirmation"
|
|
class="login-input"
|
|
placeholder="Ulangi password"
|
|
autocomplete="new-password"
|
|
required
|
|
>
|
|
</div>
|
|
<small id="pesan-konfirmasi" style="font-size:12px; margin-top:-10px; display:block;"></small>
|
|
</div>
|
|
|
|
{{-- Submit --}}
|
|
<button type="submit" class="btn-login">Daftar Sekarang</button>
|
|
|
|
{{-- Divider --}}
|
|
<div class="login-divider">
|
|
<span>Atau daftar dengan</span>
|
|
</div>
|
|
|
|
{{-- Social --}}
|
|
<div class="d-flex justify-content-center">
|
|
<a href="{{ route('auth.google') }}" class="btn-social">
|
|
<img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" width="20" alt="Google">
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
{{-- Login link --}}
|
|
<div class="login-register">
|
|
Sudah punya akun?
|
|
<a href="{{ route('login') }}">Masuk di sini</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const password = document.getElementById('password');
|
|
const konfirmasi = document.getElementById('password_confirmation');
|
|
const btnSubmit = document.querySelector('.btn-login');
|
|
|
|
function cekPassword() {
|
|
const val = konfirmasi.value;
|
|
|
|
if (val === '') {
|
|
konfirmasi.style.borderColor = '';
|
|
document.getElementById('pesan-konfirmasi').textContent = '';
|
|
btnSubmit.disabled = false;
|
|
return;
|
|
}
|
|
|
|
if (password.value === val) {
|
|
konfirmasi.style.borderColor = '#2d6a2f';
|
|
document.getElementById('pesan-konfirmasi').textContent = '✓ Password sesuai';
|
|
document.getElementById('pesan-konfirmasi').style.color = '#2d6a2f';
|
|
btnSubmit.disabled = false;
|
|
} else {
|
|
konfirmasi.style.borderColor = '#e53935';
|
|
document.getElementById('pesan-konfirmasi').textContent = '⚠ Password tidak sesuai';
|
|
document.getElementById('pesan-konfirmasi').style.color = '#e53935';
|
|
btnSubmit.disabled = true;
|
|
}
|
|
}
|
|
|
|
konfirmasi.addEventListener('input', cekPassword);
|
|
password.addEventListener('input', cekPassword);
|
|
</script>
|
|
@endpush
|