Merge pull request #363 from pixelfed/frontend-ui-refactor

Frontend ui refactor
This commit is contained in:
daniel 2018-08-12 20:53:44 -06:00 committed by GitHub
commit 280868a982
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 176 additions and 23 deletions

View file

@ -3,15 +3,22 @@
namespace App\Http\Controllers\Api;
use Auth;
use App\{Like, Profile, Status};
use App\{
Avatar,
Like,
Profile,
Status
};
use League\Fractal;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Http\Controllers\AvatarController;
use App\Util\Webfinger\Webfinger;
use App\Transformer\Api\{
AccountTransformer,
StatusTransformer
};
use App\Jobs\AvatarPipeline\AvatarOptimize;
use League\Fractal\Serializer\ArraySerializer;
class BaseApiController extends Controller
@ -68,4 +75,37 @@ class BaseApiController extends Controller
$res = $this->fractal->createData($resource)->toArray();
return response()->json($res);
}
public function avatarUpdate(Request $request)
{
$this->validate($request, [
'upload' => 'required|mimes:jpeg,png,gif|max:2000',
]);
try {
$user = Auth::user();
$file = $request->file('upload');
$path = (new AvatarController())->getPath($user, $file);
$dir = $path['root'];
$name = $path['name'];
$public = $path['storage'];
$currentAvatar = storage_path('app/'.$user->profile->avatar->media_path);
$loc = $request->file('upload')->storeAs($public, $name);
$avatar = Avatar::whereProfileId($user->profile->id)->firstOrFail();
$opath = $avatar->media_path;
$avatar->media_path = "$public/$name";
$avatar->thumb_path = null;
$avatar->change_count = ++$avatar->change_count;
$avatar->last_processed_at = null;
$avatar->save();
AvatarOptimize::dispatch($user->profile, $currentAvatar);
} catch (Exception $e) {
}
return response()->json([
'code' => 200,
'msg' => 'Avatar successfully updated'
]);
}
}

View file

@ -17,7 +17,7 @@ class AvatarController extends Controller
public function store(Request $request)
{
$this->validate($request, [
'avatar' => 'required|mimes:jpeg,png|max:1000'
'avatar' => 'required|mimes:jpeg,png|max:2000'
]);
try {
$user = Auth::user();

View file

@ -3,7 +3,7 @@
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\{AccountLog, Media, Profile, User};
use App\{AccountLog, EmailVerification, Media, Profile, User};
use Auth, DB;
use App\Util\Lexer\PrettyNumber;
@ -31,24 +31,45 @@ class SettingsController extends Controller
{
$this->validate($request, [
'name' => 'required|string|max:30',
'bio' => 'nullable|string|max:125'
'bio' => 'nullable|string|max:125',
'website' => 'nullable|url',
'email' => 'nullable|email'
]);
$changes = false;
$name = $request->input('name');
$bio = $request->input('bio');
$website = $request->input('website');
$email = $request->input('email');
$user = Auth::user();
$profile = $user->profile;
if($profile->name != $name) {
if($user->email != $email) {
$changes = true;
$user->name = $name;
$profile->name = $name;
$user->email = $email;
$user->email_verified_at = null;
// Prevent old verifications from working
EmailVerification::whereUserId($user->id)->delete();
}
if($profile->bio != $bio) {
$changes = true;
$profile->bio = $bio;
// Only allow email to be updated if not yet verified
if(!$changes && $user->email_verified_at) {
if($profile->name != $name) {
$changes = true;
$user->name = $name;
$profile->name = $name;
}
if($profile->website != $website) {
$changes = true;
$profile->website = $website;
}
if($profile->bio != $bio) {
$changes = true;
$profile->bio = $bio;
}
}
if($changes === true) {

View file

@ -18,8 +18,7 @@ class EmailVerificationCheck
if($request->user() &&
config('pixelfed.enforce_email_verification') &&
is_null($request->user()->email_verified_at) &&
!$request->is('i/verify-email') && !$request->is('log*') &&
!$request->is('i/confirm-email/*')
!$request->is('i/verify-email', 'log*', 'i/confirm-email/*', 'settings/home')
) {
return redirect('/i/verify-email');
}

View file

@ -8,6 +8,15 @@
<hr>
<form method="post">
@csrf
<div class="form-group row">
<div class="col-sm-3">
<img src="{{Auth::user()->profile->avatarUrl()}}" width="38px" class="rounded-circle img-thumbnail float-right">
</div>
<div class="col-sm-9">
<p class="lead font-weight-bold mb-0">{{Auth::user()->username}}</p>
<p><a href="#" class="font-weight-bold change-profile-photo">Change Profile Photo</a></p>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label font-weight-bold text-right">Name</label>
<div class="col-sm-9">
@ -15,15 +24,21 @@
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label font-weight-bold text-right">Username</label>
<label for="username" class="col-sm-3 col-form-label font-weight-bold text-right">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="username" placeholder="Username" value="{{Auth::user()->profile->username}}" readonly>
<input type="text" class="form-control" id="username" name="username" placeholder="Username" value="{{Auth::user()->profile->username}}" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label font-weight-bold text-right">Bio</label>
<label for="website" class="col-sm-3 col-form-label font-weight-bold text-right">Website</label>
<div class="col-sm-9">
<textarea class="form-control" name="bio" placeholder="Add a bio here" rows="2">{{Auth::user()->profile->bio}}</textarea>
<input type="text" class="form-control" id="website" name="website" placeholder="Website" value="{{Auth::user()->profile->website}}">
</div>
</div>
<div class="form-group row">
<label for="bio" class="col-sm-3 col-form-label font-weight-bold text-right">Bio</label>
<div class="col-sm-9">
<textarea class="form-control" id="bio" name="bio" placeholder="Add a bio here" rows="2">{{Auth::user()->profile->bio}}</textarea>
</div>
</div>
<div class="pt-5">
@ -32,15 +47,91 @@
<div class="form-group row">
<label for="email" class="col-sm-3 col-form-label font-weight-bold text-right">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{Auth::user()->email}}" readonly>
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{Auth::user()->email}}">
<p class="help-text small text-muted font-weight-bold">
@if(Auth::user()->email_verified_at)
<span class="text-success">Verified</span> {{Auth::user()->email_verified_at->diffForHumans()}}
@else
<span class="text-danger">Unverified</span> You need to <a href="/i/verify-email">verify your email</a>.
@endif
</p>
</div>
</div>
<hr>
<div class="form-group row">
<div class="col-sm-9">
<button type="submit" class="btn btn-primary">Submit</button>
<div class="col-12 text-right">
<button type="submit" class="btn btn-primary font-weight-bold">Submit</button>
</div>
</div>
</form>
@endsection
@endsection
@push('scripts')
<script type="text/javascript">
$(document).on('click', '.modal-update', function(e) {
swal({
title: 'Upload Photo',
content: {
element: 'input',
attributes: {
placeholder: 'Upload your photo',
type: 'file',
name: 'photoUpload',
id: 'photoUploadInput'
}
},
buttons: {
confirm: {
text: 'Upload'
}
}
}).then((res) => {
const input = $('#photoUploadInput')[0];
const photo = input.files[0];
const form = new FormData();
form.append("upload", photo);
axios.post('/api/v1/avatar/update', form, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res) => {
swal('Success', 'Your photo has been successfully updated! It may take a few minutes to update across the site.', 'success');
}).catch((res) => {
let msg = res.response.data.errors.upload[0];
swal('Something went wrong', msg, 'error');
});
});
});
$(document).on('click', '.modal-close', function(e) {
swal.close();
});
$(document).on('click', '.change-profile-photo', function(e) {
e.preventDefault();
var content = $('<ul>').addClass('list-group');
var upload = $('<li>').text('Upload photo').addClass('list-group-item');
content.append(upload);
const list = document.createElement('ul');
list.className = 'list-group';
const uploadPhoto = document.createElement('li');
uploadPhoto.innerHTML = 'Upload Photo';
uploadPhoto.className = 'list-group-item font-weight-bold text-primary modal-update';
list.appendChild(uploadPhoto);
const cancel = document.createElement('li');
cancel.innerHTML = 'Cancel';
cancel.className = 'list-group-item modal-close';
list.appendChild(cancel);
swal({
title: 'Change Profile Photo',
content: list,
buttons: false
});
});
</script>
@endpush

View file

@ -3,9 +3,9 @@
<li class="nav-item pl-3 {{request()->is('settings/home')?'active':''}}">
<a class="nav-link font-weight-light text-muted" href="{{route('settings')}}">Profile</a>
</li>
<li class="nav-item pl-3 {{request()->is('settings/avatar')?'active':''}}">
{{-- <li class="nav-item pl-3 {{request()->is('settings/avatar')?'active':''}}">
<a class="nav-link font-weight-light text-muted" href="{{route('settings.avatar')}}">Avatar</a>
</li>
</li> --}}
<li class="nav-item pl-3 {{request()->is('settings/password')?'active':''}}">
<a class="nav-link font-weight-light text-muted" href="{{route('settings.password')}}">Password</a>
</li>
@ -14,7 +14,8 @@
</li>
<li class="nav-item pl-3 {{request()->is('settings/notifications')?'active':''}}">
<a class="nav-link font-weight-light text-muted" href="{{route('settings.notifications')}}">Notifications</a>
</li> --}}
</li>
--}}
<li class="nav-item pl-3 {{request()->is('settings/privacy')?'active':''}}">
<a class="nav-link font-weight-light text-muted" href="{{route('settings.privacy')}}">Privacy</a>
</li>

View file

@ -38,6 +38,7 @@ Route::domain(config('pixelfed.domain.app'))->middleware('validemail')->group(fu
Route::get('nodeinfo/2.0.json', 'FederationController@nodeinfo');
Route::group(['prefix' => 'v1'], function() {
Route::post('avatar/update', 'ApiController@avatarUpdate');
Route::get('likes', 'ApiController@hydrateLikes');
});
Route::group(['prefix' => 'local'], function() {