Skip to content

Iss 511 2 fa guidepage #606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leonelRos merged 8 commits into from
Jul 13, 2020
Merged

Iss 511 2 fa guidepage #606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8cbe496
Added code.
ruben1s Jul 8, 2020
ca1b128
Fixes #511
ruben1s Jul 12, 2020
24bbc52
Fixes #511
ruben1s Jul 12, 2020
9f52850
Fixes #521
ruben1s Jul 12, 2020
60cb2e5
Fixes #511
ruben1s Jul 12, 2020
8224256
Merge branch 'gh-pages' into iss-511-2FA-guidepage
ruben1s Jul 12, 2020
31efef8
Fixes #511
ruben1s Jul 12, 2020
21cb89c
fixes #511
ruben1s Jul 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 227 additions & 0 deletions _guide-pages/2FA.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
---
title: 2FA Guide
description: <p>Hack for LA requires two-factor authentication (2FA) in GitHub for all project contributors.
</p>
in-this-guide:
- name: To Enable 2FA
link: '#To-Enable-2FA'
- name: FAQ
link: '#FAQ'

---

<div class='content-section'>

<a class='anchor' id='To-Enable-2FA'></a>
<div class='section-container'>
<div>
<h3 class="title-left"><b>To Enable 2FA:</b></h3>
<h5 class="title-left"><b>Visit and follow </b><b><a href="https://docs.github.com/en/github/authenticating-to-github/configuring-two-factor-authentication" target="blank">Github's Guide to Setting Up 2FA</a></b></h5>
</div>

<div>
<br><p>If you already have a 2FA application on your mobile phone, you can use that. If you do not already have a 2FA application you will be instructed to download your mobile app of choice (we have had good luck with Authy) and follow the detailed instructions to complete configuration in GitHub.</p><br>
</div>

<div class="screenshot-2FA">
<img src="../assets/images/guides/2FA/2FA-Screenshot.png" alt="">
</div>
</div>


<div class='section-container'>
<a class='anchor' id='FAQ'></a>
<div class="step-header">
<h3>Frequently Asked Questions</h3>
</div>
<div class=''>


<p class="accordion">What is 2FA? </p>

<div class="panel">
<p>Two-factor authentication, or 2FA, is an extra layer of security used when logging into websites or apps. With 2FA, you have to log in with your username and password, and then provide another form of authentication that only you know or have access to.</p>
<a href="">Read more information about 2FA at GitHub</a>

</div>

<p class="accordion">Why set up 2FA now? </p>
<div class="panel">
<ul>
<li>We are in the process of establishing best practices on Hack for LA projects and in the HfLA organization’s GitHub account.</li>
<li>There have been recent news items about hackers attempting to hold open source repositories for ransom. Although these attempts have mostly been unsuccessful, it is still a good reminder that we should use security best practices.</li>
</ul>

</div>
<p class="accordion">Encountering challenges using Git CLI after setting up 2FA? (Developers) </p>
<div class="panel">

<p>You might encounter a challenge using the Git CLI after enabling 2-Factor Authentication if you have not used the ssh link for the repo URL.</p><br>

<p class="indent">If you clone via the ssh URL for a repo, e.g.</p>
<p class="indent"><mark class="highlight"><code>git@github.com:hackforla/governance.git</code></mark></p>
<p class="indent">instead of the <mark class="highlight">https</mark> URL, e.g.</p>
<p class="indent"><mark class="highlight"><code>https://github.com/hackforla/governance.git</code></mark></p>
<p class="indent">then you probably won't run into any issues after enabling 2FA, as you already use an SSH key.</p><br>

<p>Read more about <a href="https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh" target="blank">connecting to GitHub with SSH.</a></p>
<p>Also, these steps might help you get the CLI auth working again:</p>
<ol>
<li><p>Try pushing code from the CLI, if you get rejected unexpectedly it’s 2FA (if you enabled it)</p></li>
<li><p><a href="https://devconnected.com/how-to-clear-git-cache/#:~:text=The%20easiest%20way%20to%20clear,remove%20an%20entire%20working%20directory." target="blank">Clear your cached GH credentials</a></p></li>
<li><p><a href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token" target="blank">Create a token at GH.com, which you’ll use as your CLI password</a></p></li>
</ol><br>
<p>If you are still having issues using 2FA with your CLI, please reach out to the <a href="https://app.slack.com/client/T04502KQX/CV7QGL66B" target="blank">#ops</a> channel on the Hack for LA Slack.</p>
</div>
</div>
</div>

<div class='section-container' style="display: none;">
<a class='anchor' id='Member-Analytics'></a>
<div class="step-header">
<h3>Member Analytics</h3>
</div>
<div class='getting-started-guide-content-section'>
<div>
<div class="donut-chart">
<canvas id="myCanvas" class="step-header"></canvas>
<script>
let myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;

let ctx = myCanvas.getContext("2d");

let userData = {
"New Members that have 2FA": 20,
"New Members that have never used 2FA": 30
}

function drawLine(ctx, startX, startY, endX, endY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
}
function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle){
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.stroke();
}
function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(centerX,centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
}

let Piechart = function(options){
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;

this.draw = function(){
let total_value = 0;
let color_index = 0;
for (let categ in this.options.data){
let val = this.options.data[categ];
total_value += val;
}

let start_angle = 0;
for (let categ in this.options.data){
let val = this.options.data[categ];
let slice_angle = 2 * Math.PI * val / total_value;

drawPieSlice(
this.ctx,
this.canvas.width/2,
this.canvas.height/2,
Math.min(this.canvas.width/2,this.canvas.height/2),
start_angle,
start_angle+slice_angle,
this.colors[color_index%this.colors.length]
);

start_angle += slice_angle;
color_index++;
}

// for the donut hole
if (this.options.doughnutHoleSize){
drawPieSlice(
this.ctx,
this.canvas.width/2,
this.canvas.height/2,
this.options.doughnutHoleSize * Math.min(this.canvas.width/2,this.canvas.height/2),
0,
2 * Math.PI,
"#FFFFFF"
);
}

start_angle = 0;
for (categ in this.options.data){
val = this.options.data[categ];
slice_angle = 2 * Math.PI * val / total_value;
let pieRadius = Math.min(this.canvas.width/2,this.canvas.height/2);
let labelX = this.canvas.width/2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
let labelY = this.canvas.height/2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle/2);

if (this.options.doughnutHoleSize){
let offset = (pieRadius * this.options.doughnutHoleSize ) / 2;
labelX = this.canvas.width/2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
labelY = this.canvas.height/2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle/2);
}

let labelText = Math.round(100 * val / total_value);
this.ctx.fillStyle = "white";
this.ctx.font = "bold 20px Arial";
this.ctx.fillText(labelText+"%", labelX,labelY);
start_angle += slice_angle;
}

}
}

let myPiechart = new Piechart(
{
canvas:myCanvas,
data:userData,
colors:["#89cff0", "#0000ff"],
doughnutHoleSize:0.4
}
);
myPiechart.draw();
</script>
</div>
<ul class="donut-list">
<li><span class="dot used"></span>New Members that have 2FA.</li>
<li><span class="dot never-used"></span>New Members that have never used 2FA.</li>
</ul>
</div>
</div>
</div>
</div>

<!-- //script for FAQ dropdown -->
<script>
let showAnswer = document.getElementsByClassName('accordion');

for (let i = 0; i < showAnswer.length; i++) {
showAnswer[i].addEventListener("click", function () {

this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none"
} else {
panel.style.display = "block"
}
})

}
</script>
0 _guide-pages/github-issues.md → _guide-pages/github-issues..html
View file
Open in desktop
File renamed without changes.
Loading