First Commit
This commit is contained in:
marco
Executable
+135
@@ -0,0 +1,135 @@
|
||||
{% extends "layouts/dashboard.twig" %}
|
||||
|
||||
{% block title %}{{ __('auth.profile_title') }} - {% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ __('auth.profile_title') }}</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if success %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{ __('auth.profile_updated') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST" action="{{ url('profile') }}" enctype="multipart/form-data">
|
||||
{{ csrf_field() }}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">{{ __('auth.name') }}</label>
|
||||
<input type="text" class="form-control" id="name" name="name" value="{{ user.name }}" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">{{ __('auth.email') }}</label>
|
||||
<input type="email" class="form-control" id="email" name="email" value="{{ user.email }}" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="phone" class="form-label">{{ __('auth.phone') }}</label>
|
||||
<input type="text" class="form-control" id="phone" name="phone" value="{{ user.phone }}">
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 mb-3">
|
||||
<label for="bio" class="form-label">{{ __('auth.bio') }}</label>
|
||||
<textarea class="form-control" id="bio" name="bio" rows="4">{{ user.bio }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="avatar" class="form-label">{{ __('auth.avatar') }}</label>
|
||||
<input type="file" class="form-control" id="avatar" name="avatar" accept="image/*">
|
||||
<div id="avatarPreview" class="mt-2"></div>
|
||||
{% if user.avatar %}
|
||||
<div class="mt-2">
|
||||
<small class="form-text text-muted">{{ __('auth.current_avatar') }}:</small>
|
||||
<img src="{{ user.avatar_url }}" alt="{{ __('auth.current_avatar') }}" class="img-thumbnail" style="max-width: 100px;">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3" x-data="{ show: false }">
|
||||
<label for="current_password" class="form-label">{{ __('auth.current_password') }}</label>
|
||||
<div class="input-group">
|
||||
<input :type="show ? 'text' : 'password'" class="form-control" id="current_password" name="current_password" placeholder="{{ __('auth.current_password_placeholder') }}" autocomplete="new-password" value="">
|
||||
<button class="btn btn-outline-secondary" type="button" @click="show = !show">
|
||||
<i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3" x-data="{ show: false }">
|
||||
<label for="password" class="form-label">{{ __('auth.new_password') }}</label>
|
||||
<div class="input-group">
|
||||
<input :type="show ? 'text' : 'password'" class="form-control" id="password" name="password" placeholder="{{ __('auth.new_password_placeholder') }}" autocomplete="new-password" value="">
|
||||
<button class="btn btn-outline-secondary" type="button" @click="show = !show">
|
||||
<i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3" x-data="{ show: false }">
|
||||
<label for="password_confirmation" class="form-label">{{ __('auth.password_confirmation') }}</label>
|
||||
<div class="input-group">
|
||||
<input :type="show ? 'text' : 'password'" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="{{ __('auth.password_confirmation_placeholder') }}" autocomplete="new-password" value="">
|
||||
<button class="btn btn-outline-secondary" type="button" @click="show = !show">
|
||||
<i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary">{{ __('auth.update_profile') }}</button>
|
||||
<a href="{{ url('dashboard') }}" class="btn btn-secondary">{{ __('auth.cancel') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Preview avatar before upload
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const avatarInput = document.getElementById('avatar');
|
||||
const avatarPreview = document.getElementById('avatarPreview');
|
||||
|
||||
if (avatarInput && avatarPreview) {
|
||||
avatarInput.addEventListener('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
avatarPreview.innerHTML = `<img src="${e.target.result}" alt="{{ __('auth.preview') }}" class="img-thumbnail" style="max-width: 200px;">`;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user