user can choose their avatar to send

README.md

@@ -3,7 +3,7 @@
 
 Authorization code flow: 
 
-http://sl-server:7777/oauth/authorize?client_id=client-id&state=123456&response_type=code&redirect_uri=http%3A%2F%2Fsl-client%3A7000%2Fcallback&state=dvoQ6Jtv0PV68tBUgUMM035oFiZw57
+http://sl-server:7777/oauth/authorize?client_id=client-id&state=123456&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A7000%2Fcallback&state=dvoQ6Jtv0PV68tBUgUMM035oFiZw57
 
 Implicit flow:
 http://sl-server:7777/oauth/authorize?client_id=client-id&state=123456&response_type=token&redirect_uri=http%3A%2F%2Fsl-client%3A7000%2Fcallback&state=dvoQ6Jtv0PV68tBUgUMM035oFiZw57

app/models.py

@@ -446,7 +446,12 @@ class ClientUser(db.Model, ModelMixin):
                     res[Scope.NAME.value] = self.user.name
             elif scope == Scope.AVATAR_URL:
                 if self.user.profile_picture_id:
-                    res[Scope.AVATAR_URL.value] = self.user.profile_picture.get_url()
+                    if self.default_avatar:
+                        res[Scope.AVATAR_URL.value] = URL + "/static/default-avatar.png"
+                    else:
+                        res[
+                            Scope.AVATAR_URL.value
+                        ] = self.user.profile_picture.get_url()
                 else:
                     res[Scope.AVATAR_URL.value] = None
             elif scope == Scope.EMAIL:

app/oauth/templates/oauth/authorize.html

@@ -4,6 +4,33 @@
   Authorization
 {% endblock %}
 
+{% block head %}
+  <style>
+    /* Inspired from https://stackoverflow.com/a/17541916/1428034 */
+    /* HIDE RADIO */
+    [type=radio] {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    /* IMAGE STYLES */
+    [type=radio] + img {
+      cursor: pointer;
+    }
+
+    /* CHECKED STYLES */
+    [type=radio]:checked + img {
+    {#outline: 2px solid #f00;#} display: block;
+      border-radius: 50%;
+      box-sizing: border-box;
+      background-color: #0ff;
+      border: 3px solid #88d748;
+    }
+  </style>
+{% endblock %}
+
 {% block default_content %}
   <form class="card" method="post" style="max-width: 40rem; margin: auto">
     <div class="card-body p-6">
@@ -43,6 +70,9 @@
 
         <div class="text-center mt-4">
           <b>{{ client.name }}</b> will receive the following info
+          <div>
+            <small class="font-weight-lighter">You can customize the information sent to this app.</small>
+          </div>
         </div>
 
         <div class="row mt-4 md-4">
@@ -95,19 +125,26 @@
           </div>
         </div>
 
-
         {% if current_user.profile_picture_id %}
-          <div class="row mt-4">
-            <div class="col-md-3 text-right">
-              <label>Avatar</label>
+          <div class="row mt-4 md-4">
+            <div class="col-md-3 text-left">
+              <label style="padding-top: 2rem">Avatar</label>
             </div>
-            <div class="col-md-9">
-              <img class="profile-picture" href="{{ current_user.profile_picture_url() }}">
+            <div class="col-md-9" style="display: flex; align-items: center">
+              <label>
+                <input type="radio" name="avatar-choice" value="real" checked>
+                <img src="{{ current_user.profile_picture_url() }}" class="small-profile-picture">
+              </label>
+
+              <div style="margin: 0 1rem">OR</div>
+
+              <label>
+                <input type="radio" name="avatar-choice" value="default">
+                <img src="{{ url_for('static', filename='default-avatar.png') }}" class="small-profile-picture">
+              </label>
             </div>
           </div>
         {% endif %}
-
-
       {% endif %}
 
       {% if client_user %}

app/oauth/views/authorize.py

@@ -122,6 +122,8 @@ def authorize():
             suggested_name = request.form.get("suggested-name")
             custom_name = request.form.get("custom-name")
 
+            use_default_avatar = request.form.get("avatar-choice") == "default"
+
             gen_email = None
             if custom_email_prefix:
                 # check if user can generate custom email
@@ -167,6 +169,11 @@ def authorize():
                 )
                 client_user.name = suggested_name
 
+            if use_default_avatar:
+                # use default avatar
+                LOG.d("use default avatar for user %s client %s", current_user, client)
+                client_user.default_avatar = True
+
             db.session.flush()
             LOG.d("create client-user for client %s, user %s", client, current_user)
 

static/style.css

@@ -28,5 +28,16 @@
     /* round the edges to a circle with border radius 1/2 container size */
     border-radius: 10%;
 
+    margin-top: 10px;
+}
+
+.small-profile-picture {
+    /* make a square container */
+    width: 60px;
+    height: 60px;
+
+    /* round the edges to a circle with border radius 1/2 container size */
+    border-radius: 50%;
+
     margin-top: 10px;
 }