1
0
Fork 0
pixelfed/resources/views/settings/home.blade.php

169 lines
6.0 KiB
PHP
Raw Normal View History

2018-05-26 22:39:32 +00:00
@extends('settings.template')
@section('section')
<div class="title">
<h3 class="font-weight-bold">Account Settings</h3>
</div>
<hr>
<div class="form-group row">
<div class="col-sm-3">
<img src="{{Auth::user()->profile->avatarUrl()}}" width="38px" height="38px" class="rounded-circle float-right">
</div>
<div class="col-sm-9">
<p class="lead font-weight-bold mb-0">{{Auth::user()->username}}</p>
<p class="">
<a href="#" class="font-weight-bold change-profile-photo" data-toggle="collapse" data-target="#avatarCollapse" aria-expanded="false" aria-controls="avatarCollapse">Change Profile Photo</a>
</p>
<div class="collapse" id="avatarCollapse">
<form method="post" action="/settings/avatar" enctype="multipart/form-data">
@csrf
<div class="card card-body">
<div class="custom-file mb-1">
<input type="file" name="avatar" class="custom-file-input" id="avatarInput">
<label class="custom-file-label" for="avatarInput">Select a profile photo</label>
</div>
<p><span class="small font-weight-bold">Must be a jpeg or png. Max avatar size: <span id="maxAvatarSize"></span></span></p>
<div id="previewAvatar"></div>
<p class="mb-0"><button type="submit" class="btn btn-primary px-4 py-0 font-weight-bold">Upload</button></p>
</div>
</form>
2018-08-13 02:50:08 +00:00
</div>
<p class="">
<a class="font-weight-bold text-muted delete-profile-photo" href="#">Delete Profile Photo</a>
</p>
2018-08-13 02:50:08 +00:00
</div>
</div>
<form method="post">
@csrf
2018-05-26 22:39:32 +00:00
<div class="form-group row">
2018-06-01 03:25:18 +00:00
<label for="name" class="col-sm-3 col-form-label font-weight-bold text-right">Name</label>
2018-05-26 22:39:32 +00:00
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" value="{{Auth::user()->profile->name}}">
</div>
</div>
<div class="form-group row">
2018-08-13 02:50:08 +00:00
<label for="username" class="col-sm-3 col-form-label font-weight-bold text-right">Username</label>
2018-05-26 22:39:32 +00:00
<div class="col-sm-9">
2018-08-13 02:50:08 +00:00
<input type="text" class="form-control" id="username" name="username" placeholder="Username" value="{{Auth::user()->profile->username}}" readonly>
2018-05-26 22:39:32 +00:00
</div>
</div>
<div class="form-group row">
2018-08-13 02:50:08 +00:00
<label for="website" class="col-sm-3 col-form-label font-weight-bold text-right">Website</label>
2018-06-01 03:25:18 +00:00
<div class="col-sm-9">
2018-08-13 02:50:08 +00:00
<input type="text" class="form-control" id="website" name="website" placeholder="Website" value="{{Auth::user()->profile->website}}">
2018-05-26 22:39:32 +00:00
</div>
</div>
<div class="form-group row">
2018-08-13 02:50:08 +00:00
<label for="bio" class="col-sm-3 col-form-label font-weight-bold text-right">Bio</label>
2018-06-01 03:25:18 +00:00
<div class="col-sm-9">
<textarea class="form-control" id="bio" name="bio" placeholder="Add a bio here" rows="2" data-max-length="{{config('pixelfed.max_bio_length')}}">{{Auth::user()->profile->bio}}</textarea>
<p class="form-text">
<span class="bio-counter float-right small text-muted">0/{{config('pixelfed.max_bio_length')}}</span>
</p>
2018-06-01 03:25:18 +00:00
</div>
</div>
<div class="pt-3">
<p class="font-weight-bold text-muted text-center">Storage Usage</p>
</div>
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label font-weight-bold text-right">Storage Used</label>
<div class="col-sm-9">
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: {{$storage['percentUsed']}}%" aria-valuenow="{{$storage['percentUsed']}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="help-text">
<span class="small text-muted">
{{$storage['percentUsed']}}% used
</span>
<span class="small text-muted float-right">
{{$storage['usedPretty']}} / {{$storage['limitPretty']}}
</span>
</div>
</div>
</div>
<hr>
2018-05-26 22:39:32 +00:00
<div class="form-group row">
<div class="col-12 text-right">
2018-12-25 06:03:20 +00:00
<button type="submit" class="btn btn-primary font-weight-bold float-right">Submit</button>
2018-05-26 22:39:32 +00:00
</div>
</div>
</form>
@endsection
2018-08-13 02:50:08 +00:00
@push('scripts')
<script type="text/javascript">
2018-11-25 05:52:46 +00:00
2019-04-21 04:31:16 +00:00
$(document).ready(function() {
let el = $('#bio');
2018-11-25 05:52:46 +00:00
let len = el.val().length;
let limit = el.data('max-length');
if(len > 100) {
el.attr('rows', '4');
}
let val = len + ' / ' + limit;
if(len > limit) {
let diff = len - limit;
val = '<span class="text-danger">-' + diff + '</span> / ' + limit;
}
$('.bio-counter').html(val);
2019-04-21 04:31:16 +00:00
$('#bio').on('change keyup paste', function(e) {
let el = $(this);
let len = el.val().length;
let limit = el.data('max-length');
2019-04-21 04:31:16 +00:00
if(len > 100) {
el.attr('rows', '4');
}
2019-04-21 04:31:16 +00:00
let val = len + ' / ' + limit;
2019-04-21 04:31:16 +00:00
if(len > limit) {
let diff = len - limit;
val = '<span class="text-danger">-' + diff + '</span> / ' + limit;
}
2019-04-21 04:31:16 +00:00
$('.bio-counter').html(val);
});
2019-04-21 04:31:16 +00:00
$(document).on('click', '.modal-close', function(e) {
swal.close();
});
2019-04-21 04:31:16 +00:00
$('#maxAvatarSize').text(filesize({{config('pixelfed.max_avatar_size') * 1024}}, {round: 0}));
$('#avatarInput').on('change', function(e) {
var file = document.getElementById('avatarInput').files[0];
var reader = new FileReader();
reader.addEventListener("load", function() {
$('#previewAvatar').html('<img src="' + reader.result + '" class="rounded-circle box-shadow mb-3" width="100%" height="100%"/>');
}, false);
if (file) {
reader.readAsDataURL(file);
}
});
$('.delete-profile-photo').on('click', function(e) {
e.preventDefault();
if(window.confirm('Are you sure you want to delete your profile photo.') == false) {
return;
}
axios.delete('/settings/avatar').then(res => {
window.location.href = window.location.href;
}).catch(err => {
swal('Error', 'An error occured, please try again later', 'error');
});
});
})
2018-08-13 02:50:08 +00:00
</script>
2018-08-26 16:52:12 +00:00
@endpush