Add account setting to link GitHub account

.env.example

@@ -104,6 +104,10 @@ PUSHER_SECRET=
 
 # GITHUB_TOKEN=
 
+# GitHub client for users to associate their GitHub accounts
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+
 # DATADOG_ENABLED=true
 # DATADOG_PREFIX=osu.web
 # DATADOG_API_KEY=

app/Http/Controllers/Account/GithubUsersController.php

@@ -0,0 +1,88 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Account;
+
+use App\Http\Controllers\Controller;
+use App\Models\GithubUser;
+use Github\Client as GithubClient;
+use GuzzleHttp\Client as HttpClient;
+
+class GithubUsersController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+        $this->middleware('verify-user');
+
+        parent::__construct();
+    }
+
+    public function callback()
+    {
+        $params = get_params(request()->all(), null, [
+            'code:string',
+            'state:string',
+        ]);
+
+        abort_unless(isset($params['code']), 422, 'Invalid code.');
+        abort_unless(
+            isset($params['state']) && $params['state'] === session()->pull('github_auth_state'),
+            403,
+            'Invalid state.',
+        );
+
+        $tokenResponseBody = (new HttpClient())
+            ->request('POST', 'https://github.com/login/oauth/access_token', [
+                'query' => [
+                    'client_id' => config('osu.github.client_id'),
+                    'client_secret' => config('osu.github.client_secret'),
+                    'code' => $params['code'],
+                ],
+            ])
+            ->getBody()
+            ->getContents();
+        parse_str($tokenResponseBody, $tokenResponseBodyParams);
+        $token = $tokenResponseBodyParams['access_token'] ?? null;
+
+        abort_if($token === null, 500, 'Invalid response from GitHub API.');
+
+        $githubClient = new GithubClient();
+        $githubClient->authenticate($token, null, GithubClient::AUTH_ACCESS_TOKEN);
+        $githubApiUser = $githubClient->currentUser()->show();
+
+        GithubUser::importFromGithub($githubApiUser, auth()->user());
+
+        return redirect(route('account.edit').'#github');
+    }
+
+    public function create()
+    {
+        abort_unless(GithubUser::canAuthenticate(), 404);
+
+        $state = bin2hex(random_bytes(32));
+        session()->put('github_auth_state', $state);
+
+        return redirect('https://github.com/login/oauth/authorize?'.http_build_query([
+            'allow_signup' => 'false',
+            'client_id' => config('osu.github.client_id'),
+            'scope' => '',
+            'state' => $state,
+        ]));
+    }
+
+    public function destroy(int $id)
+    {
+        auth()->user()
+            ->githubUsers()
+            ->withGithubInfo()
+            ->findOrFail($id)
+            ->update(['user_id' => null]);
+
+        return response(null, 204);
+    }
+}

app/Http/Controllers/AccountController.php

@@ -11,6 +11,7 @@
 use App\Libraries\UserVerificationState;
 use App\Mail\UserEmailUpdated;
 use App\Mail\UserPasswordUpdated;
+use App\Models\GithubUser;
 use App\Models\OAuth\Client;
 use App\Models\UserAccountHistory;
 use App\Models\UserNotificationOption;
@@ -113,10 +114,20 @@ public function edit()
 
         $notificationOptions = $user->notificationOptions->keyBy('name');
 
+        if (GithubUser::canAuthenticate()) {
+            $githubUsers = json_collection(
+                $user->githubUsers()->withGithubInfo()->get(),
+                'GithubUser',
+            );
+        } else {
+            $githubUsers = null;
+        }
+
         return ext_view('accounts.edit', compact(
             'authorizedClients',
             'blocks',
             'currentSessionId',
+            'githubUsers',
             'notificationOptions',
             'ownClients',
             'sessions'

app/Http/Controllers/ChangelogController.php

@@ -117,9 +117,10 @@ private static function changelogEntryMessageIncludes(?array $formats): array
      *           "major": true,
      *           "created_at": "2021-06-19T08:09:39+00:00",
      *           "github_user": {
-     *             "id": 218,
      *             "display_name": "bdach",
      *             "github_url": "https://github.com/bdach",
+     *             "github_username": "bdach",
+     *             "id": 218,
      *             "osu_username": null,
      *             "user_id": null,
      *             "user_url": null
@@ -318,9 +319,10 @@ public function show($version)
      *       "major": true,
      *       "created_at": "2021-05-20T10:56:49+00:00",
      *       "github_user": {
-     *         "id": null,
      *         "display_name": "peppy",
      *         "github_url": null,
+     *         "github_username": null,
+     *         "id": null,
      *         "osu_username": "peppy",
      *         "user_id": 2,
      *         "user_url": "https://osu.ppy.sh/users/2"

app/Models/GithubUser.php

@@ -3,75 +3,120 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+declare(strict_types=1);
+
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
 /**
  * @property int|null $canonical_id
- * @property \Illuminate\Database\Eloquent\Collection $changelogEntries ChangelogEntry
+ * @property-read \Illuminate\Database\Eloquent\Collection<ChangelogEntry> $changelogEntries
  * @property \Carbon\Carbon|null $created_at
+ * @property-read string|null $created_at_json
  * @property int $id
  * @property \Carbon\Carbon|null $updated_at
- * @property User $user
+ * @property-read string|null $updated_at_json
+ * @property-read User|null $user
  * @property int|null $user_id
  * @property string|null $username
+ * @method static Builder withGithubInfo()
  */
 class GithubUser extends Model
 {
-    public static function importFromGithub($data)
+    /**
+     * Check if the app is capable of authenticating users via the GitHub API.
+     */
+    public static function canAuthenticate(): bool
+    {
+        return config('osu.github.client_id') !== null
+            && config('osu.github.client_secret') !== null;
+    }
+
+    /**
+     * Create or update a GitHub user with data from the GitHub API. Optionally
+     * associate the GitHub user to an osu! user.
+     */
+    public static function importFromGithub(array $apiUser, ?User $user = null): static
     {
-        $githubUser = static::where('canonical_id', '=', $data['id'])->first();
+        $params = [
+            'canonical_id' => $apiUser['id'],
+            'username' => $apiUser['login'],
+        ];
+        if ($user !== null) {
+            $params['user_id'] = $user->getKey();
+        }
+
+        $githubUser = static::where('canonical_id', $params['canonical_id'])->first()
+            ?? static::where('username', $params['username'])->last();
 
-        if (isset($githubUser)) {
-            $githubUser->update(['username' => $data['login']]);
+        if ($githubUser === null) {
+            return static::create($params);
         } else {
-            $githubUser = static::where('username', '=', $data['login'])->last();
-
-            if (isset($githubUser)) {
-                $githubUser->update(['canonical_id' => $data['id']]);
-            } else {
-                $githubUser = static::create([
-                    'canonical_id' => $data['id'],
-                    'username' => $data['login'],
-                ]);
-            }
+            $githubUser->update($params);
+            return $githubUser;
         }
+    }
 
-        return $githubUser;
+    public function changelogEntries(): HasMany
+    {
+        return $this->hasMany(ChangelogEntry::class);
     }
 
-    public function user()
+    public function user(): BelongsTo
     {
         return $this->belongsTo(User::class, 'user_id');
     }
 
-    public function changelogEntries()
+    public function scopeWithGithubInfo(Builder $query): void
     {
-        return $this->hasMany(ChangelogEntry::class);
+        $query->whereNotNull(['canonical_id', 'username']);
     }
 
-    public function displayName()
+    public function displayName(): string
     {
         return presence($this->username)
-            ?? optional($this->user)->username
+            ?? $this->osuUsername()
             ?? '[no name]';
     }
 
-    public function githubUrl()
+    public function githubUrl(): ?string
     {
-        if (present($this->username)) {
-            return "https://github.com/{$this->username}";
-        }
+        return present($this->username)
+            ? "https://github.com/{$this->username}"
+            : null;
     }
 
-    public function userUrl()
+    public function osuUsername(): ?string
     {
-        if ($this->user_id !== null) {
-            return route('users.show', $this->user_id);
-        }
+        return $this->user?->username;
     }
 
-    public function url()
+    public function userUrl(): ?string
     {
-        return $this->githubUrl() ?? $this->userUrl();
+        return $this->user_id !== null
+            ? route('users.show', $this->user_id)
+            : null;
+    }
+
+    public function getAttribute($key)
+    {
+        return match ($key) {
+            'canonical_id',
+            'id',
+            'user_id',
+            'username' => $this->getRawAttribute($key),
+
+            'created_at',
+            'updated_at' => $this->getTimeFast($key),
+
+            'created_at_json',
+            'updated_at_json' => $this->getJsonTimeFast($key),
+
+            'changelogEntries',
+            'user' => $this->getRelationValue($key),
+        };
     }
 }

app/Transformers/GithubUserTransformer.php

@@ -3,19 +3,22 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+declare(strict_types=1);
+
 namespace App\Transformers;
 
 use App\Models\GithubUser;
 
 class GithubUserTransformer extends TransformerAbstract
 {
-    public function transform(GithubUser $githubUser)
+    public function transform(GithubUser $githubUser): array
     {
         return [
-            'id' => $githubUser->getKey(),
             'display_name' => $githubUser->displayName(),
             'github_url' => $githubUser->githubUrl(),
-            'osu_username' => optional($githubUser->user)->username,
+            'github_username' => $githubUser->username,
+            'id' => $githubUser->getKey(),
+            'osu_username' => $githubUser->osuUsername(),
             'user_id' => $githubUser->user_id,
             'user_url' => $githubUser->userUrl(),
         ];

config/osu.php

@@ -123,6 +123,10 @@
     'git-sha' => presence(env('GIT_SHA'))
         ?? (file_exists(__DIR__.'/../version') ? trim(file_get_contents(__DIR__.'/../version')) : null)
         ?? 'unknown-version',
+    'github' => [
+        'client_id' => presence(env('GITHUB_CLIENT_ID')),
+        'client_secret' => presence(env('GITHUB_CLIENT_SECRET')),
+    ],
     'is_development_deploy' => get_bool(env('IS_DEVELOPMENT_DEPLOY')) ?? true,
     'landing' => [
         'video_url' => env('LANDING_VIDEO_URL', 'https://assets.ppy.sh/media/landing.mp4'),

resources/assets/less/bem-index.less

@@ -182,6 +182,7 @@
 @import "bem/gallery-thumbnails";
 @import "bem/game-mode";
 @import "bem/game-mode-link";
+@import "bem/github-user";
 @import "bem/grid";
 @import "bem/grid-cell";
 @import "bem/grid-items";

resources/assets/less/bem/github-user.less

@@ -0,0 +1,15 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.github-user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid @osu-colour-b5;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+
+  &__name {
+    font-size: @font-size--title-small-3;
+  }
+}